Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Typeset

Typeset is an HTML pre-proces­sor for web ty­pog­ra­phy which pro­vides ty­po­graphic fea­tures used tra­di­tion­ally in fine print­ing which re­main un­avail­able to browser lay­out en­gines. Typeset's pro­cess­ing brings the fol­low­ing to your web­pages:

Typeset does not re­quire any client-side JavaScript and uses less than a kilo­byte of CSS. Processed HTML & CSS works in Internet Explorer 5 and with­out any CSS. Typeset can be used man­u­ally or as a plu­gin for Grunt and gulp.


Getting Started

Install

$ npm i typeset

Usage

const typeset = require('typeset');
let html = '<p>"Hello," said the fox.</p>';
let output = typeset(html);

CSS

Then tweak the CSS to match the metrics of your font and include it on your page.

/*
 Small Capitals
 https://en.wikipedia.org/wiki/Small_caps 
*/

.small-caps {font-variant: small-caps;}

/*
 Optical margin alignment for particular letters 
 https://en.wikipedia.org/wiki/Optical_margin_alignment
*/

.pull-T, .pull-V, .pull-W, .pull-Y {margin-left: -0.07em}
.push-T, .push-V, .push-W, .push-Y {margin-right: 0.07em}

.pull-O, .pull-C, .pull-o, .pull-c {margin-left: -0.04em}
.push-O, .push-C, .push-o, .push-c {margin-right: 0.04em}

.pull-A {margin-left: -0.03em}
.push-A {margin-right: 0.03em}

/* 
 Quotation mark 
 https://en.wikipedia.org/wiki/Quotation_mark) 
*/

/* Single quotation marks (') */
.pull-single{margin-left:-.27em}
.push-single{margin-right:.27em}

.pull-double, .push-double,
.pull-single, .push-single {display: inline-block}

/* Double quotation marks (") */
.pull-double{margin-left:-.46em}
.push-double{margin-right:.46em}

Options

You can pass an options object to influence how your HTML is typeset:

const options = {
  ignore: '.skip, #anything, .which-matches', // string of CSS selector(s) to ignore
  only: '#only-typeset, .these-elements', // string of CSS selector(s) to exclusively apply typeset to
  disable: ['hyphenate'] // array of typeset feature(s) to disable
};

Features

The following features may be disabled:

  • hyphenate
  • hangingPunctuation
  • ligatures
  • punctuation
  • quotes
  • smallCaps
  • spaces

CLI Usage

$ npm i -g typeset
Usage: typeset-js [options] [<infile> [<outfile>]]

Options:

  -h, --help      output usage information
  -V, --version   output the version number
  -i, --ignore    string of CSS selector(s) to ignore
  -O, --only      string of CSS selector(s) to exclusively apply typeset to
  --disable,      string of typeset feature(s) to disable, separated by commas

Examples:

Compile a file and print it to stdout:

$ typeset-js inputFile.html

To create an output file, just add a second argument:

$ typeset-js inputFile.html outputFile.html

Use the --ignore option to ignore specific CSS selectors:

$ typeset-js inputFile.html outputFile.html --ignore ".some-class, h3"

Use the --disable option to disable typeset features:

$ typeset-js inputFile.html outputFile.html --disable "hyphenate,ligatures"

CLI redirections:

$ cat index.html | typeset-js > outputFile.html

Plugins


Support

If you don't find the answer to your problem in our docs, or have a suggestion for improvements, submit your question here.


License

This software is dedicated to the public domain and licensed under Creative Commons Zero. See the LICENSE file for details.


To Do:

You can’t perform that action at this time.