

Sub-pixel re-workings of YouTube and BBC favicons - marcusbooster
http://typophile.com/node/60577

======
Erwin
Another blog post by the same author introduces a 3 pixel font taking
advantage of the subpixels: <http://typophile.com/node/61920>

I might get that for xemacs and annoy coworkers with 500-character long lines.
"But they don't wrap on my screen!"

~~~
jcromartie
Heh, I have made 2-pixel-wide text before. I certainly wasn't as pretty as the
3-pixel one here... but it worked! It always impresses people, but there are
so many "gotchas" that it's really not practical.

~~~
mhansen
Link?

------
rbanffy
Interesting idea.

Unfortunately, I have one of my LCDs rotated 90 degrees and, so, any sub-pixel
smoothing fails miserably unless it accounts for the rotated sub-pixels.

~~~
windsurfer
Perhaps there needs to be a new standard for pngs where you can have one image
for each subpixel order.

Or we can get everyone to use RGB. Either would work.

~~~
rbanffy
Why not just reference a larger .png file in your HTML and let the browser
deal with the specifics?

~~~
yangyang
The bigger download would slow things down.

Not sure if image resizing could even make sensible use of sub-pixel
rendering...

~~~
rbanffy
A 32x32 PNG would not be that much larger than a 16x16.

------
Luc
I made a 'sub-pixel accuracy scrolling' demo once on the Gameboy Color: one
half of the screen scrolling at 1 pixel a frame, the other at 1/3 pixels.
Amazing how jarring the normal scrolling looks once you get used to the sub-
pixel smoothness.

~~~
zokier
This is kinda neat demo of subpixel rendering:

[http://antigrain.com/research/font_rasterization/sample_aria...](http://antigrain.com/research/font_rasterization/sample_arial_1tenth_shift.png)

Each line shifts 0.1px to right. Taken from.

<http://antigrain.com/research/font_rasterization/index.html>

which is excellent introduction to subpixel rendering

------
ggchappell
Very interesting. Apparently we can make images clearer by shifting the red
half a pixel to the left and the blue half a pixel to the right (very roughly
speaking; I know there is more to it than that).

What's up with that? Can anyone find/give an explanation of this phenomenon?

EDIT: This guy Miha is amazing. Check out this tiny little font he is working
on (go to nearly the bottom of the page for a more complete version):

<http://typophile.com/node/61920>

~~~
anigbrowl
It's from a phenomenon known as chromatic aberration which is a characteristic
of lenses, including the one in your eye (more so if you have astigmatism).

Have you ever looked at someone silhouetted by a bright light, and noticed
color fringing on the left and right sides? That's the reason (if you haven't,
you have very good eyes). It's also something you often see on photos from
cheap digital cameras, where it is introduced by cheap lenses shining onto
tiny sensors: <http://en.wikipedia.org/wiki/Chromatic_aberration>

Interestingly, if you look at the typophile page through a vertically-oriented
prism, you'll see similar color fringing on both images - the giant red and
white 'pixels' in authentic favicon will shift towards...yellow and purple.
Make sure you are looking through the second rotation of the prism - the first
rotation does not induce color fringing but reverses left and right instead.

edit: Also, someone should hire that guy, like now.

~~~
ars
No, I'm sorry, but none of what you wrote is correct.

The color fringing is due to an effect similar to a diffraction grating. It's
caused by light bending as it travels near an edge (like a prism makes a
rainbow by bending light). Chromatic aberration exists, but has nothing to do
with the color fringing.

The color fringes on the icon are clearer because an LCD monitor actually has
3 times as many pixels as the typical count. It has 3 pixels for each normal
pixel: one for Red, Green, and Blue.

These images make use of that, to basically have 3 times the resolution of an
ordinary image. So smaller details are now visible.

It doesn't work on CRT's (it actually looks worse). And it only works on LCD's
if the order of the sub-pixels is the same as what the author expects.

~~~
anigbrowl
Don't be sorry, I was wrong. Diffractive lenses are used in camera lenses to
correct chromatic aberration from refractive lenses, so I sloppily equated the
two. Thanks for your clear explanation!

It is true about the prismatic color-shifting, though - I have one on the desk
so that was an observation rather than a hypothesis.

------
jrwoodruff
That's amazing. Stuff at this scale is so difficult to work with, one pixel is
the difference between readable and unreadable.

------
antirez
What about a paint-style program where the user is presented in one side with
the magnified version of the image that is actually split into RBG, and the
actual image on the other side? This could allow to do similar things much
more easily.

------
Timothee
Wouldn't it be rendered differently depending on displays, OS, etc.? I'm
wondering if it's just an exercise or if it could be really used.

It's interesting and I wish s/he went into more details on how to do it.

~~~
ars
It's called Sub-pixel rendering.

<http://en.wikipedia.org/wiki/Sub-pixel_rendering>

And google it also, there are many sites that explain it, so I won't repeat
them.

It only works on LCD's, and the order of the sub-pixels on your LCD has to
match the authors.

There is an option you can set to tell your OS to use sub-pixels when anti-
aliasing fonts.

Basically for each pixel, there are actually 3, one for each of red, green,
blue. By using this, you can increase the horizontal resolution by a factor of
three (more or less).

Horizontal resolution, because most LCD's have the three sub-pixels in a
horizontal row.

~~~
JulianMorrison
"Only works on LCDs", I'd question. I've seen it working on CRT screens too,
and I see no reason it wouldn't - they also have 3 subpixels horizontally.

~~~
ars
From wikipedia:

"The technology is well-suited to LCDs and other technologies where each
logical pixel corresponds directly to three independent colored sub-pixels,
but less so for CRTs. In a CRT the light from the pixel components often
spread across pixels, and the outputs of adjacent pixels are not perfectly
independent. If a designer knew precisely a great deal about the display's
electron beams and aperture grille, subpixel rendering might have some
advantage. But the properties of the CRT components, coupled with the
alignment variations that are part of the production process, make subpixel
rendering less effective for these displays."

Depends on your screen, but mine has the colors in a triangle. This means that
the same colors are not always on the same side of the pixel, so you can't use
sub-pixel rendering (see the picture in the article, basically the green is
first on the left, then on the right, and back and forth). If you have a
Trinitron monitor it could work though.

------
est
Sub-pixel is a new way of captcha generating.

------
ajkirwin
I actually hate the one on the right. I don't want my favicons to be
necessarily readable, or a blur of colors like that.. they're ICONS. Visual
REPRESENTATIONS. Infact, most of the 'better' versions on that page sucked a
lot more to my eyes.

~~~
anigbrowl
How good are your eyes? - I am curious about whether you have had them tested
and if so what visual acuity score you received. It might very well be your
vision is abnormally sharp and the colors are a distraction.

~~~
ajkirwin
My eyes are very good. Infact, even sitting at a distance of a few meet I can
see individual pixels and sometimes even the subpixels.

