underlineJS

Pushing the boundary of browser typography rendering!

wentin
2222
80
JavaScript

underline.js

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

Demo

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

Features

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

CSS4 Proposal to W3C

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

Reference

Marcin Wichary’s article on crafting Medium.com’s underline

Mentions (thank you!)

Tweets

technical.ly article

codrops collective
unheap.com
coliss.com
speckyboy.com
cssauthor.com
beautifulopen.com
freebiesbug.com
jquery-plugins.net
Note: underline.js doesn’t have dependency on jquery
designsrazzi.com
codegeekz.com
bashooka.com
ninodezign.com
hongkiat.com
decodering.com
ipixel.com.sg
freede.ru
gaetanpautler.com
designmeltdown.com
html5cn.org
splashnology.com
developersfeed.com
Parsons Alumni news
bashooka.com
habrahabr.ru
softpedia.com
lafermeduweb.net
wykop.pl
sumy.ua
us8
pr-cy.ru
takana8.tumblr.com
altervista.org

###Contact