Textorize

Thomas Fuchs
Thomas FuchsJavaScript Guru at Slash7
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)
Textorize
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
1 of 38

Recommended

Computer image by
Computer imageComputer image
Computer imageM. Dastagir Ansari
318 views16 slides
Research, innovations, and engineering in animations, Graphics, and Virtual W... by
Research, innovations, and engineering in animations, Graphics, and Virtual W...Research, innovations, and engineering in animations, Graphics, and Virtual W...
Research, innovations, and engineering in animations, Graphics, and Virtual W...Suma Dawn
220 views44 slides
Bitmap Font (BMF) in Unity by Zulfa by
Bitmap Font (BMF) in Unity by ZulfaBitmap Font (BMF) in Unity by Zulfa
Bitmap Font (BMF) in Unity by ZulfaAgate Studio
743 views7 slides
Working With Graphics 1 by
Working With Graphics 1Working With Graphics 1
Working With Graphics 1JoLene Herzog
766 views15 slides
Presentation skills in it lecture 1 by
Presentation skills in it lecture 1Presentation skills in it lecture 1
Presentation skills in it lecture 1poleyseugenio
1.9K views14 slides
Lecture 3 file format by
Lecture 3 file formatLecture 3 file format
Lecture 3 file formatpoleyseugenio
577 views19 slides

More Related Content

Viewers also liked

Computer Systems Data Representation by
Computer Systems   Data RepresentationComputer Systems   Data Representation
Computer Systems Data Representationiarthur
6.2K views46 slides
Bitmap and vector by
Bitmap and vectorBitmap and vector
Bitmap and vectorhaverstockmedia
3.3K views9 slides
[1] Data Representation by
[1] Data Representation[1] Data Representation
[1] Data RepresentationMr McAlpine
8.8K views44 slides
Bitmap and Vector Images: Make Sure You Know the Differences by
Bitmap and Vector Images: Make Sure You Know the DifferencesBitmap and Vector Images: Make Sure You Know the Differences
Bitmap and Vector Images: Make Sure You Know the DifferencesDavina and Caroline
10.3K views26 slides
Intro to scan conversion by
Intro to scan conversionIntro to scan conversion
Intro to scan conversionMohd Arif
46.6K views7 slides
Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg... by
Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg...Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg...
Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg...Saikrishna Tanguturu
129.4K views50 slides

Viewers also liked(6)

Computer Systems Data Representation by iarthur
Computer Systems   Data RepresentationComputer Systems   Data Representation
Computer Systems Data Representation
iarthur6.2K views
[1] Data Representation by Mr McAlpine
[1] Data Representation[1] Data Representation
[1] Data Representation
Mr McAlpine8.8K views
Bitmap and Vector Images: Make Sure You Know the Differences by Davina and Caroline
Bitmap and Vector Images: Make Sure You Know the DifferencesBitmap and Vector Images: Make Sure You Know the Differences
Bitmap and Vector Images: Make Sure You Know the Differences
Davina and Caroline 10.3K views
Intro to scan conversion by Mohd Arif
Intro to scan conversionIntro to scan conversion
Intro to scan conversion
Mohd Arif46.6K views
Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg... by Saikrishna Tanguturu
Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg...Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg...
Computer Graphics - Bresenham's line drawing algorithm & Mid Point Circle alg...
Saikrishna Tanguturu129.4K views

Similar to Textorize

Skia & Freetype - Android 2D Graphics Essentials by
Skia & Freetype - Android 2D Graphics EssentialsSkia & Freetype - Android 2D Graphics Essentials
Skia & Freetype - Android 2D Graphics EssentialsKyungmin Lee
12.8K views25 slides
Low-level Shader Optimization for Next-Gen and DX11 by Emil Persson by
Low-level Shader Optimization for Next-Gen and DX11 by Emil PerssonLow-level Shader Optimization for Next-Gen and DX11 by Emil Persson
Low-level Shader Optimization for Next-Gen and DX11 by Emil PerssonAMD Developer Central
19.8K views57 slides
Plugins by tagomoris #fluentdcasual by
Plugins by tagomoris #fluentdcasualPlugins by tagomoris #fluentdcasual
Plugins by tagomoris #fluentdcasualSATOSHI TAGOMORI
3.2K views30 slides
Dsp file by
Dsp fileDsp file
Dsp fileSourabh Bhattacharya
1K views23 slides
Scalaz Stream: Rebirth by
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: RebirthJohn De Goes
2.5K views119 slides
Scalaz Stream: Rebirth by
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: RebirthJohn De Goes
2K views119 slides

Similar to Textorize(20)

Skia & Freetype - Android 2D Graphics Essentials by Kyungmin Lee
Skia & Freetype - Android 2D Graphics EssentialsSkia & Freetype - Android 2D Graphics Essentials
Skia & Freetype - Android 2D Graphics Essentials
Kyungmin Lee12.8K views
Low-level Shader Optimization for Next-Gen and DX11 by Emil Persson by AMD Developer Central
Low-level Shader Optimization for Next-Gen and DX11 by Emil PerssonLow-level Shader Optimization for Next-Gen and DX11 by Emil Persson
Low-level Shader Optimization for Next-Gen and DX11 by Emil Persson
Plugins by tagomoris #fluentdcasual by SATOSHI TAGOMORI
Plugins by tagomoris #fluentdcasualPlugins by tagomoris #fluentdcasual
Plugins by tagomoris #fluentdcasual
SATOSHI TAGOMORI3.2K views
Scalaz Stream: Rebirth by John De Goes
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: Rebirth
John De Goes2.5K views
Ruby on Rails 3.1: Let's bring the fun back into web programing by Bozhidar Batsov
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programing
Bozhidar Batsov934 views
Wp7 performance challenges by Gergely Orosz
Wp7 performance challengesWp7 performance challenges
Wp7 performance challenges
Gergely Orosz563 views
Com 135 final project user manual by biasimistfur1984
Com 135 final project user manualCom 135 final project user manual
Com 135 final project user manual
biasimistfur19842.3K views
PHP applications/environments monitoring: APM & Pinba by Patrick Allaert
PHP applications/environments monitoring: APM & PinbaPHP applications/environments monitoring: APM & Pinba
PHP applications/environments monitoring: APM & Pinba
Patrick Allaert3.9K views
Scala lens: An introduction by Knoldus Inc.
Scala lens: An introductionScala lens: An introduction
Scala lens: An introduction
Knoldus Inc.5.9K views
A Graphical Way of Thinking About React Designs by olafnouvortne
A Graphical Way of Thinking About React DesignsA Graphical Way of Thinking About React Designs
A Graphical Way of Thinking About React Designs
olafnouvortne157 views
PIL - A Platform Independent Language by zefhemel
PIL - A Platform Independent LanguagePIL - A Platform Independent Language
PIL - A Platform Independent Language
zefhemel2K views
Hierarchical free monads and software design in fp by Alexander Granin
Hierarchical free monads and software design in fpHierarchical free monads and software design in fp
Hierarchical free monads and software design in fp
Alexander Granin161 views
Security benefits of the Nitro architecture - SEP401-R - AWS re:Inforce 2019 by Amazon Web Services
Security benefits of the Nitro architecture - SEP401-R - AWS re:Inforce 2019 Security benefits of the Nitro architecture - SEP401-R - AWS re:Inforce 2019
Security benefits of the Nitro architecture - SEP401-R - AWS re:Inforce 2019
Amazon Web Services6.1K views
(1) c sharp introduction_basics_dot_net by Nico Ludwig
(1) c sharp introduction_basics_dot_net(1) c sharp introduction_basics_dot_net
(1) c sharp introduction_basics_dot_net
Nico Ludwig243 views
Eric Lafortune - The Jack and Jill build system by GuardSquare
Eric Lafortune - The Jack and Jill build systemEric Lafortune - The Jack and Jill build system
Eric Lafortune - The Jack and Jill build system
GuardSquare 2.2K views

More from Thomas Fuchs

Zepto and the rise of the JavaScript Micro-Frameworks by
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksThomas Fuchs
21.4K views87 slides
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K by
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs
13.6K views39 slides
I Can't Believe It's Not Flash by
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
25K views48 slides
Prototype & Scriptaculous by
Prototype  & ScriptaculousPrototype  & Scriptaculous
Prototype & ScriptaculousThomas Fuchs
984 views63 slides
Extreme JavaScript Performance by
Extreme JavaScript PerformanceExtreme JavaScript Performance
Extreme JavaScript PerformanceThomas Fuchs
64K views105 slides
Adventures In JavaScript Testing by
Adventures In JavaScript TestingAdventures In JavaScript Testing
Adventures In JavaScript TestingThomas Fuchs
1.5K views62 slides

More from Thomas Fuchs(9)

Zepto and the rise of the JavaScript Micro-Frameworks by Thomas Fuchs
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-Frameworks
Thomas Fuchs21.4K views
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K by Thomas Fuchs
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs13.6K views
I Can't Believe It's Not Flash by Thomas Fuchs
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs25K views
Prototype & Scriptaculous by Thomas Fuchs
Prototype  & ScriptaculousPrototype  & Scriptaculous
Prototype & Scriptaculous
Thomas Fuchs984 views
Extreme JavaScript Performance by Thomas Fuchs
Extreme JavaScript PerformanceExtreme JavaScript Performance
Extreme JavaScript Performance
Thomas Fuchs64K views
Adventures In JavaScript Testing by Thomas Fuchs
Adventures In JavaScript TestingAdventures In JavaScript Testing
Adventures In JavaScript Testing
Thomas Fuchs1.5K views
Ruby On Rails Introduction by Thomas Fuchs
Ruby On Rails IntroductionRuby On Rails Introduction
Ruby On Rails Introduction
Thomas Fuchs57K views
Rich and Snappy Apps (No Scaling Required) by Thomas Fuchs
Rich and Snappy Apps (No Scaling Required)Rich and Snappy Apps (No Scaling Required)
Rich and Snappy Apps (No Scaling Required)
Thomas Fuchs7K views

Recently uploaded

Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...ShapeBlue
86 views25 slides
MVP and prioritization.pdf by
MVP and prioritization.pdfMVP and prioritization.pdf
MVP and prioritization.pdfrahuldharwal141
39 views8 slides
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...ShapeBlue
121 views15 slides
State of the Union - Rohit Yadav - Apache CloudStack by
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStackShapeBlue
218 views53 slides
Business Analyst Series 2023 - Week 4 Session 7 by
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7DianaGray10
110 views31 slides
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... by
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...ShapeBlue
48 views17 slides

Recently uploaded(20)

Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue86 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue121 views
State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue218 views
Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 7Business Analyst Series 2023 -  Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray10110 views
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... by ShapeBlue
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
ShapeBlue48 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Future of AR - Facebook Presentation by Rob McCarty
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
Rob McCarty54 views
The Power of Heat Decarbonisation Plans in the Built Environment by IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE67 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software373 views
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by ShapeBlue
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
ShapeBlue97 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue110 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue74 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue191 views
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by ShapeBlue
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
ShapeBlue120 views
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue114 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue56 views
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
ShapeBlue134 views
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue113 views

Textorize