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 Consolas, “sharp”
12pt Consolas, “crisp”

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

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

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

with Photoshop,
automation from
a CLI is difficult

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

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

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

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

(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)
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

@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

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 feature,
not a bug)
not searchable

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