underline.js @ NY Tech Meetup

underline.js: A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline

Transcript

2.     
   
      
    Safari Firefox Chrome IE 11 text-decoration: underline
3. An early sample of one of first Roman typefaces, designed by Nicholas Jenson, published in 1475.
4. ligature drop cap type setting kerning kerning underline
5. Type designer Matthew Carter showed us what the earliest digital type looked like
6. Safari Firefox Chrome IE 11 Why is it not perfect?
7. ghost pixel no ghost pixel
8. too thick 6px
9. too close to the text baseline
10. destruct the shape
12. 2px @1x 0.5px @1x 2px @2x 0.5px @2x No ghost pixels. Pixel perfect on half pixel level for retina display
13. 12/6 = 2px 2px width: 12px 12px Optimal stroke-width. 1/6 of width of the period mark
14. 0.6180339887 Optimal Y positon is the golden ratio point between the baseline and descender line
15. Has holes around descenders, completely respect the type's shape
16. text-underline-color: #000000; // auto means the same color as the text color, or hex value text-underline-position: auto; // could be ratio or px or auto text-underline-skip: true; // true to set holes around descenders, false to turn it off text-underline-width: auto; // could be auto or px or ratio text-underline-animation: true // true or false, this one is only for underline.js Propose these new css rules to W3C for css4 edition: