7 ms·

Show HN: Kerning.js — Take control of your web typography

154 points by endtwist 15y ago

paulirish 15y ago
Nice work. I like how it all stays declarative in the CSS too. I would recommend outsourcing your parsing though. It's a tough job and things like CSS hacks can really take your regexes for a loop. I'd recommend trying out http://glazman.org/JSCSSP/ http://glazman.org/JSCSSP/ or https://github.com/nzakas/parser-lib/tree/master/src/css https://github.com/nzakas/parser-lib/tree/master/src/css which Nicholas uses for CSSLint.
- endtwist 15y ago
  I evaluated JSCSSP (didn't know about Parser-lib), but was trying to keep the file size down to a minimum. Though perhaps not the most robust, the library I'm using now (http://bililite.com/blog/2009/01/16/jquery-css-parser/ http://bililite.com/blog/2009/01/16/jquery-css-parser/) seems to work fine with all of what I've thrown at it. It is also, by far, the smallest of the three CSS parsing libraries (14kb vs JSCSSP's 165kb).
saurik 15y ago
This library is misusing vendor prefixes :(... -webkit-* should be an area for WebKit to define custom CSS property, not for this library to tag things "only if using WebKit". If WebKit eventually decides to experiment with a word-color CSS property this is just going to cause problems. Instead, to fit with the standard way people define CSS properties, this library should be taking a prefix for itself, like -kerning-*, and then defining any of its extensions to CSS within that namespace: that way it is almost guaranteed to not cause problems going forward.
audionerd 15y ago
How does this differ from http://www.kernjs.com/ http://www.kernjs.com/ ?
- dangrossman 15y ago
  How are they similar? That link goes to a bookmarklet that lets you drag letters apart to produce a stylesheet adding extra margins to those letters. This story's link goes to a JavaScript library that provides a dozen new CSS rules for selecting and transforming words and letter spacing, rotation, color...
  - lean 15y ago
    In this way "kerning.js" doesn't seem to be the most descriptive name for this project. Everything but the first example is not related to kerning, just typography. My first thought, when I read the title of this post, was "but we already have kernjs..."
socratic 15y ago
Do people use things like this? I recently read Robert Bringhurst's excellent Elements of Typographic Style, but have no idea how to apply it to the web. (There is an effort to translate the work at webtypography.net, but frankly, most of the sections are some equivalent of "you should do X, but X is not possible right now, but maybe with some CSS extension in the future X will be possible.") It seems like maybe we have choice of fonts now (through TypeKit, Google Web Fonts). But kerning and justification seem to be mostly accomplished through these sorts of JavaScript hacks, and text figures seem outright impossible. What is a wannabe typographer supposed to do on the web with current tools? Are lettering.js, kerning.js, kern.js, linebreak.js and similar usable or just experiments? More generally, what does the current web typographer's toolbox look like at the moment?
- voidfiles 15y ago
  Don't use this for anything more then a playful lib. It's fun, and it's helpful for defining what browsers might want to do in the future, but its a toy, like a fisher price hammer.
  - endtwist 15y ago
    Actually, there's no reason you can't use this on a real site. Sure, you don't want to use it on a long block of text, but it's great for headers and short copy. It doesn't break anything and the "fallback" if it doesn't work is just unkerned copy.
    - voidfiles 15y ago
      Yea, but there is flash of un-styled content. There is no way around it because the style has to be applied by the javascript. That is not production ready in my opinion. The way standards bodies work now though I think this a great way to demo what browsers should be able to do.
      - endtwist 15y ago
        I should note this in the documentation, but if you add "visibility: hidden" to your content, it will automatically be set to "visibility: inherit" after it's ready.
Haraldson 15y ago
So, just to get this right; to use this script, you'd have to know your content, right down to how many words each text element contains and so forth? The exception being the pairings and repeats. If you already know your content that well (ie. it's static and not any form of user input), you could just add some extra inline elements to your markup, I mean, you're already heavily customizing the text elements. This is perhaps more elegant, but it makes your CSS too tightly bound to your content. Add a word in the markup, and you'll have to update your CSS as well, with a none or whatnot. By all means, nice work, I just rarely work with pages where I know how the content will turn out. Edit: Fixed a typo.
- micheljansen 15y ago
  my thoughts, some of the examples are way more elegantly solved using markup than with complex CSS rules. That is not to say that you cannot do that with this library: just define a few extra classes and wrap the individual words, letters etc. in spans or something. I think they just went a little overboard with their examples.
tambourine_man 15y ago
What's the performance penalty for wrapping every character in a span? Is it meant for titles only (honest question)?
- joshfraser 15y ago
  Pretty sure everything about this library is terrible for performance. I cringe to say this, but I might even recommend using images of text over this.
darylteo 15y ago
Does wrapping everything in spans and divs impede SEO in any way? i.e. Google aside, does Bing and other crawlers interpret: <span>Perfect</span> To be the same as: <span> <span class="word2" style="display: inline-block; "><span class="char1" style="display: inline-block; margin-right: 1px; ">p</span><span class="char2" style="display: inline-block; margin-right: 0px; ">e</span><span class="char3" style="display: inline-block; margin-right: 2px; ">r</span><span class="char4" style="display: inline-block; margin-right: 0px; ">f</span><span class="char5" style="display: inline-block; margin-right: 0px; ">e</span><span class="char6" style="display: inline-block; margin-right: 0px; ">c</span><span class="char7" style="display: inline-block; margin-right: 0px; ">t</span><span class="char8" style="display: inline-block; margin-right: 0px; ">.</span> </span> Also... SPANNITY SPANNNN SPANNITY SPANNNN
- peterjmag 15y ago
  Google's crawlers don't really interpret JS, so they won't see all the extra span tags that this script applies. In other words, Google should interpret the header on the demo page as: <header> <h1>Kerning.js</h1> <h2>Take control of your web typography.</h2> </header> Check out http://stackoverflow.com/questions/2061844/does-googles-crawlers-have-javascript-what-if-i-load-a-page-through-ajax http://stackoverflow.com/questions/2061844/does-googles-craw... for the usual caveats.
  - robtoo 15y ago
    Search engines certainly should interpret it that way, but I think the point was to question whether they all (for someone value of "all") really do do it that way in practice.
skrebbel 15y ago
Not very cross-browser, is it? Even the page itself lays out entirely wrong on Opera.
- secoif 15y ago
  I'm not surprised it doesn't work in Opera, and I wouldn't hold it against the library. I don't (personally) know a single user of opera or developer who tests on it. This is a shame, but somewhere along the line, opera dropped the ball and fell into obscurity.
kevingadd 15y ago
Completely broken in Firefox, takes ages to load in Chrome. Can't imagine why anyone sane would want to use this library if the cost is so severe. Doing it declaratively through css is nice, but it would be nicer if it used vendor prefixes correctly to avoid namespace collisions instead of misusing them the way it does.
josscrowcroft 15y ago
Great library, great work - kudos to you for tackling a very tricky subject (I'm staying well away from CSS parsing and typography ... for now) My only concern is whether this is (in startup lingo) a painkiller or a vitamin - as in, this is really nice to have, if you're that worried about kerning, but perhaps not enough of a pain-point for designers and developers to warrant learning a new set of nested and prefixed CSS rules, just to do something that's possible to hack together on a case-by-case basis with something like lettering.js... Perhaps if there's a way to simplify the syntax or provide easy copy-paste examples, it'll remove the barrier to entry? Still, applaud the work and the code looks great.
DieBuche 15y ago
So, to style the 235th word in a text, I'd have to do #main { -letter-size: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ .... 0.5em; } Why wouldn't I simply wrap it in a span, then it even works on browser with JS switched off. Uh, and once I have to edit the copy and add a single word somewhere, everything breaks.
- bmelton 15y ago
  Is there some reason you wouldn't just put it in a span and style that? Just because you CAN specifically target the 235th word in a text doesn't mean that you have to, or that you necessarily should. I can think of a few instances where I could have used the ability to target a specific letter in the past, specifically as it relates to logotypes or branding, but none that involved targeting the 235th letter.
lean 15y ago
I'm working on a fine-grained typography control JS library myself, very interesting work. Designers/front-ends, what things would you like to control about your type now, that you can't yet?
loup-vaillant 15y ago
Apparently doesn't work with no-script, even when allowing the whole page. I suppose there is some cross scripting going on? Or is it because my iceweasel 3.5.16 from Debian-stable is too old?
audionerd 15y ago
Speaking of kerning, here's a simple CSS declaration for modern browsers: text-rendering: optimizeLegibility; ... which will give you improved handling of kerning pairs and ligatures. see: http://www.aestheticallyloyal.com/public/optimize-legibility/ http://www.aestheticallyloyal.com/public/optimize-legibility...
joelanman 15y ago
While pretty, this really messes up screen readers: as each letter gets wrapped in a span, the letters are read out one at a time.

154 points by endtwist 15y ago

Nice work. I like how it all stays declarative in the CSS too. I would recommend outsourcing your parsing though. It's a tough job and things like CSS hacks can really take your regexes for a loop. I'd recommend trying out http://glazman.org/JSCSSP/ http://glazman.org/JSCSSP/ or https://github.com/nzakas/parser-lib/tree/master/src/css https://github.com/nzakas/parser-lib/tree/master/src/css which Nicholas uses for CSSLint.

endtwist 15y ago
I evaluated JSCSSP (didn't know about Parser-lib), but was trying to keep the file size down to a minimum. Though perhaps not the most robust, the library I'm using now (http://bililite.com/blog/2009/01/16/jquery-css-parser/ http://bililite.com/blog/2009/01/16/jquery-css-parser/) seems to work fine with all of what I've thrown at it. It is also, by far, the smallest of the three CSS parsing libraries (14kb vs JSCSSP's 165kb).

saurik 15y ago

This library is misusing vendor prefixes :(... -webkit-* should be an area for WebKit to define custom CSS property, not for this library to tag things "only if using WebKit". If WebKit eventually decides to experiment with a word-color CSS property this is just going to cause problems. Instead, to fit with the standard way people define CSS properties, this library should be taking a prefix for itself, like -kerning-*, and then defining any of its extensions to CSS within that namespace: that way it is almost guaranteed to not cause problems going forward.

audionerd 15y ago

How does this differ from http://www.kernjs.com/ http://www.kernjs.com/ ?

dangrossman 15y ago
How are they similar? That link goes to a bookmarklet that lets you drag letters apart to produce a stylesheet adding extra margins to those letters. This story's link goes to a JavaScript library that provides a dozen new CSS rules for selecting and transforming words and letter spacing, rotation, color...
- lean 15y ago
  In this way "kerning.js" doesn't seem to be the most descriptive name for this project. Everything but the first example is not related to kerning, just typography. My first thought, when I read the title of this post, was "but we already have kernjs..."

socratic 15y ago

Do people use things like this? I recently read Robert Bringhurst's excellent Elements of Typographic Style, but have no idea how to apply it to the web. (There is an effort to translate the work at webtypography.net, but frankly, most of the sections are some equivalent of "you should do X, but X is not possible right now, but maybe with some CSS extension in the future X will be possible.") It seems like maybe we have choice of fonts now (through TypeKit, Google Web Fonts). But kerning and justification seem to be mostly accomplished through these sorts of JavaScript hacks, and text figures seem outright impossible. What is a wannabe typographer supposed to do on the web with current tools? Are lettering.js, kerning.js, kern.js, linebreak.js and similar usable or just experiments? More generally, what does the current web typographer's toolbox look like at the moment?

voidfiles 15y ago
Don't use this for anything more then a playful lib. It's fun, and it's helpful for defining what browsers might want to do in the future, but its a toy, like a fisher price hammer.
- endtwist 15y ago
  Actually, there's no reason you can't use this on a real site. Sure, you don't want to use it on a long block of text, but it's great for headers and short copy. It doesn't break anything and the "fallback" if it doesn't work is just unkerned copy.
  - voidfiles 15y ago
    Yea, but there is flash of un-styled content. There is no way around it because the style has to be applied by the javascript. That is not production ready in my opinion. The way standards bodies work now though I think this a great way to demo what browsers should be able to do.
    - endtwist 15y ago
      I should note this in the documentation, but if you add "visibility: hidden" to your content, it will automatically be set to "visibility: inherit" after it's ready.

Haraldson 15y ago

So, just to get this right; to use this script, you'd have to know your content, right down to how many words each text element contains and so forth? The exception being the pairings and repeats. If you already know your content that well (ie. it's static and not any form of user input), you could just add some extra inline elements to your markup, I mean, you're already heavily customizing the text elements. This is perhaps more elegant, but it makes your CSS too tightly bound to your content. Add a word in the markup, and you'll have to update your CSS as well, with a none or whatnot. By all means, nice work, I just rarely work with pages where I know how the content will turn out. Edit: Fixed a typo.

micheljansen 15y ago
my thoughts, some of the examples are way more elegantly solved using markup than with complex CSS rules. That is not to say that you cannot do that with this library: just define a few extra classes and wrap the individual words, letters etc. in spans or something. I think they just went a little overboard with their examples.

tambourine_man 15y ago

What's the performance penalty for wrapping every character in a span? Is it meant for titles only (honest question)?

joshfraser 15y ago
Pretty sure everything about this library is terrible for performance. I cringe to say this, but I might even recommend using images of text over this.

darylteo 15y ago

Does wrapping everything in spans and divs impede SEO in any way? i.e. Google aside, does Bing and other crawlers interpret: <span>Perfect</span> To be the same as: <span> <span class="word2" style="display: inline-block; "><span class="char1" style="display: inline-block; margin-right: 1px; ">p</span><span class="char2" style="display: inline-block; margin-right: 0px; ">e</span><span class="char3" style="display: inline-block; margin-right: 2px; ">r</span><span class="char4" style="display: inline-block; margin-right: 0px; ">f</span><span class="char5" style="display: inline-block; margin-right: 0px; ">e</span><span class="char6" style="display: inline-block; margin-right: 0px; ">c</span><span class="char7" style="display: inline-block; margin-right: 0px; ">t</span><span class="char8" style="display: inline-block; margin-right: 0px; ">.</span> </span> Also... SPANNITY SPANNNN SPANNITY SPANNNN

peterjmag 15y ago
Google's crawlers don't really interpret JS, so they won't see all the extra span tags that this script applies. In other words, Google should interpret the header on the demo page as: <header> <h1>Kerning.js</h1> <h2>Take control of your web typography.</h2> </header> Check out http://stackoverflow.com/questions/2061844/does-googles-crawlers-have-javascript-what-if-i-load-a-page-through-ajax http://stackoverflow.com/questions/2061844/does-googles-craw... for the usual caveats.
- robtoo 15y ago
  Search engines certainly should interpret it that way, but I think the point was to question whether they all (for someone value of "all") really do do it that way in practice.

skrebbel 15y ago

Not very cross-browser, is it? Even the page itself lays out entirely wrong on Opera.

secoif 15y ago
I'm not surprised it doesn't work in Opera, and I wouldn't hold it against the library. I don't (personally) know a single user of opera or developer who tests on it. This is a shame, but somewhere along the line, opera dropped the ball and fell into obscurity.

kevingadd 15y ago

Completely broken in Firefox, takes ages to load in Chrome. Can't imagine why anyone sane would want to use this library if the cost is so severe. Doing it declaratively through css is nice, but it would be nicer if it used vendor prefixes correctly to avoid namespace collisions instead of misusing them the way it does.

josscrowcroft 15y ago

Great library, great work - kudos to you for tackling a very tricky subject (I'm staying well away from CSS parsing and typography ... for now) My only concern is whether this is (in startup lingo) a painkiller or a vitamin - as in, this is really nice to have, if you're that worried about kerning, but perhaps not enough of a pain-point for designers and developers to warrant learning a new set of nested and prefixed CSS rules, just to do something that's possible to hack together on a case-by-case basis with something like lettering.js... Perhaps if there's a way to simplify the syntax or provide easy copy-paste examples, it'll remove the barrier to entry? Still, applaud the work and the code looks great.

DieBuche 15y ago

So, to style the 235th word in a text, I'd have to do #main { -letter-size: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ .... 0.5em; } Why wouldn't I simply wrap it in a span, then it even works on browser with JS switched off. Uh, and once I have to edit the copy and add a single word somewhere, everything breaks.

bmelton 15y ago
Is there some reason you wouldn't just put it in a span and style that? Just because you CAN specifically target the 235th word in a text doesn't mean that you have to, or that you necessarily should. I can think of a few instances where I could have used the ability to target a specific letter in the past, specifically as it relates to logotypes or branding, but none that involved targeting the 235th letter.

lean 15y ago

I'm working on a fine-grained typography control JS library myself, very interesting work. Designers/front-ends, what things would you like to control about your type now, that you can't yet?

loup-vaillant 15y ago

Apparently doesn't work with no-script, even when allowing the whole page. I suppose there is some cross scripting going on? Or is it because my iceweasel 3.5.16 from Debian-stable is too old?

audionerd 15y ago

Speaking of kerning, here's a simple CSS declaration for modern browsers: text-rendering: optimizeLegibility; ... which will give you improved handling of kerning pairs and ligatures. see: http://www.aestheticallyloyal.com/public/optimize-legibility/ http://www.aestheticallyloyal.com/public/optimize-legibility...

joelanman 15y ago

While pretty, this really messes up screen readers: as each letter gets wrapped in a span, the letters are read out one at a time.