Subpixel Scrolltext in JavaScript
August 5th, 2008
After having it in my to-do list (the “what if?” section) for a long time, I’ve finally managed to spend some time on a JavaScript implementation of a very tiny scrolltext; using a 5×5 font with subpixel rendering (aka ClearType). Knowing what subpixel-rendered static letters look like on an LCD, I wanted to see the effect of scrolling them, 1/3 pixel at a time. Note: you need an LCD monitor to see the full effect.
Since I’m shifting the letters 1/3 pixel at a time and not as whole pixels, the actual pixels used for rendering the text constantly change color, coming back to the same color every 3 frames. My speculation is, this constant shifting of colors improves the clarity of the text.
An artifact of subpixel rendering is colored halos around letters due to the fact that colored pixels are required to render even completely black text. However, since the colored pixels of the scrolltext keep taking on different colors, they’re just being perceived as tones of gray. The colored halos are barely noticeable when the text is on the move.
This effect is not evident when anti-aliasing (for eliminating color fringing) is fully enabled. When the anti-aliasing level is changed, the effect can be observed on the intermediate buffer that I use as a speed optimization and kept visible for the purpose of this demo. Since the letters on the intermediate buffer are static, the colored halo effect is noticeable:
With partial anti-aliasing, the halos are going to get worse:
Finally with anti-aliasing turned off, it’s a whole mess of bright colors, making the text almost completely unreadable:
However, if you look at the scrolling text at all anti-aliasing levels, you’ll observe that even when anti-aliasing is completely turned off, the color halo lessens and what you see is mostly a horribly flickering black text.