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:
It's recommended to install via npm:
npm install -g typogr
typogr.js has no external dependencies and can be used both on the server and in the browser.
// Only for server side
var typogr = require('typogr');
typogr.typogrify('<h1>"Pretty header ...</h1>');
'<h1><span class="dquo">“</span>Pretty header …</h1>'<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ekalinin/[email protected]/typogr.min.js"></script>
<script>
$(document).ready(function() {
$('#res').html(typogr.typogrify($('#src')));
})
</script>// Only for server side
var typogr = require('typogr');
typogr('<h1>"Pretty header ...</h1>').typogrify();
'<h1><span class="dquo">“</span>Pretty header …</h1>'// 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">“</span>Pretty header …</h1>'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.
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,h6plidtdd
Also accounts for potential opening inline elements: a, em,
strong, span, b, i.
- 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 (…)
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,h6plidtdd
Also accounts for potential closing inline elements: a, em,
strong, span, b, i.
Wraps multiple capital letters in <span class="caps"></span> so they can be styled.
Wraps number suffix's in <span class="ord"></span> so they can be styled.
Applies all of the following filters, in order:
- amp
- widont
- smartypants
- caps
- initQuotes
- ord
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
See LICENSE file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent