typogr

Typography utils

npm install typogr
43 downloads in the last day
238 downloads in the last week
706 downloads in the last month

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:

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().quotes().value();
'<h1><span class="dquo">"</span>Pretty header ...</h1>'

typogr('<h1>"Pretty header ...</h1>').chain().quotes().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 &amp;. Requires ampersands to have whitespace or an &nbsp; on both sides. Will not change any ampersand which has already been wrapped in this fashion.

quotes

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 &nbsp; 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.

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
  • quotes
  • 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.

npm loves you