Textorize: Pristine Font rendering for the Web

http://mir.aculo.us/2009/09/29/textorize-pristine-font-rendering-for-the-web/

by ams1 • 17 years ago

18 23 17 years ago

mir.aculo.us

adamhowell• 17 years ago

This won't generate much interest on HN, unfortunately, but this is pretty cool -- most especially the subpixel antialisasing.

there• 17 years ago

...using images, for OS X only.

callmeed• 17 years ago

Yeah, I don't really get the "for the web" in the title.

I need pristine font rendering on my webserver

natrius• 17 years ago

There are several common serializations of images which can be saved to disk and transferred to your web server as needed. If you need pristine dynamic font rendering, OS X is equipped with networking functions that allow you to send commands to the machine and receive the results back on your web server with latency that is low enough for most purposes.

(I apologize for the facetiousness, but it was too fun to write for me to go back and edit it now.)

surfmike• 17 years ago

Another drawback of this approach is that the text will looked horrible on CRTs. CRTs don't have the same pixel geometry as LCDs.

callahad• 17 years ago

Nor do all LCDs have the same pixel arrangement.

zokier• 17 years ago

The problem with OS X font rendering imho is that it produces heavier result than anything else.

I made comparison picture, and noticed that Adobe Reader renders text bit taller than others, but on the other hand it has imho best antialiasing. http://img154.imageshack.us/img154/5549/fontrendering.png

(Samples are from Windows/Wordpad, Adobe Acrobat(using pdf printed from Wordpad), Microsoft Word, Adobe Photoshop (sharp), in that order.)

moosecake2• 17 years ago

This is really just a design philosophy: http://damieng.com/blog/2007/06/13/font-rendering-philosophi...

PDF (technically Quartz PDF) is the native format for OS X, so that may be part of the reason why it seems like their text rendering attempts to mimic print like this.

mquander2• 17 years ago

So the proposal is to prebuild subpixel-smoothed images of your text for the web?

Not everyone can read subpixel rendering correctly (CRTs, LCDs with weird subpixel orders, people with rotated screens.) You can't increase or decrease the font size in your browser, and you can't wrap it on a smaller screen. Plus, the text isn't selectable or searchable, which is a showstopper. That's why things like sIFR exist.

What is the point? I completely disagree that this is pretty cool. This sucks (compared to other solutions, including not doing it at all.) It is the ultimate triumph of form over function. It is like something someone would have suggested in 2001. If you want something cool, check out modern solutions to this problem like Cufon, which generates fonts that can be rendered as real text with Javascript.

That, or, you know, let the user decide how he wants to read your text instead of trying to control every last pixel on his screen.

Maro2• 17 years ago

And all you need is a Mac, OSX, Ruby and some Ruby package, and then you can have really cool imagetexts on your relaxed ROR web app that you generate from the command line! But it's on github!

tptacek2• 17 years ago

Content-free snark. You need OSX to generate the images. You obviously don't need OSX or Rails to use them.

tptacek2• 17 years ago

I get the sense that most modern web apps don't use sIFR or Cufon for custom typography; they use images, just like in '01. The only thing that I see changing is that it's become fashionable to use browser type in places where it wasn't before.

That being the case, this is just a presentation on how to do a better job generating type images, and it is pretty cool that he put so much effort into doing a better job than Photoshop does.

rbanffy2• 17 years ago

I think "This sucks (compared to other solutions, including not doing it at all.)" sums up pretty well what I would like to say. Thanks.

moosecake2• 17 years ago

"no text selection (IMHO a feature, not a bug)"

How is that a feature?

idm• 17 years ago

Yeah - that's a pretty hard case to argue. I can imagine content-controlling situations where you might think of that as a feature, but there are other situations (most use cases, IMHO) where text selection is an expected paradigm.

EDIT: that said, I do think this is a neat and worthy project.

anigbrowl• 17 years ago

Prevented coypasta without links. Of course you are more likely to get no links at all since most people like to quote one paragraph and link. Which might be why he isn't actually using it on his page. Though now that he's drawn attention to it, his headings do look ugly.

ZeroGravitas3• 17 years ago

I was going to point out that the demo image is misleading because the Mac's rendering would look better than Photoshop even without subpixel anti-aliasing (which is plain stupid for the web, minimal gain with possibility of looking much worse in certain circumstances) but I don't have to:

"Even when subpixel antialiasing is turned off (Appearance panel in System Preferences), the rendered text still looks better than that from Photoshop, Flash and JavaScript." -- the author, in comments

This would allow transparent backgrounds too, which seems to be the number one request. I'm guessing it would be fairly easy to replicate this cross platform using the standard linux text rendering stack. Mac text rendering isn't really about better technology, they just make different decsions.

Decisions that those used to Windows text rendering hate. I on the other hand love it and set my Ubuntu boxes up the same way. I think this should be the default on Ubuntu but people get really attached to the text rendering they are used to.

mquander2• 17 years ago

Not to derail, but ZG, are you referring to a particular setting for the Mac font rendering besides the subpixel thing in /etc/fonts/local.conf? I'm setting up a Gentoo desktop and haven't used desktop Linux in some years, and I'd love to have nicer-looking fonts. I turned on subpixel support, hinting, and anti-aliasing, but things still look (imo) subpar to Mac font appearances.

ZeroGravitas3• 17 years ago

You probably want to turn hinting off.

Hinting follows the Windows philosophy of moving the letters about so that they fit the pixel grid better. Apple tries to leave them where they would be on a fictional perfectly hi-res display (or printer) and applies anti-aliasing where it doesn't fit the grid.

The former is sharper but not true to the actual shapes, position and kerning of letters and words, the latter is considered blurry by some, though less so as the DPI increases to iPhone levels.

Compare these Windows, OS X and Ubuntu screenshots I found on the internet:

http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn...

From this article:

http://rewind.themasterplan.in/2007/07/15/sexy-smooth-fonts-...

rbanffy2• 17 years ago

Assumes my screen has the same RGB order and orientation as the Mac where the images are generated.

Unacceptable.

whimsy• 17 years ago

consistant->consistent

Textorize: Pristine Font rendering for the Web

Related Stories