Galaxy Trucker

Galaxy Trucker

When my wife’s family gets together all we do is play games. And last week while visiting in San Antionio for my brother-in-law’s graduation we learned a new one: Galaxy Trucker. Galaxy Trucker really hits it off with nerdy board gamers who enjoy Ticket to Ride or Settlers of Catan.

Not only is the game-play extremely addicting, even the instruction booklet had us all laughing until it hurt as we learned the game for the first time. But, as it goes for nearly every game, it’s impossible to describe without finally resorting to, “you just have to play it.”

Galaxy Trucker

A Broad Array of iPhone Keyboards

iPhone keyboard layouts come in threes.

Regardless of where you are entering text, there are almost always three different keyboards available to you. Each one with unique characters. But not all these keyboards are created equal — their contents and design usually change based on the type of the input field you are entering text into.

The three basic classifications of keyboards are:

  • The “ABC” Keyboard: The first keyboard you’re presented with when the keyboard slides up. You can only toggle to the “123” keyboard from here.
  • The “123” Keyboard: Contains numbers and common characters, and can be toggled to via the ABC keyboard.
  • The “#+=” or “@123” or other Keyboard: Contains additional, and less-common characters not found on the “123” keyboard, and sometimes contains numbers as well. It can only be toggled to via the “123” keyboard, but from here you can toggle back to the “123” or the “ABC” keyboard.

Depending on which type of input field you are entering text into — and which app that input field is in — the contents, and in some cases even the design, of the three keyboard layouts vary compared to another type of input field.

Most of the iPhone keyboards are very similar in their layout and contents, with only slight changes to their design or contents for the sake of the input field’s context. Added up, there are 12 unique keyboard layouts.1

Additionally there is the landscape keyboard, which is currently available only in Mobile Safari.2 The landscape keyboard has the same character placements as the vertical keyboard in Mobile Safari, but is 160 pixels wider since the phone has to be held sideways to use it. Meaing, its contents are the same, but its design is different (wider).

Adding in these six unique layouts of the landscape keyboard, iPhone has 18 unique keyboards as part of its native OS.

Below is a small and brief chart of the 9 most common keyboards. Click on the image for a full-size PDF of all 18 keyboards.

There are 18 unique keyboard layouts in iPhone OS 2.1.2

  1. Since the iPhone SDK allows for some customization of the keyboard, there are 3rd-party apps that use customized keyboards. ↵
  2. iPhone OS 3.0 anticipates adding the landscape keyboard to additional apps, such as Mail and Notes. ↵
A Broad Array of iPhone Keyboards

A Brief Comparison of Font and Background Colors Rendered Across Major Browsers in Mac OS X

There is an unfortunate side-effect to Websites that sport light text on a dark backgrounds: in general, the light-on-dark font appears as more bold than its dark-on-light counterpart.

The truth is, it is not actually more bold (in terms of the actual number of pixels that make up the stroke width), it simply appears more bold due to the anti-aliasing of the font by the browser and operating system.

It is easy to notice Web fonts rendering differently on different operating systems. But, fonts also render differently in different browsers, even within the same operating system.

There are three things I want to look at regarding font and background coloring, and how it renders in various browsers in Mac OS X.

First of all, we’ll compare the way dark text on a light background looks in a browser next to light text on a dark background in the same browser. Secondly, we’ll compare the rendering (anti-aliasing) of the text in various rendering engines. And finally, for fun, we’ll look at the un-expected differences in kerning.

Color Comparisons

The screenshots below are taken from each of the major Web browsers for Mac OS X.1 Firefox and Camino both use Mozilla’s Gecko rendering engine, Safari uses Webkit, and Opera uses Presto.

On the left side the background color is #a0a08b, and the font color is #393831. The right side is the flip-flopped style of that — background: #393831; color: #a0a08b; — and is the same styling as this website. The large, serif font is 16px Times New Roman (this site’s h1 tag) and the smaller sans-serif is 11px Lucida Grande (this site’s default body font).

Safari 4 Public Beta

Safari 4: Screenshot of Reversed Colors

Firefox 3.0.6

Firefox 3: Screenshot of Reversed Colors

Camino 1.6.7

Camino: Screenshot of Reversed Colors

Opera 9.64

Opera 9: Screenshot of Reversed Colors

At first glance, it is easy to spot how the dark text on light background appears less bold than the light text on the dark background. Especially in Times New Roman. Regardless of which browser is rendering the font, comparing and contrasting the stroke of the letters between light and dark you can see how the dark letters on the light background appear thinner, sharper, and better rendered.

Also worth noting before moving on is that the two Gecko-run browsers (Firefox and Camino) render both the light text on dark and the dark text on light thinner than Safari or Opera do.

The main contributing factor to a font appearing as more or less bold is the color of the pixels that make up the stroke width. You’ll notice in the screenshots below, that the stroke for the leg of the “H” set in Times New Roman is five pixels wide. You have to look closely to count all five pixels of the H set on a light background, whereas you can easily see the five pixels of the light H on the dark background.

Browser-Specific Display of Pixel Colors Within the Stroke

As visible from the previous screenshots, when it comes to stroke width, the four browsers end up boiling down into two: Safari and Firefox.

Since Safari and Opera rendered identicaly in this comparison, I removed Opera. Firefox and Camino both use Gecko and they render identical to one another, so I removed Camino. This is convenient for the comparisons, because Safari and Firefox are the two most common browsers used in Mac OS X.

When looking at the below letters zoomed in, not only does it become clear as to why one color combination appears thinner than another, but it is fascinating to study the pixel-by-pixel differences between the colors and the strokes.

For example, compare how the Times New Roman “H” renders on the dark-background in Safari versus Firefox. In Safari, there is one pixel of space between the inside of the top and bottom serifs. However, in Firefox, they actually — though barely — touch.

Safari vs Firefox Rendering of Times New Roman at 1,100% (The cyan dots mark the pixel grid)

Safari 4 Beta

font: Times New Roman;
background: #a0a08b;
color: #393831;
Times New Roman: dark text on a light background

Safari 4 Beta

font: Times New Roman;
background: #393831;
color: #a0a08b;
Times New Roman: light text on a dark background

Firefox 3

font: Times New Roman;
background: #a0a08b;
color: #393831;
Firefox: dark text on a light background

Firefox 3

font: Times New Roman;
background: #393831;
color: #a0a08b;
Firefox: light text on a dark background

Safari vs Firefox Rendering of Lucida Grande at 2,250% (Again, The cyan dots mark the pixel grid)

Similar to the H set in Times New Roman, you can easily see how the anti-aliasing of this H set in Lucida Grande differs in contrast depending on the color it is placed on.

Safari 4 Beta

font: Lucida Grande;
background: #a0a08b;
color: #393831;
Safari: dark text on a light background

Safari 4 Beta

font: Lucida Grande;
background: #393831;
color: #a0a08b;
Safari: light text on a dark background

Firefox 3

font: Lucida Grande;
background: #a0a08b;
color: #393831;
Firefox: dark text on a light background

Firefox 3

font: Lucida Grande;
background: #393831;
color: #a0a08b;
Firefox: light text on a dark background

Kerning

A final point of nerdery: beyond anti-aliasing differences, each browser also has its own opinion for kerning as well.

It is most noticeable between the “W” and the “o” in “World” for the font Times New Roman:

Safari, Camino, and Opera

X-Height = 13px
Kerning = 4px
W and O kerning in Safari

Firefox 3

X-height = 13px
Kerning = 1px
W and O kerning in Firefix

And the Point is?

Not only does anti-aliasing vary based on operating systems, monitors and which fonts you’re rendering, it also can change based on the rendering engine of the browser you’re using to view the Web page. But, in general, RGB anti-aliasing of dark fonts on light backgrounds appear as more crisp than for light fonts on dark backgrounds.

  1. Originally I included screenshots from Safari 3 and Firefox 2, since they are still in wide circulation. But they rendered identical to their more-recent-version counterparts, and there comes a point where “thorough” crosses the line and becomes “too much information”. ↵
A Brief Comparison of Font and Background Colors Rendered Across Major Browsers in Mac OS X

Tweetie for Mac is Now Available

Tweetie for Mac is Now Available

The big bird is finally out of its cage.

One thing I like most about Tweetie is the ability to drill down into conversations and user’s tweets. The feature is much like that on the iPhone version of Tweetie but with an implementation that is much more desktop-y.

Tweetie also lets you choose your own URL shortening service, and will take long links and convert them to short ones from within the New Post Box. And if you tweet links often, Loren has created a bookmarklet which will take the current Web page you’re on and start a new tweet post with that URL in it (much like the bookmarklet that works with MarsEdit). Info on the Tweetie bookmarklet can be found here.

Also, Tweetie is powered by Fusion Ads. Not only does the free version display in-line ads from Fusion, but even the for-pay version gives you the option to enable the ads.

Tweetie for Mac is Now Available

Birdhouse — A Notepad for Twitter

Birdhouse — A Notepad for Twitter

It is a simple idea made great by putting a twist and a story to it. The twist is that “Birdhouse was built to give you more control over writing for Twitter.” Cameron and Adam built an app that applauds the idea that Twitter can be better if you aren’t constantly telling people simply what you’re doing. Even first dialog box you see when you open the app says, “Birdhouse requires you to have a Twitter account and something to say”.

Birdhouse is the first iPhone app I’ve seen that launched with a story: the demo video had a plot; the pre-published tweets from @camh and @lonlysandwich; and then that same tweet waiting for you to publish once you set up Birdhouse.

This app not only has its own personality, but it helps its users to have one too.

Birdhouse — A Notepad for Twitter