A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline
npm install @palindrom615/underlinejsA javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline
http://wentin.github.io/underlineJS/
The project is currently under development.
If you have 8 minutes and want to know what is the story behind creating underline.js, you can hear all about it in this NY Tech Meetup presentation video
Underline.js has following features:
1. It doesn't have ghost pixels. It is not just pixel perfect, but also pixel perfect on half pixel level for retina display
!pixel-perfect
2. It has an optimized thin stroke-width. It is always 1/6 of width of the period mark.
!optimal-stroke-width
3. It sits on the optimal Y position between the baseline and descender line, that optimal Y positon is the golden ratio point.
!golden-ratio
4. It has holes around descenders. Completely respect the type's shape. If you ask, the size of the holes are also optimized to the perfection.
!descender-holes
Underline.js is not designed to be the most useful javascript library. It is more exploratory, and it is trying to push the boundary of web typography. I want to propose these new css rules to W3C for css4 edition:
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
Marcin Wichary's article on crafting Medium.com's underline
codrops collectiveunheap.comcoliss.comspeckyboy.comcssauthor.combeautifulopen.comfreebiesbug.comjquery-plugins.net
Note: underline.js doesn't have dependency on jquerydesignsrazzi.comcodegeekz.combashooka.comninodezign.comhongkiat.comdecodering.comipixel.com.sgfreede.rugaetanpautler.comdesignmeltdown.comhtml5cn.orgsplashnology.comdevelopersfeed.comParsons Alumni newsbashooka.comhabrahabr.rusoftpedia.comlafermeduweb.netwykop.plsumy.uaus8pr-cy.rutakana8.tumblr.comaltervista.org
###Contact
* Follow @DesignJokes on Twitter
* Email
* Visit wentin.co