Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Type on the Web Dr. Theodore E. Harrison President, Fontlab Ltd. Early web typography Wasn’t really typography at all. You had no choice of fonts and few options for placement. Mostly black text on gray backgrounds. Then along came the graphical browser, and at the same time an explosion of fonts. But there were still problems. Web Typography Problems Very limited font choices -WYSINWTG Very limited color choices No grayscale No transparency/translucency Early solutions Netscape - Dynamic fonts Bitstream - Font Player Microsoft - WEFT All failed because… Proprietary Browser specific Platform specific Required user action ?New Solutions? Microsoft Photofonts/Fl Embedded ashfonts - use OpenType the Flash (EOT) - an plugin to addition to display HTML “flashed” allowing fonts fonts. to be embedded in web pages. CSS font styles - use the CSS to specify external fonts. Microsoft EOT New life for an old technology - used in Internet Explorer for ten years EOT technology OpenType or TrueType fonts compressed with Microtype Express compression EOT advantages Uses standard TT/OT fonts Uses simple HTML tags &CSS Infinite scalability EOT disadvantages No multicolor text - same limited color palette No grayscale No transparency/translucency No Type 1 compatibility Requires W3C approval and adoption by all browsers Cascading Style Sheet spec Championed by Håkon Wium Lie of Opera and probably the simplest proposal CSS technology Just add a new feature to CSS @font-face { font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype");} h1 { font-family: "Kimberley", sansserif } CSS Advantages Uses standard TrueType fonts Simple CSS specification CSS Disadvantages TrueType centric No compression => big files No multi-color No grayscale No transparency/translucency Requires W3C approval and adoption by all browsers Fonts with pizzazz! Photofont structure Open standard ASCII files XML data structure PNG graphics Details at www.photofont.com XML structure <?xml version="1.0" ?> <PhF version="1.0"> Header Encoding Metrics Glyphs <header> ...etc </header> <globals> ...etc </globals> <glyphs> ...etc </glyphs> <data> ...etc </data> </PhF> Photofont header <header> <version type="string"></version> <family type="string">AGBlue</family> <full_name type="string">AGBlue</full_name> <codepage type="string">MacOS Roman</codepage> <ascender type="int">34</ascender> <descender type="int">9</descender> <upm type="int">36</upm> </header> Encoding <globals> <unicode_mapping type="array" subtype="map_unicode"> <map id="A" unc="65" /> <map id="B" unc="66" /> <map id="C" unc="67" /> ...etc ...etc <map id="zero" unc="48" /> </unicode_mapping> Photofont kerning <kerning type="array" subtype="kerning_pair"> <pair left="glyph_id" [ left_image="image_id" ] right="glyph_id" [ right_image="image_id" ] [ x="x_offset" ] [ y="y_offset" ] /> ...etc. </kerning> Photofont glyphs <glyphs> <glyph id="A"> <image id="v0" type="photo"> <shape embedded="Image32"> <ppm int="36" /> <bbox x="0" y="-1" width="27" height="28" /> <base x="0" y="27" /> <delta x="26" y="0" /> </shape> </image> </glyph> ...etc <glyph id="asciitilde"> <image id="v0" type="photo"> <shape embedded="Image93"> <ppm int="36" /> <bbox x="2" y="10" width="18" height="6" /> <base x="-2" y="16" /> <delta x="22" y="0" /> </shape> </image> </glyph> </glyphs> Photofont examples Flames Trees Photofont examples Real photos Photofont examples Decorative initial caps How to use photofonts Photoshop InDesign Quark Xpress Dreamweaver Photofont advantages Multicolor/gradient/texture Grayscale Transparency/translucency TT/OT/T1 compatibility No W3C approval or browser modifications necessary Photofont disadvantages Not a standard font format (yet) Requires plugins for use Big files Limited scalability No multiline text (yet) How to make a photofont Manually with paint program and text editor, or Use BitFonter Photofonts on the web Solving the web typography problem The web problem: How to get multicolor, translucent, and/or a specific typeface on to a web page… Without sacrificing indexability, copiability, searchability, spellcheckability, etc. sIFR to the rescue Scalable Inman Flash Replacement Evolution of sIFR 2003 - Shaun Inman creates IFR 2004 - Mike Davidson and Mark Wubben develop v2 for ESPN - sIFR 2005 - adoption on major websites: Nike, ABC, NYTimes, Aston Martin, etc. 2007 - v3 imminent How sIFR works Convert a TrueType font into a Flash font CSS contains a style for replacement Javascript parses HTML for tags Replaces text within tags by Flash font 2007 - Photofonts merge with sIFR Using Flash technology to overcome the limitations of HTML How Flash Photofonts work Convert photofont into Flash font Create CSS style Create replacement javascript Add all to web page Same as sIFR thereafter Photofont WebReady Our first Flash photofont application WebReady Creates a Flash font from OT/TT/T1 or photofonts Creates a CSS for a web page Creates the javascript for a web page Uploads it all to the server and places it correctly Future Plans Dreamweaver plugin December target release date Will allow Dreamweaver users to use photofonts directly in their web page design Thank you! Any Questions?