The web has an underlining problem. This Bushwick designer has a fix - Technical.ly Brooklyn

Feb. 12, 2015 2:24 pm

The web has an underlining problem. This Bushwick designer has a fix

Wenting Zhang, a UX dev at Comedy Central by day, has a quixotic side project: she wants underlined text on the internet to look really good.
Wenting Zhang at a recent New York Tech Meetup.

Wenting Zhang at a recent New York Tech Meetup.

(Photo by QoolFoto, used with permission)

Have you ever wondered why italics and bold are so widely favored online over underlining?

We have, but we’d never taken our thinking beyond wondering. We’d never really thought about it, actually. We just noticed it. In our minds we say “Why?” but on the web that became “Why?” or maybe “Why?

One designer in Brooklyn, Wenting Zhang, has thought about this way more than us. She set out to figure out how to make underlining look really good on every website. Then she could turn it into a script that devs could use to fix their site’s underlining.

Zhang has documented all her work on GitHub. It’s called Underline.js. Zhang’s goal, however, is to get her rules for underlines adopted as standards by the W3C.

“The ultimate goal is to push the browser to do this perfect render by default, so that there would be no need to use my javascript library,” she told us, via email.

For now, you can use her code on your site and anywhere text calls for an underline, the line will be drawn at just the right distance from the bottom of your words, it will be just as thick as it should be and it will break for any bit of text that goes through it. It will be pixel perfect, with no annoying little half-tone shadows.

golden-ratio

Like this. (Image courtesy of Wenting Zhang)

Additionally, Zhang’s script allows a dev to make the lines interactive: see this live demo, with lines as guitar strings.

She spoke about it recently. It was the hack of the month at the New York Tech Meetup:

Advertisement

Zhang works by day at Comedy Central doing UX and animation coding. She’s been in New York since 2012. She started the project this past November after reading a detailed post on Medium and said that this was her first time working on an open source project. Getting feedback and suggestions from people on GitHub drove her to want to see it through.

Here are Zhang’s proposed rules:

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

You must appreciate accurate, relevant and productive community journalism.  Support this sort of work from professional reporters with seasoned editors.  Become a Technical.ly member for $12 per month -30-
CONTRIBUTE TO THE
JOURNALISM FUND

Already a contributor? Sign in here
Connect with companies from the Technical.ly community
New call-to-action

Advertisement

Sign-up for daily news updates from Technical.ly Brooklyn

Do NOT follow this link or you will be banned from the site!