https


How It Works

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 our eye sees

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?


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.

For example, this is an 8 point regular (non-italics, non-bold) capital 'A' rendered in Microsoft's standard Times New Roman font. And while we may be able to discern its character, it is vastly less clear and sharp than if the same size character were printed on paper.
When we zoom-in to see what that capital 'A' looks like at the pixel level, we encounter this horrifically blocky and barely recognizable result.

It's plain to see that the type designers would have loved to have true diagonal lines, but were forced into making huge compromises by the limitations of the display's resolution. Just look at the feet on that thing!

Out of sheer desperation, a technique known as 'anti-aliasing' was developed. It attempts to employ shades of gray where font designers would like to show only 'part' of a pixel. The hope is that our eyes will tend to average two adjacent gray pixels to see one in the middle.

The actuality, however, is less wonderful. For small type sizes anti-aliasing merely blurs the image and reduces readability.

But here's what can be done if the horizontal resolution of the display is tripled!

With three times more pixels available horizontally, the typeface designer can create digital characters that rival the appearance of those printed on paper!

(Stay tuned and I'll show you what this looks like at actual size on an LCD panel!)

This is what sub-pixel rendering technology
makes possible on LCD display panels!

By 'borrowing' sub-pixels from adjacent whole pixels, we can fine-tune the placement and width of typeface features with three times more horizontal accuracy then ever before!

Our eyes cooperate by seeing only black and white, since the 'borrowed' sub-pixels are always adjacent to their complementary color pixels, which our eyes mix to form white!


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.

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.


So WHAT does Sub-Pixel
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:

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.


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:

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

Click to Download the Free&Clear App (35k)

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:
whole-pixel rendered text

Spectacular Sub-Pixel Rendered Text:

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.


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


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
Rendering Works
Turning Theory
into Practice
The Free & Clear
Rendering Demo
The True Origins
of these Ideas
Sub-Pixel
Q & A
Other Resources
on the Web
Sub-Pixel Rendering Home PageSteve's Page

Jump to top of 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
Research Corporation, Laguna Hills, CA, USA. GRC's web and customer privacy policy.
Jump to top of page

Last Edit: May 28, 2010 at 14:33 (1,426.99 days ago)Viewed 15 times per day