underline.js

A javascript library that sets out to do one simple job: draw the most perfect underline

A pixel-perfect javascript library for drawing text underline, or maybe even animate it, data-viz it, or more

The goal of this project is not to succeed, but fail.

If one day there is absolutely no one and no reason to use underline.jes, then it reaches its ultimate goal: to fail completely. Because that means the browser has supported this feature natively. That is what this project is about, to push the W3C further in a pixel-perfect, designer-friendly route.

Marcin Wichary's ideal underline:

• be able to change the width of the line (with additional half-pixel/retina support),
• be able to change the distance from the text,
• be able to change the color (even if just to simulate thinner width by using lighter grays instead of black),
• be able to clear the descenders,
• have a separate style for visited links.

In addition to these above, it should also

• have no ghost pixels

Image by Marcin Wichary

Progress Preview

Please click to see large picture. red is underline.js, green is browser default underline

The project is currently under dev. Contact me on twitter if you want to contribute!

Examples of approaches

• New Approach example, add single canvas for each dom element that has classname "underline"

http://wentin.github.io/underlineJS/

red is underline.js, green is browser default underline

• New New Approach example, use SVG instead of canvas, key is "mask"

http://wentin.github.io/underlineJS/svg-experiment.html/

• Old Approach example, add span and canvas to each word

http://wentin.github.io/underlineJS/article.html

Paragraph "What we’ve got …" text underline is canvas rendered!

Example designed by Wenting Zhang(me) in huffpost labs, article by Katelyn Bogucki from huffpostcode

Logs

Dec 2, 2014

• start proof of concept
• it now works on chrome/safari!

Dec 4, 2014

• add approach 2, one single canvas for each element.

Dec 9, 2014

• finish finding descenderline with svg/js
• start guitar string animation! Can you imagine this happen to your text underline! http://www.google.com/logos/2011/lespaul.html

To do list

• firefox bug

  • ctx.textBaseline="top”; render just like hanging

• detect and deal with line break word done

• make canvas width precise, 5px offset has to go done

• css like setting options.

• dynamic getting font styles done

  • maybe add font rendering styles and kern

• round posY to .5 px done

• underline stroke according to font stroke width done

• retina support for ghost free underline

##Contact

• Follow @DesignJokes on Twitter
• Email zhangwenting111@gmail.com
• Visit wentin.co