Splitting the Pixel: When is a pixel not a pixel?
A single picture element (a "pixel") of an LCD screen is actually composed of three "sub-pixels": one red, one green, and one blue (R-G-B). Taken together this sub-pixel triplet makes up what we've traditionally thought of as a single pixel.
Our eye sees a single pixel like this:
But a magnifying glass reveals it as:
This means that an LCD screen boasting a horizontal resolution of 800 whole pixels is actually composed of 800 red, 800 green, and 800 blue sub-pixels interleaved together (R-G-B-R-G-B-R-G-B ...) to form a linear array of 2400 single-color sub-pixels.
When our eye sees a solid white line:
What's actually being displayed is:
So: This means that if we were to treat the actual sub-pixels individually -- ignoring their differing colors for the moment -- we would have three times the horizontal resolution from our existing LCD display panels!
The human eye doesn't 'see' closely spaced colors individually since our vision system deliberately mixes these three primary colors in combination to form intermediates. As you probably recall, our eyes only register these three colors and perceive all others as combinations of these.
How is all this useful? Take a look at this example . . .
How is this relevant to improving
The task of rendering small typefaces on digital displays is very challenging. Digital type designers are always wishing for more display resolution than they have.
makes possible on LCD display panels!
There are three other BIG WINS for sub-pixel font rendering:
Font Character Kerning
'Kerning' is the process of managing the spacing between characters. Properly kerned type enhances readability by smoothing out the density of the resulting type.
But kerning at small point sizes is hugely hampered by the relatively large pixel size: Move two characters together by one pixel and now they're too close. Move them back apart and now they're too far apart. But as we've seen, sub-pixel rendering allows character spacing to be tuned to one-third of a pixel width ... for dramatically improved text readability.
Another horror of font designers is bold face type. As a computer user you've probably noticed that sometimes 'bold' seems too bold (way more than it should be) and at other times it doesn't seem to do very much at all.
Once again this is caused by the large relative horizontal width of display pixels: Adding a pixel-width to a character's feature renders the character too bold, but don't add it and there's no change. Sub-pixel rendering allows the font designer to tailor character features to create just the effect that's desired.
Printed italic fonts can be among the most attractive and can be used to highlight passages of text with higher readability than bold facing. But digital systems have traditionally stumbled badly when attempting to render italics since everything becomes slanted ... and we've seen how poorly large pixels handle diagonal character features!
Once again, sub-pixel rendering, which does a beautiful job of displaying delicate sloping features by fine-tuning the location and width of each pixel, promises to bring italic fonts back into much more widespread use.
Rendering Actually LOOK Like?
A Smooth Feast for Our Eyes
Although you can see the following images using any display device, CRT display tubes are not digitally addressable at the sub-pixel level, so you won't be able to see the amazing effect of sub-pixel anti-aliasing and smoothing unless you view these images on an LCD display.
Furthermore, as I explain in the next section 'Limitations of Sub-Pixel Rendering', not all LCD's have the same linear ordering of R-G-B sub-pixels. (Some are B-G-R.) Therefore, I've rendered two sets of images, one for a R-G-B sub-pixel ordering and the other for B-G-R. The one that's correct for your LCD panel will look great, and the wrong one will look horrible and color-fringed:
Viewed with either an LCD or CRT, you should be able to see how the traditional whole-pixel anti-aliasing (the second row above) does smooth out the jaggies, but at the cost of blurring the image in an out of focus fashion. You can imagine that "defocusing" a textual presentation is not the optimal means for improving display quality and readability. Therefore, whole-pixel anti-aliasing does not represent a useful solution for improving small point-size type.
Through the Looking Glass
Since you may not have an LCD screen and Jeweler's Loupe handy, I've photographed the LCD screen of my Toshiba Tecra at super-high magnification. The image processing I performed on these two images was deliberately identical:
A close examination of the sub-pixel rendered image on the right reveals the colored sub-pixels that fill-in the jaggies. If you stand away from your screen a bit, it's clear how much smoother the resulting image has become while maintaining very sharp edges. Furthermore, no color fringe can be seen when these images are viewed at normal magnification and resolution. (As you can demonstrate for yourself by viewing the actual-size diamonds on any LCD display.)
Absolutely! Useful as those diamond-shaped graphics are as proof of concept, sub-pixel rendering really comes into its own when it's used to render text. And since it's the sort of thing that I'd imagine you might want to mess around with on your own machine, I've turned the sub-pixel concepts and technologies into reality with a lightweight (35k byte) 32-bit Windows FREEWARE demonstration program called Free & Clear . . .
Free & Clear requires a 32-bit Windows operating environment (Windows 95/98/NT or a Mac running Virtual PC). The Free & Clear Page has the whole scoop on the program, or you can download it right now! (35k)
If you don't have a Windows environment handy, or if you just want to quickly see the results of sub-pixel rendered text, check out the following text samples that were produced by Free & Clear:
Spectacular Sub-Pixel Rendered Text:
Whether or not you download the Free & Clear demo, be sure to subscribe to GRC's Corporate News Blog because this freeware demo may not be the end of the story! (hint hint! ) And don't worry, any note I ever send will let you easily remove yourself if you regret joining for any reason.
ATTENTION MAC USERS: Free & Clear does run on Macs under Virtual PC with Windows 95/98. I won't be creating a Mac-specific version of the freeware demo, but you can see for yourself (from the samples above) how it looks on your Mac, and you can play with it if you have Virtual PC.
Limitations of Sub-Pixel Rendering
Terrific as sub-pixel rendering is, it has a few limitations that need to be kept in mind:
ONLY LCD's . . . not CRT's!
While the application of Sub-Pixel Graphic Rendering will absolutely benefit virtually all users of LCD displays, it's important to understand that this technique is not applicable to high-resolution Cathode Ray Tube (CRT) displays. Yes, I know, the sample above looked really great on your CRT, but that's mostly because any mature sub-pixel rendering technology also incorporates aspects of anti-aliasing (as we'll see on the next page of this little web zone.) And it's well known that anti-aliasing helps tremendously with the display of text. So even though sub-pixel rendering is better than nothing on CRT's, its "colorized" aspects only really work on LCD displays.
Black and White Images are Best
As we've seen, the success of sub-pixel rendering depends upon using part of an adjacent pixel to extend an existing pattern of sub-pixels which the eye perceives as a slightly larger white or black pixel. While this approach can also be employed with low-saturation (pastel) colors, it will always be most effective when displaying high contrast white and black images. Dark colored text on a white background will be effective, as would white text on a dark colored background. But black & white best shows off what this technology can do.
ONLY Landscape . . . not Portrait!
As we've seen, sub-pixel rendering only enhances the horizontal resolution of LCD panels. It's incredibly convenient that 'horizontally' is precisely where text needs the most help! Emboldening stretches text only horizontally, kerning and micro-justification only shift text horizontally, and italicizing slants type by skewing it horizontally. However, this means that existing color LCD panel technology can not be used with sub-pixel text rendering when the panel is used in a vertical, or portrait, orientation.
It seems to me that this significantly cools off our excitement about the application of our existing hardware for eBooks, since eBooks utilize the traditional book's familiar vertical orientation which is completely incompatible with existing color LCD construction for under sub-pixel rendering.
However, there is certainly nothing to prevent the creation of a new breed of LCD panels specifically for eBooks. They would be longer vertically than horizontally (for portrait orientation), while orienting their sub-pixels horizontally like existing LCD panels. Such a new style display would indeed be a fabulous eBook component since it could display color images clearly while simultaneously employing sub-pixel rendering for its page's text.
Sub-Pixel Order Sensitivity
Since a few LCD panels have their sub-pixels arranged in B-G-R instead of R-G-B order, any industrial strength delivery of sub-pixel rendering technology will require a user-settable (or operating system readable) option to inform the system's LCD rendering engine whether the sub-pixels are arranged in 'forward' or 'reverse' order.
Where To Next?
With a firm grip on the essentials, now you might want to download the demo, learn more about the application of the technology, or find out more about its history. The links below will take you wherever you want to go ...
|How Sub-Pixel Font
|The Free & Clear
|The True Origins
of these Ideas
Q & A
on the Web
|Sub-Pixel Rendering Home Page||Steve's Page|
Gibson Research Corporation is owned and operated by Steve Gibson. The contents
of this page are Copyright (c) 2014 Gibson Research Corporation. SpinRite, ShieldsUP,
NanoProbe, and any other indicated trademarks are registered trademarks of Gibson
|Last Edit: May 28, 2010 at 12:40 (1,738.60 days ago)||Viewed 31 times per day|