Announcing: Ligatures.js!


This is a simple script that I’ve been tinkering with for a while after wondering aloud if it were possible.

The idea is simple – using JavaScript (well, jQuery, anyway) swap in HTML ligatures on select elements. This is intended to be a decorative flourish of fine typography – don’t use this on your body copy.

Check it out!

  • You know you can do any default ligatures in the font with just HTML+CSS3, right? Today only Firefox supports it, but more browsers are coming. (Actually, I haven’t checked IE 9 yet, so maybe I am speaking too soon.)

    Also, technically AE and ae are not ligatures but diphthongs; they reflect a pronunciation and have their own completely normal codepoints separate from A+E and a+e. Same thing for OE and oe.

    Just for fun here are the codepoints… interesting to see what WordPress and browser forms will do to them…

    AE: Æ ae: æ OE: Œ oe: œ

    Also the fi and fl ligatures have their own codepoints as well, but in this case they are just there for compatibility reasons; better to input the separate letters and have stuff downstream do the ligation:

    fi: fi fl: fl

    Whether or not the ligatures look any different may depend on what font one is viewing the page in, as well.

  • Chip Cullen


    Thanks for the feedback! I’m sorry that it’s taken me three days to respond.

    First off, no, I didn’t know that there was a pure HTML5/CSS3 option out there. I guess that’s especially true for me as I use Safari as my primary browser. My initial research into the subject never really turned up any references to a CSS3 solution; though I’ve clearly not looked hard enough.

    Also, thank you for the clarification on the diphthongs. I gotta say, I love that word (much like ‘octothorp’).

    As for ‘fi’ and ‘fl’, it’s sad, but those transcoded characters – like &FB01; are the only ones that I’ve founded render correctly. I wish there was better support for ligatures like ‘ff’, ‘ffi’, ‘st’, etc… The browser will recognize that the character is a ligature, but renders it in a bold sans-serifish (I think system default) font. Very annoying.

    For the time being, though, we have to content ourselves with what we have, I suppose. Also, until there is greater browser support, we’re going to have to have some kind of hack. And I guess that’s what I’ve tried to do here.

    If you are aware of any other ligatures, or diphthongs, that do render reliably in browsers, I would be happy to add it to the script!

  • Well, there are other ligatures with (discouraged) direct codepoints in Unicode, but they aren’t common enough in most system fonts… unless of course one used a server-based web font (such as my company’s WebINK solution). FWIW, the other typographic ligatures with hardcoded Unicode codepoint are ff, ffi, ffl, st (archaic style), and long-s t (ditto).

    There are other diphthongs, but not ones that are relevant to English, and most diphthongs do not look like ligatures. For example, all the German letters with the umlaut/dieresis accent are representations of diphthongs, which is why the ASCII transliteration of any such words or names just appends an e after the other vowel.

    What else is there? Hmmm, there’s the Dutch ij diphthong. Then there are some really obscure things only used in phonetics….