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 . . .

Suppose we wish to draw an object with a sloping diagonal edge. Using standard 'whole' white pixels, the best job we can do creates a very jagged edge. The 'pixilation' that is inherent in all digital display systems creates this very familiar looking result. (The technical term for this is 'Spatial Sampling'.)

But on any LCD panel, we can take advantage of the known-ordering of the individual R-G-B sub-pixels that exist within each whole LCD display pixel. So, as shown here, by drawing the diagonal edge with some non-white pixels we can produce a much smoother edge to dramatically reduce the jaggies!

Even though the pixels along the diagonal edge are non-white, our eyes still perceive them as absolutely white, since the sub-pixel color-bars are immediately adjacent to the other primary colors (as you can see in the diagram above.) Therefore we perceive this as a plain white super-smooth edge!

How is this relevant to improving
the quality of digital type display?

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.

Font Emboldening

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.

Font Italicizing

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.

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:

Traditional Whole-Pixel Graphics
Traditional Whole-Pixel Anti-Aliasing
R-G-B LCD Sub-Pixel Rendering
B-G-R LCD Sub-Pixel Rendering

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.

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:

Whole Pixel Rendering		Sub-Pixel Rendering

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.)


So how about some sub-pixel rendered text?

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:

Standard Whole-Pixel Windows TrueType rendering:

Spectacular Sub-Pixel Rendered Text:

NOTE: Even though this second example looks okay on a CRT, it appears very smeary unless you view it on an LCD ... and on an LCD, as I hope you'll see, it's truly stunning!

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.

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 sub-pixel rendering depends heavily upon the physical proximity of adjacent sub-pixels, the rendering algorithm must know whether the pixels are ordered Red-Green-Blue or Blue-Green-Red. (Those are the only two sequences occurring on LCD panels.) If the sub-pixel rendering algorithm gets the sequencing backwards (as shown in this example) the result is as bad as getting it right is good.

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.

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 ...