node package manager

richtypo

Richtypo: HTML typography enhancer for Node

npm Build Status

Richtypo adds non-breaking spaces in right places, <nobr> and <abbr> tags, CSS classes, ampersands and hanging punctuation for special styling. It expects that your texts already have the right quotes, em-dashes and other symbols (you can use Typography Keyboard Layout).

Features

  • 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 ampersands and hanging punctuation
  • <abbr> for abbreviations
  • Takes care of your HTML tags
  • Simple typographer (quotes, em-dash, etc.) for user generated content (like comments)
  • No dependencies

Example

Try it out!

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

Will produce something like that:

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

Note: all methods render &nbsp; as an actual non-breaking space (\xA0).

Also look at the example page and its source.

Styles

Richtypo wraps abbreviations in <abbr> tags. It also wraps ampersands and leading quotes to allow custom styling:

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; }

Installation

$ npm install --save richtypo

JavaScript API

Text processing: common use cases

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

Text processing: custom set of rules

richtypo.richtypo(text, rulesets, lang)
  • text is a HTML string;
  • rulesets is array of rulesets (available rulesets: save_tags, cleanup_before, short_words, orphans, lite, rich, hanging, cleanup_after, restore_tags, remove_doppelgangers or language-specific rules);
  • lang (optional) is a text language (en or ru, default: en).

Change language globally

richtypo.lang(lang)
  • lang is a language (en or ru).

Convert to text

If you don’t want HTML tags in the result string, use textify method:

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

Change log

The change log can be found on the Releases page.


License

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