Documentation

Choosing a mode

Which mode to call for which input, and what goes wrong when a string is passed to the wrong one.

Updated · spec 1.12.0

A mode says what your string is. The rules are the same in all of them; what differs is which characters the rules may touch. Passing the wrong mode does not raise an error. It produces typography in the wrong places, and that is why the choice is worth making deliberately.

Your string isUse
prose from end to end: a headline, a CMS field, a notificationtext
HTML, a fragment of it, or anything that can contain &html
a Markdown or MDX filemarkdown with the right dialect
a YAML file with some prose fieldsyaml with the keys of those fields

Pass whole prose, not fragments #

transform sees only the string it is given. Rules read the characters on either side of what they change, and that reading stops at the ends of the string. Walk a component tree and transform each text node alone, and every node boundary becomes an end of text.

transform(input, { locale: "en-US" })

Input

- the rest

Output

- the rest

Sent alone, a dash with no word before it has nothing to attach to. The same text inside one html fragment is read across the element:

transform(input, { locale: "en-US", mode: "html" })

Input

<strong>Design</strong> - the rest

Output

<strong>Design</strong>—the rest

Do not send code to text #

text cannot tell code or markup from prose, so it typesets whatever is in the string. In code that means (c), (r), (tm) and x between numbers, spaces just inside brackets, straight quotes anywhere, and hyphens between words. In markup it reaches into attributes:

transform(input, { locale: "en-US" })

Input

<a href="/x" title="it's -- a note">link</a>

Output

<a href="/x" title="it’s—a note">link</a>

The title attribute is rewritten, which changes the document. html mode leaves every attribute alone, and so does markdown for the HTML inside it. Use the mode that knows where the code is, or keep code out of the call. A string that can contain tags, &amp; or &#160; is HTML, fragment or not.

Markdown skips what the dialect calls code #

In markdown mode the skipped regions are the dialect's own structural ones, not whatever looks like code to a reader. CommonMark calls an indented block code at four spaces; at two it is an ordinary paragraph, so a JSON sample indented by two spaces comes back with curly quotes: valid JSON in, invalid JSON out, and nothing in the return value says so. MDX has no indented code blocks at all, so there even four spaces is prose, and a brace inside it is a JSX expression: the same sample throws POLYTYPO_MALFORMED_INPUT. A fence or a code span is the one marker that means code in both dialects. See Dialects.

Name what YAML prose is #

YAML is the inverse of HTML and Markdown: data with islands of prose. yaml mode processes only the values of the keys you list, because nothing in the syntax separates a description from a run. See YAML keys.

Already using polytypo? Add our badge

Two lines: a script tag and a span. No per-embed network call. Pick a language and a theme, then copy the code into your footer or credits. Embedding notes cover Content Security Policy. Sites with the badge are listed on Sites using polytypo.

<script async src="https://polytypo.dev/badge.js"></script>
<span data-polytypo-lang="en" data-polytypo-theme="light"></span>

Search runs in your browser. Nothing is sent anywhere.