wentin / underlinejs

Pushing the boundary of browser typography rendering!

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
2. It has an optimized thin stroke-width. It is always 1/6 of width of the period mark.
3. It sits on the optimal Y position between the baseline and descender line, that optimal Y positon is the golden ratio point.
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.

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

• Follow @DesignJokes on Twitter
• Email [email protected]
• Visit wentin.co

underlinejs's Issues

npm package?

It would be nice if I could install this lib via npm.

user settings similar to css

animation option

Demo doesn't recalculate on window.resize events, looks janky

When using "Qeicigndis" at h1

Bower?

Hello!

This is a really interesting project. I'd love to be able to install this via Bower!

Cheers,
Dave

Bad rendering in firefox 35.0.1

display:block element filltext position y offset issue

refresh the canvas when layout changes

golden radio on the optimized distance

Status of project

Hey @wentin ! First off: excellent project, I have been looking for something like this for a long time.

I have delved a bit into the code and tried to adapt it to my needs. During the process I had a few thoughts I would very much like to discuss with you. I also took the liberty to implement some of the functionality mentioned. (See below)

I know it says in the README.md that you consider this lib to be primarily exploratory, but I think what with the browsers of today being the browsers they are (not that shitty anymore) and the CSS spec unfortunately still not including the kind of attributes you proposed, that this library could be more than just a proof-of-concept.

Here are a few things I would love to see implemented and which IMHO would make this lib really useable in a production environment.

• build process to build a UMD bundle which can be consumed by including it as an npm package (disclaimer: at the bottom of this post you will see that I already implemented this :) )
• add the possibility that underlines are not rendered in a canvas but as html elements which are absolutely positioned and have a left property corresponding to their position under the text (this kind of rendering doesn't allow for guitar string animation but may make other kinds of manipulation and customisation easier since the underlines are then stylable with CSS)
• some kind of cross browser testing to simplify development with CI
• make a build available without animation code (so animation is an opt-in choice) – I presume most use-cases don't need animation

So here are my changes in a nutshell (if you like I can open a pull request, you can see the commits here: https://github.com/mspae/underlineJS/commits/build-process):

• added a package.json file
• UMDified all files in js directory
• added browserify and gulp to compile a bundle file and added an express development server to preview the demo HTML file; this boils down to the following command for development: npm run dev (starts watch task for JS, runs express server serving the html file on localhost:3000 with livereloading (you need to install the browser addon and enable it to use livereloading))
• refactored a few util functions used by both single- and multiple-underline.js into separate files which are required in the correct places, namely optimal-stroke-width-pos.js, point.js, multiply-value.js
• removed the underline.js file which was responsible for calling either single- or multiple-underline.js functions on any element with the .underline class – instead I added an index.js which does that and exports an Underline constructor. it receives two parameters, the first is the element (either as a DOM-element or as a selector string), the second is an options object which extends the underlineStyles:

{
  color, // text-underline-color
  position, // text-underline-position
  skip, // text-underline-skip
  width, // text-underline-width
  animate // causes the animate function (which is a method of the Underline instance) to trigger
}

• Moved the instantiation code from underline.js into the inline JS in the demo HTML file
• Moved some audio animating code which was previously in underline.js into guitar-string.js
• Fixed some undefined variable errors which appeared because browserify compiles the code to use strict mode

Would love to hear what you think of this, Cheers!

when line break at "-"

roll back to default if browser not support

Instructions?

Could you be bothered to write some instructions on how to use this please?

Thanks

a library to return ascender line, descender line and baseline posY

explore SVG as an option

data viz option

Demo borked

The demo page shows, correctly, gaps in the underline on the underline.js heading (top-left) but the demo text itself does not exhibit the same behaviour.

Using latest Chrome browser on Windows.

find a way to calculate accurately of baseline, ascender/descender line's posy

font styles pass in as an object

Rendering issues in Firefox 53 on Windows 7

Hi Wentin,

I noticed very similar issues to the ones ionelmc posted (#22) just over two years ago in this list for FF 35.0.1: "Bad rendering in firefox 35.0.1 #22." While ionelmc said he was using win 8.1, I believe I'm currently on an Enterprise version of win 7. I'll attach a screenshot here using your layout as a render:

Earlier today I was first introduced to some of your great work by watching the Mustache CSS video you have on Youtube shown in an article on The dot Post:
Make CSS your secret super drawing tool

When I looked at underline.js earlier today on Firefox 53 for Mac OS X (El Capitan, [version 10.11]), it looked really great! I'm hopeful that a lot of this cross-browser stuff will subside, and am a bit encouraged by Microsoft withdrawing support for their older versions of IE recently.

Anyways, keep up the great work!

investigate html2canvas

half pixel, retina display support

underline goes wrong when document.width changed

When resize the width of Safari to the size of an iPhone, underlinejs.org Demo website looks abnormal.

line-height: 1.4 not whole number with px unit

Line flickering and disappearing on Chrome 43 (Windows and MacOS)

First of all, thanks for this nice experiment!

I've been playing with it, wanting to use it for a future project, but I realize now that the animation doesn't look nice on Chrome : the canvas line is blinking/flickering, and even disappearing sometimes.
I can see it on the demo page as well.

Everything work as expected on Firefox 39 and IE11 (Windows), and on Firefox 37 and Safari 6.1 (MacOS).

The thing is, I'm almost sure that it was working properly some months ago (in may), so maybe this is linked to a chrome update.
Have you had any feedback or discoveries on that point ?

text-underline-width

In your proposal for CSS4, it was unclear whether you were referring to width on the x or y axis. Since this is a long horizontal line, it is most likely talking about the y-axis.

That said, It would be helpful to have a way to specify left and right margin/padding so that the underline can be extended beyond the text, or start halfway under the first letter.

In the future, it might be worth considering adding a lot of other things that can be done to a rectangle like shadows and such.