Introducing
textorize
   (squint to read)
exploit OS X font
rendering goodness
   through Ruby
pristine font
 rendering
for the web
CSS “font-face”
Flash-based replacement
JS-based replacement
Images
@font-face




  nightmare,
license issues
sIFR 2 + 3 (beta)
sIFR 2 + 3 (beta)




  needs flash
sIFR 2 + 3 (beta)




   sluggish if
    overused
sIFR 2 + 3 (beta)




 fonts must be
   converted
sIFR 2 + 3 (beta)




no subpixel AA
typeface.js, cufon.js
typeface.js, cufon.js




             no subpixel AA
typeface.js, cufon.js




   complicated font
conversion, large .js files
typeface.js, cufon.js




   license issues
Photoshop



      12pt Consolas, no AA



      12pt Consolas, “sharp”



      12pt Consolas, “crisp”
modern fonts
can’t handle no Photoshop
       AA

                     12pt Consolas, no AA



                     12pt C...
Photoshop



      12pt Consolas, no AA



      12pt Consolas, “sharp”



      12pt Consolas, “crisp”
       artifacts o...
Photoshop



      12pt Consolas, no AA



      12pt Consolas, “sharp”
         spacing
          issues
      12pt Conso...
Photoshop



      12pt Consolas, no AA



      12pt Consolas, “sharp”



      12pt Consolas, “crisp”

                n...
with Photoshop,
automation from
 a CLI is difficult
ImageMagick




convert  -­‐background  white  -­‐fill  black  -­‐font  
   Consolas.ttf  -­‐pointsize  12  label:OMFGZ  
...
letter
                   ImageMagick            spacing
                                            fail




convert  -­‐...
no
subpixel
  AA
                   ImageMagick




convert  -­‐background  white  -­‐fill  black  -­‐font  
   Consolas.t...
ImageMagick

                                             pixelsoup




convert  -­‐background  white  -­‐fill  black  -­‐...
(cc) Luís Flávio Loureiro dos Santos
(cc) Luís Flávio Loureiro dos Santos
© en:2004 David Remahl.
textorize




textorize.rb  -­‐f"Consolas"  -­‐s12  "OMFGZ"
textorize




                  sub-pixel AA

textorize.rb  -­‐f"Consolas"  -­‐s12  "OMFGZ"
textorize




  proper kerning

textorize.rb  -­‐f"Consolas"  -­‐s12  "OMFGZ"
textorize




     CLI
uses installed
    fonts
require  'osx/cocoa'

module  Textorize
    class  Runner
        
        def  initialize(string,  output,  options)
    ...
@text_view  =  NSTextView.alloc.initWithFrame([0,0,1000,100])
            
set_attribs  options
window.setContentView  @te...
bitmap  =  
NSBitmapImageRep.alloc.initWithFocusedViewRect
(@text_view.bounds)
@png  =  bitmap.representationUsingType_properties(NSPNGFileType,  nil)
@png.writeToFile_atomically(file,  true)
major annoyances (could be fixed)


 needs background color (or no
         subpixel AA)

no text selection (IMHO a featur...
http://script.aculo.us/thomas

http://github.com/madrobby/textorize
Textorize
Upcoming SlideShare
Loading in...5
×

Textorize

24,868

Published on

Textorize is a OSX-only command line tool to generate subpixel antialiased PNGs for really awesome looking web font graphics.

For more information, see http://mir.aculo.us/2009/09/29/textorize-pristine-font-rendering-for-the-web/

This presentation was given at the Central European Ruby Camp in Vienna on September 26, 2009.

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
24,868
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
31
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Textorize

  1. 1. Introducing textorize (squint to read)
  2. 2. exploit OS X font rendering goodness through Ruby
  3. 3. pristine font rendering for the web
  4. 4. CSS “font-face” Flash-based replacement JS-based replacement Images
  5. 5. @font-face nightmare, license issues
  6. 6. sIFR 2 + 3 (beta)
  7. 7. sIFR 2 + 3 (beta) needs flash
  8. 8. sIFR 2 + 3 (beta) sluggish if overused
  9. 9. sIFR 2 + 3 (beta) fonts must be converted
  10. 10. sIFR 2 + 3 (beta) no subpixel AA
  11. 11. typeface.js, cufon.js
  12. 12. typeface.js, cufon.js no subpixel AA
  13. 13. typeface.js, cufon.js complicated font conversion, large .js files
  14. 14. typeface.js, cufon.js license issues
  15. 15. Photoshop 12pt Consolas, no AA 12pt Consolas, “sharp” 12pt Consolas, “crisp”
  16. 16. modern fonts can’t handle no Photoshop AA 12pt Consolas, no AA 12pt Consolas, “sharp” 12pt Consolas, “crisp”
  17. 17. Photoshop 12pt Consolas, no AA 12pt Consolas, “sharp” 12pt Consolas, “crisp” artifacts on curves
  18. 18. Photoshop 12pt Consolas, no AA 12pt Consolas, “sharp” spacing issues 12pt Consolas, “crisp”
  19. 19. Photoshop 12pt Consolas, no AA 12pt Consolas, “sharp” 12pt Consolas, “crisp” no subpixel AA
  20. 20. with Photoshop, automation from a CLI is difficult
  21. 21. ImageMagick convert  -­‐background  white  -­‐fill  black  -­‐font   Consolas.ttf  -­‐pointsize  12  label:OMFGZ   omfgz.png
  22. 22. letter ImageMagick spacing fail convert  -­‐background  white  -­‐fill  black  -­‐font   Consolas.ttf  -­‐pointsize  12  label:OMFGZ   omfgz.png
  23. 23. no subpixel AA ImageMagick convert  -­‐background  white  -­‐fill  black  -­‐font   Consolas.ttf  -­‐pointsize  12  label:OMFGZ   omfgz.png
  24. 24. ImageMagick pixelsoup convert  -­‐background  white  -­‐fill  black  -­‐font   Consolas.ttf  -­‐pointsize  12  label:OMFGZ   omfgz.png
  25. 25. (cc) Luís Flávio Loureiro dos Santos
  26. 26. (cc) Luís Flávio Loureiro dos Santos
  27. 27. © en:2004 David Remahl.
  28. 28. textorize textorize.rb  -­‐f"Consolas"  -­‐s12  "OMFGZ"
  29. 29. textorize sub-pixel AA textorize.rb  -­‐f"Consolas"  -­‐s12  "OMFGZ"
  30. 30. textorize proper kerning textorize.rb  -­‐f"Consolas"  -­‐s12  "OMFGZ"
  31. 31. textorize CLI uses installed fonts
  32. 32. require  'osx/cocoa' module  Textorize    class  Runner                def  initialize(string,  output,  options)            app  =  OSX::NSApplication.sharedApplication                        delegate  =  RunnerApplication.alloc.init            delegate.options  =  options            delegate.string  =  string            delegate.output  =  output                        app.setDelegate  delegate            app.run        end            end    class  RunnerApplication  <  OSX::NSObject        include  OSX        attr_accessor  :options        attr_accessor  :string        attr_accessor  :output        def  initialize            @window  =  NSWindow.alloc.initWithContentRect_styleMask_backing_defer([150,  1500,  1000,  500],  NSBorderlessWindowMask,  2,  0)        end                def  applicationDidFinishLaunching(notification)            renderer  =  Renderer.new(@window,  @string,  @options)            Saver.new(renderer).write_to_file(@output)            NSApplication.sharedApplication.terminate(nil)        end            end end
  33. 33. @text_view  =  NSTextView.alloc.initWithFrame([0,0,1000,100])             set_attribs  options window.setContentView  @text_view @text_view.setString  string @text_view.sizeToFit             window.display window.orderFrontRegardless
  34. 34. bitmap  =   NSBitmapImageRep.alloc.initWithFocusedViewRect (@text_view.bounds)
  35. 35. @png  =  bitmap.representationUsingType_properties(NSPNGFileType,  nil) @png.writeToFile_atomically(file,  true)
  36. 36. major annoyances (could be fixed) needs background color (or no subpixel AA) no text selection (IMHO a feature, not a bug) not searchable
  37. 37. http://script.aculo.us/thomas http://github.com/madrobby/textorize
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×