node package manager

richtypo

Typography enhancer for English and Russian

Richtypo: typography enhancer for Node.js

The main purpose of this library is to enhance typography of your HTML. It supposes that your texts already have right quotes, dashes and other symbols (you can use Typography Keyboard Layout). Richtypo adds non-breaking spaces in right places, CSS classes for abbreviations, ampersands and hanging punctuation for special styling.

  • Rules for English and Russian languages
  • Non-breaking spaces after prepositions and conjunctions, before em-dash, etc.
  • <nobr> for words with hyphens
  • CSS classes for abbreviations, ampersands and hanging punctuation
  • Takes care of your HTML tags
  • Simple typographer (quotes, em-dash, etc.) for user generated content (e.g. comments)

Try it out!

var richtypo = require('richtypo');
var beautiful = richtypo.rich('Welcome to the world of beautiful web typography — only with Richtypo.');
var awesome = richtypo.title('Beautiful &amp; Awesome Web Typography with “Richtypo”');

Will produce something like that:

Welcome to&nbsp;the world of&nbsp;beautiful web typography&nbsp;— only with Richtypo.
Beautiful <span class="amp">&amp;</span> Awesome Web Typography with <span class="sldquo"> </span> <span class="hldquo"></span>Richtypo”'

&nbsp; is shown here just for demonstration purposes. Actual implementation produces the non-breaking space character itself (\xA0), not the escaped sequence.

Also look at the example page and its source.

Richtypo wraps abbreviations in <abbr> tags. It also wraps ampersands and leading quotes to allow for typographic enhancement:

Character Spacer class Character class
& .amp
.sldquo .hldquo
.slsquo .hlsquo
« .slaquo .hlaquo
.sbdquo .hbdquo
( .sbrace .hbrace

Start with something like this, and customize it for your site:

/* Use small caps for abbreviations */
abbr {
  font-size: 0.875em;
  letter-spacing: 0.15em;
  margin-right: -0.15em;
}
 
/* Use the best available ampersand */
.amp {
  font-family: Baskerville, Constantia, Palatino, 'Palatino Linotype''Book Antiqua'serif;
  font-style: italic;
}
 
/* Hang leading braces and quotes into the left margin */
.sbrace { margin-right: 0.3em;  }
.hbrace { margin-left: -0.3em;  }
 
.slaquo { margin-right: 0.42em; }
.hlaquo { margin-left: -0.42em; }
 
.sbdquo { margin-right: 0.42em; }
.hbdquo { margin-left: -0.42em; }
 
.sldquo { margin-right: 0.42em; }
.hldquo { margin-left: -0.42em; }
 
.slsquo { margin-right: 0.42em; }
.hlsquo { margin-left: -0.42em; }
$ npm install [-g] richtypo
richtypo.rich(text, lang)  // Enhancing typography: non-breaking spaces, abbreviations 
richtypo.title(text, lang)  // Typography for big text: the same as rich + ampersands and hanging punctuation 
richtypo.lite(text, lang)  // Simple typographer (quotes, em-dash, etc.) for user generated content (e.g. comments) 
richtypo.full(text, lang)  // lite() + rich() 
  • text is an HTML string;
  • lang (optional) is a text language (en or ru, default: en).
richtypo.richtypo(text, rulesets, lang)
  • text is a HTML string;
  • rulesets is array of rulesets (available rulesets: save_tags, cleanup_before, short_words, spaces_lite, spaces, abbrs, amps, hanging, cleanup_after, restore_tags);
  • lang (optional) is a text language (en or ru, default: en).
richtypo.lang(lang)
  • lang is a language (en or ru).

If you don’t want HTML tags in the result string just wrap it in textify method:

richtypo.textify(richtypo.full(text, lang))

Usage: richtypo [--rules full] [--lang en] [--text] filename

Define ruleset:

  • lite - Simple typographer (quotes, em-dash, etc.) for user generated content (e.g. comments);

  • rich - Enhancing typography: non-breaking spaces, abbreviations;

  • title - Typography for big text: the same as --rich + ampersands and hanging punctuation. [default: "full"]

  • full - --light + --rich;

Text language: en or ru.

Convert result to text.

The changelog can be found on the Releases page.


The MIT License, see the included License.md file.