JavaScript CSS HTML Makefile
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin added bin/ Jul 2, 2013
example added jquery compatibility; Aug 26, 2011
test used mocha instead of expresso Jun 20, 2017
.gitignore actualized .gitignore Jul 1, 2013
.travis.yml Add Travis support. Oct 25, 2015
LICENSE Update LICENSE Jun 6, 2013
Makefile Makefile: fixed test Jun 25, 2018
README.md Suggest simple browser usage use RawGit's CDN Jul 3, 2016
bower.json 0.6.8 Jun 25, 2018
cli.js 0.6.8 Jun 25, 2018
package.json 0.6.8 Jun 25, 2018
typogr.js 0.6.8 Jun 25, 2018
typogr.min.js 0.6.8 Jun 25, 2018

README.md

Build Status

Table of Contents

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://cdn.rawgit.com/ekalinin/typogr.js/0.6.6/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 &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.

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

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.