Using multi-resolution TIFF files with WebKit on Mac for Retina support

I’m working on Retina support for our Mac application Trickster. Most of the things are pretty standard – either creating PDF images instead of PNGs or creating two PNGs for regular and @2x image.

During the build process the latest Xcode will take the two PNGs and create one multi-image TIFF file which is inserted into the built application’s Resource folder.

Trickster uses WebKit to display its Help screens. Two are just text but one is an image.

Previously I only loaded the image directly, without HTML with:

[[NSBundle mainBundle] URLForImageResource:@"Trickster Help"];

To support Retina version of the image, I created the @2x version, added it to the bundle and went to look how to use the media queries and other CSS tricks to display the double-resolution image on Retina display. I had to build an HTML file and load it into WebKit instead of the PNG:

[[NSBundle mainBundle] URLForResource:@"Trickster Help" withExtension:@"html"];

I built the HTML:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css" media="screen">
    body { margin:0 }

    div#help {
        width: 740px;
        height: 562px;
        background-image: url(Trickster%20Help.png);
        background-size: 740px 562px;       
    }

    @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
      div#help {
        background-image: url(Trickster%20Help@2x.png);  
      }
    }

    </style>
</head>
<body>
    <div id="help"></div>
</body>
</html>

It worked great when I checked it in the standalone Safari. Safari even dynamically substituted the image used based on where the window was when I dragged it.

The problem was in the built application. The PNGs are converted to TIFF, by default, and the HTML can’t find them so it doesn’t display anything.

I thought “OK, I’ll just change the CSS to point to TIFF image”. Then I thought – but I only have one TIFF, what do I put in the media query?

The solution was unexpectedly simple: point background-image URL to the TIFF file and don’t use the media query at all. WebKit handles the double-resolution TIFFs automatically and selects the Retina version when the window is on the Retina screen and regular one, when on regular screens. Yes, it even does that dynamically when dragging Trickster’s help window.

Here’s the final HTML:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css" media="screen">
    div#help {
        width: 740px;
        height: 562px;
        background-image: url(Trickster%20Help.tiff);
        background-size: 740px 562px;       
    }
    body {
        margin: 0;
    }

    </style>
</head>
<body>
    <div id="help"></div>
</body>
</html>

To sum it up — using WebKit with Retina images inside your Mac application becomes very easy. It just works if you point your HTML to multi-resolution TIFF files instead of PNGs. And Xcode generates these TIFF files by automatically. Easy win!

It’s probably not an appropriate solution for general Web use as I don’t think that other browser will support multi-resolution TIFFs. It also requires visitors to download large TIFFs even if they don’t use them (and let’s not forget – most people don’t have Retina displays).

I wonder if a similar solution works on iOS. I haven’t tried. Would love to hear result, if you try it.

You can get in touch with me on Twitter at @apparentsoft.

Using dictation software to study foreign languages

There are many ways to study a foreign language. Books, private teachers, reading, listening, watching movies, writing articles are all valid strategies. But if you don’t live in an environment where the language isn’t spoken by its native speakers, you may have little speaking experience.

English is not my 1st language. In fact, it’s more of a 3rd one. But I do most of my work in English. I read articles and books, listen to podcasts, give interviews, write articles, talk to colleagues and speak at conferences. Still, I don’t speak English as much as I’d like to.

Last year I had a neighbor who emigrated from the United States. He wanted to study Hebrew and I wanted to practice my English. So we arranged to meet a couple of times each week for an hour or two. During the meetings we’ll talk English half the time and Hebrew the other. Later he left our neighborhood and I started to look for other solutions.

What I started to do is using dictation software on my Mac to write articles, reply to support requests and sometimes even for e-mail. I’ve also started to do the same on the iPhone and the iPad.

Dictating text instead of typing it has several benefits as a language study tool:

  • it teaches and trains the correct pronunciation of words
  • it forces to improve the accent
  • it improves enunciation
  • it can help with the fluency of speech

Of these, I find the pronunciation and accent aspects the most beneficial.

Dictation solutions

There are dedicated dictation software applications available for Macs and PCs. The best ones are available from Nuance. These are full-featured applications, they process your speech locally on your computer and they adapt to you. You can teach them both your vocabulary and train them to recognize your voice. They are not cheap, though.

The other solutions use cloud services to send your recorded speech to some servers that process the recording and send back the transcribed text. This is how dictation works on iOS devices and in various solutions by Google, including Android phones, Google voice search and Google Translate. These solutions are a little slower and require an Internet connection.

One interesting benefit of cloud solutions though is that they don’t adapt to your specific accent and speaking style. The cloud solutions assume a “standard” accent. In some cases, like on iOS, you can choose which accent you use to speak (American, UK, Canadian etc). But that’s the only configuration option available. This puts even more “pressure” on you to speak with the correct accent and improve your enunciation.

Of cloud solutions it seems that Google recognizes the most languages including Russian, Polish, Turkish, Arabic languages, Hebrew, Chinese, Dutch, Portuguese, Korean and more. You can download the Google Translate app for iOS and see exactly which languages it recognizes. Unfortunately Google Translate web site only appears to support English dictation for some reason.

To sum it up, if you’re studying a foreign language consider using the multitude of the available dictation solutions to train your speaking abilities in that language.

This article was dictated using Dragon Dictate for Mac from Nuance with some editing done later in the text editor.