Stylistics

Published: 9 April 2011

Description

Danger, Will Robinson! This plugin is experimental. It might not play well with all browsers or screen readers. For now at least, it’s just for fun.

Stylistics is a jQuery plugin which aims to make it possible to use ligatures, dipthongs and other typographic font features on the web.

Here are some of the things that it does:

Optionally uses Phil Oye’s FontUnstack to check that the font in use on the client is the correct font.
Replaces instances of ff, fi, fl, ffi & ffl with their ligature counterparts—this can be overridden if required.
Optionally replaces user-specified characters or character sequences with alternate characters.

Here are some of the things that it does not do:

Replace the CSS3 font-variant-ligatures property, or other related properties.
Automatically handle OpenType stylistic sets or characters beyond Unicode 0xFFFF.

Examples

Kondolar Bold from the Kondolar typeface by Ekaluck Peanpanawate

Leafhoppers eat wolfberries

Effective, efficient & flexible

Scoffjaws & scofflaws

Offkey and offbeat

Royal Kings & Queens

The crispiest crisps

Halfhearted cliffhangers

Synopsis

Combining and minifying the JavaScript files is recommended for production use:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="content-type"
              content="text/html; charset=utf-8"/>
        <title>Affectionate leafhoppers</title>
    </head>
    <body>
        <h1>Affectionate leafhoppers</h1>
        <p>Leafhopper is a common name applied to...</p>

        <script type="text/javascript"
                src="jquery.min.js"></script>
        <script type="text/javascript"
                src="fontunstack.jquery.js"></script>
        <script type="text/javascript"
                src="jquery.stylistics.js"></script>
        <script type="text/javascript"
                src="stylistics.imfell.js"></script>
    </body>
</html>

stylistics.imfell.js

$(window).load(function() {
    $('p.imfell').stylistics({
        fontCheck : 'IM Fell English',
        glyphs    : {
            'ffi' : '0x007B',
            'ffl' : '0x007D',
            'ff'  : '0x00A4',
            'fi'  : '0x00A5',
            'fl'  : '0x00A6',
            'ct'  : '0x00AA'
        }
    });
});

Usage

Load jQuery:

<script type="text/javascript" src="jquery.min.js"></script>

Using FontUnstack is optional, but recommended:

<script type="text/javascript" src="fontunstack.jquery.js"></script>

Load Stylistics:

<script type="text/javascript" src="jquery.stylistics.js"></script>

Configure and initiate stylistics:

<script type="text/javascript" src="stylistics.imfell.js"></script>

Options

If you are using FontUnstack and @font-face, the $(window).load() method should be used instead of $(document).ready(). This gives the fonts time to download. See the FontUnstack documentation for more information.

To replace instances of ff, fi, fl, ffi & ffl in h1 elements:

$(window).load(function() {
    $('h1').stylistics();
});

To remove the default ligature replacements:

$.fn.stylistics.defaults = {};

$(window).load(function() {
    $('h1').stylistics();
});

To specify additional replacements, use the glyps option:

$(window).load(function() {
    $('h1').stylistics({
        glyphs    : {
            'fb'  : '0xE07C',
            'ffb' : '0xE07D',
            'ffh' : '0xE07E',
            'ffj' : '0xE07F',
            'ffk' : '0xE080',
            'fh'  : '0xE081',
            'fj'  : '0xE082',
            'fk'  : '0xE083'
        }
    });
});

The replacement character code may be specified as a hexadecimal string, or as a decimal:

$(window).load(function() {
    $('h1').stylistics({
        glyphs    : {
            'fb'  : '0xE07C',
        }
    });
});

$(window).load(function() {
    $('h1').stylistics({
        glyphs    : {
            'fb'  : 57468,
        }
    });
});

To make Stylistics check the font before replacing the characters, use the fontCheck option, which takes either a string or an array of strings. These should match the names used in your CSS file:

$(window).load(function() {
    $('h1').stylistics({ fontCheck : 'Kondolar' });
});

$(window).load(function() {
    $('h1').stylistics({ fontCheck : ['Kondolar', 'Arial Black'] });
});

The fontCheck option applies FontUnstack to each selected element. This allows you to further customise these elements using CSS.

Download

Download the Stylistics zip file here.

Comments, suggestions, bugs…

Sorry, there’s no comment facility just yet. However, please feel free to email me if you have any questions or useful comments.