5 ms·

Textorize: Pristine Font rendering for the Web

18 points by ams1 17y ago

adamhowell 17y ago
This won't generate much interest on HN, unfortunately, but this is pretty cool -- most especially the subpixel antialisasing.
there 17y ago
...using images, for OS X only.
- callmeed 17y ago
  Yeah, I don't really get the "for the web" in the title. I need pristine font rendering on my webserver
  - natrius 17y 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 17y 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 17y ago
  Nor do all LCDs have the same pixel arrangement.
zokier 17y 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 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.)
- moosecake 17y ago
  This is really just a design philosophy: http://damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x 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.
mquander 17y 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.
- Maro 17y 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!
  - tptacek 17y ago
    Content-free snark. You need OSX to generate the images. You obviously don't need OSX or Rails to use them.
    - Maro 17y ago
      I'd say it was a humorous (if a bit sarcastic) one-line summary of a post to save people time. Cheers!
- tptacek 17y 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.
moosecake 17y ago
"no text selection (IMHO a feature, not a bug)" How is that a feature?
- idm 17y 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 17y 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.
ZeroGravitas 17y 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.
- mquander 17y 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.
  - ZeroGravitas 17y 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/snapshot_fontwindows.png http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn... http://rewind.themasterplan.in/wp-content/uploads/2007/07/snapshot_fontosx.png http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn... http://rewind.themasterplan.in/wp-content/uploads/2007/07/snapshot_fontubuntu.png http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn... From this article: http://rewind.themasterplan.in/2007/07/15/sexy-smooth-fonts-on-kubuntu/ http://rewind.themasterplan.in/2007/07/15/sexy-smooth-fonts-...
rbanffy 17y ago
Assumes my screen has the same RGB order and orientation as the Mac where the images are generated. Unacceptable.
whimsy 17y ago
consistant->consistent

18 points by ams1 17y ago

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

there 17y ago

...using images, for OS X only.

callmeed 17y ago
Yeah, I don't really get the "for the web" in the title. I need pristine font rendering on my webserver
- natrius 17y 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 17y 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 17y ago
Nor do all LCDs have the same pixel arrangement.

zokier 17y 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 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.)

moosecake 17y ago
This is really just a design philosophy: http://damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x 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.

mquander 17y 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.

Maro 17y 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!
- tptacek 17y ago
  Content-free snark. You need OSX to generate the images. You obviously don't need OSX or Rails to use them.
  - Maro 17y ago
    I'd say it was a humorous (if a bit sarcastic) one-line summary of a post to save people time. Cheers!
tptacek 17y 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.

moosecake 17y ago

"no text selection (IMHO a feature, not a bug)" How is that a feature?

idm 17y 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 17y 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.

ZeroGravitas 17y 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.

mquander 17y 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.
- ZeroGravitas 17y 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/snapshot_fontwindows.png http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn... http://rewind.themasterplan.in/wp-content/uploads/2007/07/snapshot_fontosx.png http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn... http://rewind.themasterplan.in/wp-content/uploads/2007/07/snapshot_fontubuntu.png http://rewind.themasterplan.in/wp-content/uploads/2007/07/sn... From this article: http://rewind.themasterplan.in/2007/07/15/sexy-smooth-fonts-on-kubuntu/ http://rewind.themasterplan.in/2007/07/15/sexy-smooth-fonts-...

rbanffy 17y ago

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

whimsy 17y ago

consistant->consistent