Typeset
-Typeset is an HTML pre-processor for web typography which provides typographic features used +
Typeset is an HTML pre-processor for web typography which provides typographic features used traditionally in fine printing which remain unavailable to browser layout engines. Typeset’s processing brings the following to your webpages:
-
-
- Hanging punctuation +
- Hanging punctuation
- Ligatures
- Optical margin alignment
- Punctuation substitution @@ -55,37 +55,36 @@
- Soft hyphen insertion
Typeset
How?
-Typeset does not require any client-side JavaScript and uses less than a kilobyte of CSS. Processed HTML & - CSS works in Internet Explorer 5 and without any CSS.
+Typeset does not require any client-side JavaScript and uses less than a kilobyte of CSS. Processed HTML & + CSS works in Internet Explorer 5 and without any CSS.
-Typeset can be used manually or as a plugin for Grunt and gulp. +
Typeset can be used manually or as a plugin for Grunt and gulp.
-
npm i typesetnpm i typesetUsage
-const typeset = require('typeset');
-let html = '<p>"Hello," said the fox.</p>';
+ const typeset = require('typeset');
+let html = '<p>"Hello," said the fox.</p>';
-let output = typeset(html);
- Then tweak Typeset.css to match the metrics of your font and include it on your
+let output = typeset(html);
Then tweak Typeset.css to match the metrics of your font and include it on your page.
Options
Typeset accepts an optional second argument containing configuration:
-ignore <string> - Typeset will not process elements matching this CSS selector.
+ignore <string> - Typeset will not process elements matching this CSS selector.
Example:
-typeset(html, { ignore: '.skip' });typeset(html, { ignore: '.skip' });only <string> - Typeset will only process elements matching this CSS selector.
+only <string> - Typeset will only process elements matching this CSS selector.
Example:
-typeset(html, { only: '.typeset' });typeset(html, { only: '.typeset' });disable <array> - List of Typeset features to disable. The following features may be disabled:
@@ -100,51 +99,54 @@Example:
Example:
-typeset(html, { disable: ['hyphenate'] });typeset(html, { disable: ['hyphenate'] });
+
- CLI
-npm install -g typesetCLI
+npm install -g typesetCompiles a file to stdout:
-typeset-js input.htmltypeset-js input.htmlPass an output file as a second argument:
-typeset-js input.html output.htmlUse the --ignore option to ignore specific CSS selectors:
+
typeset-js input.html output.htmlUse the --ignore option to ignore specific CSS selectors:
typeset-js input.html output.html --ignore ".skip"typeset-js input.html output.html --ignore ".skip"About
-This project started as a collection of libraries I gathered for Blot. Typeset still runs there in production. This was made possible by the work of - Bram Stein, Daniel Haim, and Dr. Drang. This page is set in the - Plex family by Mike Abbink. Thanks to Matthew Butterick and Chris Coyier for their help and feedback. +
This project started as a collection of libraries I gathered for Blot. Typeset still runs there in production. This was made possible by the work of + Bram Stein, Daniel Haim, and Dr. Drang. This page is set in the + Plex family by Mike Abbink. Thanks to Matthew Butterick and Chris Coyier for their help and feedback.
-License
-This software is dedicated to the public domain and licensed under CC0. +
License
+This software is dedicated to the public domain and licensed under CC0.