DEV Community

Cover image for Why is zoomed-in text red and blue?
Josh Pullen
Josh Pullen

Posted on

7

Why is zoomed-in text red and blue?

If we want to draw something on a computer screen, we do it by setting the colors of individual pixels:

A pixel smiley face

This is pretty useful, but it isn't great if we want to draw something like this:

A diagonal line cutting across some pixel divisions

We can only set each pixel to one color, so in reality we might choose to set the pixels like this:

An ugly attempt to align the diagonal to the pixel grid

That's... not ideal. The boxiness of the pixel grid really cramps our style. Fortunately, there's a fact that helps us improve the situation.

When screen manufacturers create LCD screens, each pixel they make is built using three lights: a red, a green, and a blue. The lights are too small for your eye to distinguish, so the three primary colors blend together. When we set the color of a pixel, these three lights turn on or off accordingly.

White pixel instructions

We tell the screen to do this

The white pixels turned to red, green, and blue

But it secretly does this instead

Since we know the arrangement of the little lights (the "subpixels"), we can fill in just half a pixel by giving it a funky color:

Asking the computer to render some blue and red pixels along the boundaries of the diagonal line

We're telling the computer to render red and blue, but it won't look that way!

Our red and blue pixels have turned to subpixels to make the diagonal smooth

When rendered, the red and blue pixels become left-half and right-half pixels respectively. This looks a lot smoother!

Rendering half-pixels allows us to draw much more smoothly. In practice, this effect is most obvious when you zoom in on well-rendered text:

Zoomed in text with red and blue subpixel trickery visible

Pretty cool!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up