Upgrade to Pro — share decks privately, control downloads, hide ads and more …

underline.js @ NY Tech Meetup

Ba124267a6514b82ecb1eeab8e7adfeb?s=47 Wenting Zhang
February 13, 2015

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


Wenting Zhang

February 13, 2015


  1. None
  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

  11. None
  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: