Sometimes, the application design requires displaying vertical (rotated) texts. While this is not a common requirement, and the usage of vertical texts must be kept to an absolute minimum, one should be aware of the possible technical solutions and the problems associated with them. This entry shows two possible solutions, accompanied by the screenshots and short technical explanations specific to LCD monitors with enabled subpixel anti-aliasing.

One way to draw rotated texts (by either 90 or 270 degrees) is to draw a horizontal text on an offscreen image, rotate that image by the relevant amount and draw it on the screen. Here is how it looks like (using the native text rendering provided by SWT):

If the texts look a little fuzzy, it’s not because your monitor has different subpixel settings. Here is a 400% zoom on one text:

What’s with the extra horizontal bluish lines? Those come from the original subpixel rendering of the horizontal text that takes advantage of the LCD physical structure, as explained and illustrated in this java.net article by Chet Haase. Unfortunately, this doesn’t work so well on image rotation – the”extra” blue pixels simply make the text fuzzy and much less readable.

What’s the alternative? Another way is to install an affine transformation on the graphic context that rotates all graphic operations by 90 or 270 degrees. The implementation here is a little bit more complicated, since the transformation needs to be preceded by matching offset translation. And here is how it looks like:

Zooming a little on one of the texts:

Now this is crisper than the first technique, it still is far from perfect. For comparison, here is the same exact text drawn unrotated:

Note the width of digit 0 – when it’s drawn horizontally, it has three pixels between the outer sides. However, when it’s drawn vertically, it has only two pixels. Looking back at the screenshot of vertical sliders, the labels look much less defined as compared to the usual Vista texts (under Segoe UI font).

I’m not really sure what causes the loss of pixel in digit 0. During the past few months working with Vista, i have to say that i never have seen a single native application (including Office 2007 and SWT-based Eclipse) using vertical texts anywhere in the UI. Perhaps the native font rasterizer was never optimized to handle this case at all…