textorize
DESCRIPTION
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.TRANSCRIPT
![Page 1: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/1.jpg)
Introducing
textorize(squint to read)
![Page 2: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/2.jpg)
exploit OS X font rendering goodness
through Ruby
![Page 3: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/3.jpg)
pristine font rendering
for the web
![Page 4: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/4.jpg)
CSS “font-face”
Flash-based replacement
JS-based replacement
Images
![Page 5: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/5.jpg)
@font-face
nightmare,license issues
![Page 6: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/6.jpg)
sIFR 2 + 3 (beta)
![Page 7: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/7.jpg)
sIFR 2 + 3 (beta)
needs flash
![Page 8: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/8.jpg)
sIFR 2 + 3 (beta)
sluggish if overused
![Page 9: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/9.jpg)
sIFR 2 + 3 (beta)
fonts must be converted
![Page 10: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/10.jpg)
sIFR 2 + 3 (beta)
no subpixel AA
![Page 11: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/11.jpg)
typeface.js, cufon.js
![Page 12: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/12.jpg)
typeface.js, cufon.js
no subpixel AA
![Page 13: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/13.jpg)
typeface.js, cufon.js
complicated font conversion, large .js files
![Page 14: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/14.jpg)
typeface.js, cufon.js
license issues
![Page 15: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/15.jpg)
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
Photoshop
![Page 16: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/16.jpg)
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
Photoshopmodern fonts
can’t handle no AA
![Page 17: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/17.jpg)
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
Photoshop
artifacts on curves
![Page 18: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/18.jpg)
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
Photoshop
spacing issues
![Page 19: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/19.jpg)
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
Photoshop
no subpixel AA
![Page 20: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/20.jpg)
with Photoshop,automation from a CLI is difficult
![Page 21: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/21.jpg)
ImageMagick
convert -‐background white -‐fill black -‐font Consolas.ttf -‐pointsize 12 label:OMFGZ
omfgz.png
![Page 22: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/22.jpg)
ImageMagick
convert -‐background white -‐fill black -‐font Consolas.ttf -‐pointsize 12 label:OMFGZ
omfgz.png
letter spacing
fail
![Page 23: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/23.jpg)
ImageMagick
convert -‐background white -‐fill black -‐font Consolas.ttf -‐pointsize 12 label:OMFGZ
omfgz.png
nosubpixel
AA
![Page 24: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/24.jpg)
ImageMagick
convert -‐background white -‐fill black -‐font Consolas.ttf -‐pointsize 12 label:OMFGZ
omfgz.png
pixelsoup
![Page 25: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/25.jpg)
(cc) Luís Flávio Loureiro dos Santos
![Page 26: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/26.jpg)
(cc) Luís Flávio Loureiro dos Santos
![Page 27: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/27.jpg)
© en:2004 David Remahl.
![Page 28: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/28.jpg)
textorize
textorize.rb -‐f"Consolas" -‐s12 "OMFGZ"
![Page 29: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/29.jpg)
textorize
textorize.rb -‐f"Consolas" -‐s12 "OMFGZ"
sub-pixel AA
![Page 30: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/30.jpg)
textorize
textorize.rb -‐f"Consolas" -‐s12 "OMFGZ"
proper kerning
![Page 31: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/31.jpg)
textorize
CLIuses installed
fonts
![Page 32: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/32.jpg)
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
![Page 33: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/33.jpg)
@text_view = NSTextView.alloc.initWithFrame([0,0,1000,100]) set_attribs optionswindow.setContentView @text_view@text_view.setString string@text_view.sizeToFit window.displaywindow.orderFrontRegardless
![Page 34: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/34.jpg)
bitmap = NSBitmapImageRep.alloc.initWithFocusedViewRect(@text_view.bounds)
![Page 35: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/35.jpg)
@png = bitmap.representationUsingType_properties(NSPNGFileType, nil)@png.writeToFile_atomically(file, true)
![Page 36: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/36.jpg)
![Page 37: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/37.jpg)
major annoyances (could be fixed)
needs background color (or no subpixel AA)
no text selection (IMHO a feature, not a bug)
not searchable
![Page 38: Textorize](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b78e364a7959d7418b45bb/html5/thumbnails/38.jpg)
http://script.aculo.us/thomas
http://github.com/madrobby/textorize