Textorize is a Ruby library that allows for rendering text with subpixel antialiasing directly to PNG images using OS X's font rendering capabilities. It provides proper kerning and subpixel antialiasing, unlike other JavaScript-based solutions, but avoids the need for Flash, large JavaScript files, or font conversion. Textorize works directly from the command line and leverages installed system fonts.

1. Introducing
textorize
(squint to read)

2. exploit OS X font
rendering goodness
through Ruby

3. pristine font
rendering
for the web

4. CSS “font-face”
Flash-based replacement
JS-based replacement
Images

5. @font-face
nightmare,
license issues

6. sIFR 2 + 3 (beta)

7. sIFR 2 + 3 (beta)
needs flash

8. sIFR 2 + 3 (beta)
sluggish if
overused

9. sIFR 2 + 3 (beta)
fonts must be
converted

10. sIFR 2 + 3 (beta)
no subpixel AA

11. typeface.js, cufon.js

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

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

14. typeface.js, cufon.js
license issues

15. Photoshop
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”

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

17. Photoshop
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
artifacts on
curves

18. Photoshop
12pt Consolas, no AA
12pt Consolas, “sharp”
spacing
issues
12pt Consolas, “crisp”

19. Photoshop
12pt Consolas, no AA
12pt Consolas, “sharp”
12pt Consolas, “crisp”
no subpixel
AA

20. with Photoshop,
automation from
a CLI is difficult

21. ImageMagick
convert -­‐background white -­‐fill black -­‐font
Consolas.ttf -­‐pointsize 12 label:OMFGZ
omfgz.png

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

23. no
subpixel
AA
ImageMagick
convert -­‐background white -­‐fill black -­‐font
Consolas.ttf -­‐pointsize 12 label:OMFGZ
omfgz.png

24. ImageMagick
pixelsoup
convert -­‐background white -­‐fill black -­‐font
Consolas.ttf -­‐pointsize 12 label:OMFGZ
omfgz.png

25. (cc) Luís Flávio Loureiro dos Santos

26. (cc) Luís Flávio Loureiro dos Santos

27. © en:2004 David Remahl.

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

29. textorize
sub-pixel AA
textorize.rb -­‐f"Consolas" -­‐s12 "OMFGZ"

30. textorize
proper kerning
textorize.rb -­‐f"Consolas" -­‐s12 "OMFGZ"

31. textorize
CLI
uses installed
fonts

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. @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. bitmap =
NSBitmapImageRep.alloc.initWithFocusedViewRect
(@text_view.bounds)

35. @png = bitmap.representationUsingType_properties(NSPNGFileType, nil)
@png.writeToFile_atomically(file, true)

37. major annoyances (could be fixed)
needs background color (or no
subpixel AA)
no text selection (IMHO a feature,
not a bug)
not searchable

38. http://script.aculo.us/thomas
http://github.com/madrobby/textorize