Bringing Typography to the Web with sIFR 3 at <head>

10,502 views

Published on

Slides from my presentation on Web Typography and sIFR 3 at the <head> conference.

UPDATE: Something is broken in the notes I added, breaking all comments. Getting in touch with Slideshare to get that resolved. Screencasts can be found at http://files.11born.net/head08/

Published in: Technology, Education
92 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
10,502
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
0
Comments
92
Likes
9
Embeds 0
No embeds

No notes for slide

Bringing Typography to the Web with sIFR 3 at <head>

  1. Web Typography FTW With sIFR 3 <head> conference Oct 26, 2008 Mark Wubben supercollider.dk cc-by-sa-2.0
  2. Plan Web Typography Alternatives sIFR
  3. Questions!
  4. Yesterday (and Today)
  5. ~1997 IE 4 with proprietary EOT NS 4 with proprietary TrueDoc from Bitstream
  6. CSS Web Fonts Specified in CSS 2 Removed in CSS 2.1 Back in CSS 3, dormant since 2002
  7. Tomorrow?
  8. Jason Teague CSS 3 Web Fonts Module Safari 3.1 Supports Font Linking Soon Firefox 3.1, Opera 10
  9. Font Linking
  10. @font-face { font-family: quot;GraublauWebquot;; src: url(quot;/GraublauWeb-Regularquot;) format(quot;truetypequot;); }
  11. h1 { font-family: quot;GraublauWebquot;; }
  12. http://alistapart.com/d/cssatten/poen.html
  13. Font Linking Easy! But, large files Original files!
  14. Font Piracy?
  15. Unexpected Hero?
  16. EOT Different format Domain locking Subsetting Compression
  17. Obvious Villain?
  18. Text Replacement
  19. Images
  20. http://facelift.mawhorter.net
  21. Flash
  22. Image Replacement Font remains on server No Flash!
  23. Image Replacement Server-side code Images are static No real text
  24. Flash Replacement Font only for Flash export No server-side code Actual text Flash is dynamic
  25. Flash Replacement Flash… (Can be) CPU intensive Links suck Flash text isn’t browser text
  26. SVG Silverlight
  27. Questions So Far?
  28. scalable Inman Flash Replacement
  29. abriefmessage.com
  30. labs.iamkoa.net
  31. jasonsantamaria .com
  32. seedconference.com
  33. sIFR?!
  34. Spring 2004 Shaun Inman
  35. Inman Flash Replacement
  36. Summer ’04, scalable IFR
  37. Spring ’05, sIFR 2.0
  38. sIFR 3?
  39. Progressive Enhancement HTML JavaScript? Flash? Browser? sIFR!
  40. New Since 2.0
  41. Applying sIFR Site HTML? CSS JavaScript sIFR!
  42. Site
  43. Site HTML?
  44. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head>
  45. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head>
  46. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head>
  47. Site HTML? CSS
  48. .sIFR-active h1 { font-family: Verdana; line-height: 1em; visibility: hidden; /* Forces sIFR text to work nicely with floated image, at least in this scenario */ display: inline; }
  49. Site HTML? CSS
  50. Site HTML? CSS JavaScript
  51. var fgm = { src: 'franklin-gothic-medium.swf' }; sIFR.activate(fgm);
  52. sIFR.replace(fgm, { selector: 'h1', css: '.sIFR-root { color: #000000; } .head { color: #0068A3; }' });
  53. Site HTML? CSS JavaScript sIFR!
  54. Behind the Scenes
  55. Hyperlinks
  56. <h1><a href=quot;/quot;>Home</a></h1> sIFR.replace(rockwell, { selector: 'a' });
  57. <h1><a href=quot;/quot;>Home</a></h1> sIFR.replace(rockwell, { selector: 'h1' });
  58. <h1><span><a href=quot;/quot;>Home</a></span></h1> sIFR.replace(rockwell, { selector: 'span' });
  59. Questions So Far?
  60. Making sIFR Rock!
  61. Debugging
  62. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> <script type=quot;text/javascriptquot; src=quot;sifr-debug.jsquot;> </script> </head>
  63. Ratios
  64. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
  65. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
  66. sIFR.debug.ratios(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
  67. var rockwell = { src: 'rockwell.swf', ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25] }; sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
  68. Tuning
  69. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', tuneHeight: 8, tuneWidth: 1, offsetTop: 4, offsetLeft: 2 });
  70. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', fitExactly: true });
  71. Glyphs
  72. Glyphs Normal Bold Italic Italic & Bold
  73. Glyphs lowercase UPPERCASE !@#$%^&*(){} åæøéüîãàç
  74. Domain Binding
  75. class Options { public static function apply() { sIFR.domains = ['*.example.com', 'example.com']; } }
  76. var rockwell = { src: 'rockwell.swf' }; sIFR.domains = ['*.example.com', 'example.com']; sIFR.activate(rockwell);
  77. Next for sIFR
  78. Resources 11born.net/sifr3 11born.net/sifr3/wiki 11born.net/sifr3/forum 11born.net/sifr3/nightlies
  79. Thanks! 11born.net/head08
  80. Many thanks to these wonderful Flickr photographers: Jeremy Keith Ralph Aichinger antifluor Zara J Stig Nygaard Sharat Ganapati Rex Sorgatz Eduardo Arcos Ed Schipul Hashir Milhan Wolfgang Staudt Andrew Becherer Jesus Solana Jeff Kubina David Goehring Germán Meyer Lali Masriera

×