fine flavored
web typography!

Welcome to ligatures.js

UPDATE

I’m going to recommend that people *not use* this script moving forward. I would recommend using the emerging CSS standard of text-rendering: optimizeLegibility;. Read more about this property, and it’s potential pitfalls. It is supported in current webkit browsers, as well as Firefox. This avoids some of the pitfalls that script has, and is one less thing to worry about.

I’m leaving the script up, though, for posterity, and in case anyone still wants to use it.

Ligatures are the typographic elements when two characters are joined together into one form. This is a technique that is used frequently in print design. It was an invention that allowed early printers to be able to place awkward characters next to each other, or characters that read better when ran together.

This is a simple jQuery script that seeks to emulate this effect on the web. Unfortunately, as of this time, there are only about four ligature characters that are reliably rendered in HTML - “fi” , “fl” , “Æ” and “æ”.

Instructions:

  1. Make sure you have jQuery attached to your web page. I recommend the hosted google URI.
  2. Determine what elements you would like to have ligatures used in. I recommend things like headers and intro pieces of text. This shouldn’t be used on body copy.
  3. Enter that list of elements into the box below, and update the script. Or, you can enter your list directly into the script in the highlighted area.
  4. Copy and paste the script either into the head of your page, or in a linked JavaScript file.
			
$(document).ready(function() {
	$.fn.ligature = function (str, lig)
	{
	    return this.each(function ()
	    {
	        this.innerHTML = this.innerHTML.replace(
	            new RegExp(str, "g"),
	            lig;
	        );
	    });
	};
	$("h1").ligature("fi", "fi").ligature("fl", "fl").ligature('AE','Æ').ligature('ae','æ');

});

Caveats:

Please let me know if you use this script.

Full credit goes to some of the folks on Stack Overflow for the string replace part of the function, though I modified it for my needs. Thanks also to Chris Krycho for the suggestion to use the "$" alias.

Back to chipcullen.com. | Follow me on Twitter!