WorldMaker/typogr.js

Typography utils for javascript

Table of Contents

• typogr.js
  • Installation
• Usage
  • Simple on the server
  • Simple in the browser
  • OOP-style
  • Chains
• API
  • amp
  • initQuotes
  • smartypants
  • widont
  • caps
  • ord
  • typogrify
• CLI
• License

typogr.js

typogr.js provides a set of functions which automatically apply various transformations to plain text in order to yield typographically-improved HTML.

typogr.js is inspired by these awesome packages:

• django-typogrify
• smartypants
• underscore

Installation

It's recommended to install via npm:

npm install -g typogr

Usage

typogr.js has no external dependencies and can be used both on the server and in the browser.

Simple on the server

// Only for server side
var typogr = require('typogr');

typogr.typogrify('<h1>"Pretty header ...</h1>');
'<h1><span class="dquo">&#8220;</span>Pretty header&nbsp;&#8230;</h1>'

Simple in the browser

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/ekalinin/typogr.js/master/typogr.min.js"></script>
<script>
$(document).ready(function() {
    $('#res').html(typogr.typogrify($('#src')));
})
</script>

OOP-style

// Only for server side
var typogr = require('typogr');

typogr('<h1>"Pretty header ...</h1>').typogrify();
'<h1><span class="dquo">&#8220;</span>Pretty header&nbsp;&#8230;</h1>'

Chains

// Only for server side
var typogr = require('typogr');

typogr('<h1>"Pretty header ...</h1>').chain().initQuotes().value();
'<h1><span class="dquo">"</span>Pretty header ...</h1>'

typogr('<h1>"Pretty header ...</h1>').chain().initQuotes().smartypants().value();
'<h1><span class="dquo">&#8220;</span>Pretty header &#8230;</h1>'

API

amp

Wraps ampersands in HTML with <span class="amp"> so they can be styled with CSS. Ampersands are also normalized to &. Requires ampersands to have whitespace or an   on both sides. Will not change any ampersand which has already been wrapped in this fashion.

initQuotes

Wraps initial quotes in <span class="dquo"> for double quotes or <span class="quo"> for single quotes. Works inside these block elements:

• h1, h2, h3, h4, h5, h6
• p
• li
• dt
• dd

Also accounts for potential opening inline elements: a, em, strong, span, b, i.

smartypants

• Straight quotes ( " and ' '") into “curly” quote HTML entities (‘ | ’ | “ | ”)
• Backticks-style quotes (``like this''') into “curly” quote HTML entities (‘ | ’ | “ | ”)
• Dashes (“--” and “---”) into n-dash and m-dash entities (– | —)
• Three consecutive dots (“...”) into an ellipsis entity (…)

widont

Based on Shaun Inman's PHP utility of the same name, replaces the space between the last two words in a string with   to avoid a final line of text with only one word.

Works inside these block elements:

• h1, h2, h3, h4, h5, h6
• p
• li
• dt
• dd

Also accounts for potential closing inline elements: a, em, strong, span, b, i.

caps

Wraps multiple capital letters in <span class="caps"></span> so they can be styled.

ord

Wraps number suffix's in <span class="ord"></span> so they can be styled.

typogrify

Applies all of the following filters, in order:

• amp
• widont
• smartypants
• caps
• initQuotes
• ord

CLI

A command line interface can be used to typogrify html files.

% typogr --help

  Usage: typogr [options] [input] [output]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number
    -i, --inplace  Use single path as both input and output
    -f, --force    Do not prompt to verify file overwrites

  reads input from stdin, individual files, directories, or globs
  writes ouput to stdout, individual files, or directories

  Examples:

    $ typogr inputFile.html outputFile.html
    $ typogr < inputFile.html > outputFile.html
    $ typogr -i singleFile.html
    $ typogr inputDirectory outputDirectory
    $ typogr inputDirectory/*.html outputDirectory

License

See LICENSE file.