A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline
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.
http://wentin.github.io/underlineJS/
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 be part of this project!
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
- start proof of concept
- it now works on chrome/safari!
- add approach 2, one single canvas for each element.
- finish finding descenderline with svg/js
- finish String class to draw underline with guitar string animation, not merged yet.
- start guitar string animation! Can you imagine this happen to your text underline! http://wentin.github.io/underlineJS/stringAnimation/
-
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