Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

underlineJS

Pushing the boundary of browser typography rendering!

Subscribe to updates I use underlineJS


Statistics on underlineJS

Number of watchers on Github 1954
Number of open issues 22
Average time to close an issue 5 days
Main language JavaScript
Average time to merge a PR about 1 hour
Open pull requests 3+
Closed pull requests 0+
Last commit about 5 years ago
Repo Created almost 6 years ago
Repo Last Updated over 2 years ago
Size 9.12 MB
Homepage http://underlinej...
Organization / Authorwentin
Contributors6
Page Updated
Do you use underlineJS? Leave a review!
View open issues (22)
View underlineJS activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating underlineJS for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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

underlineJS open issues Ask a question     (View All Issues)
  • over 4 years Status of project
  • almost 5 years Instructions?
  • about 5 years Line flickering and disappearing on Chrome 43 (Windows and MacOS)
  • over 5 years Demo doesn't recalculate on window.resize events, looks janky
  • over 5 years text-underline-width
  • over 5 years Bower?
  • over 5 years Bad rendering in firefox 35.0.1
  • almost 6 years a library to return ascender line, descender line and baseline posY
  • almost 6 years display:block element filltext position y offset issue
  • almost 6 years golden radio on the optimized distance
  • almost 6 years investigate html2canvas
  • almost 6 years explore SVG as an option
  • almost 6 years data viz option
  • almost 6 years find a way to calculate accurately of baseline, ascender/descender line's posy
  • almost 6 years roll back to default if browser not support
  • almost 6 years refresh the canvas when layout changes
  • almost 6 years When using "Qeicigndis" at h1
  • almost 6 years half pixel, retina display support
underlineJS open pull requests (View All Pulls)
  • Fix baselineRatio calculation when break-word word-wrap
  • Update README.md
  • accept ele color as underline color
underlineJS list of languages used
Other projects in JavaScript
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark