Typography as You Type

Typography as You Type

Straight quotes become curly ones, -- becomes an en dash, ... becomes an ellipsis and -> becomes an arrow, as you type. Nothing is substituted inside code, formulas or link targets, and Backspace puts back exactly what you typed.

This is a rebuild rather than a fork. The plugin it replaces, mgmeyers/obsidian-smart-typography, has about 170,000 downloads and has had no release since June 2022. Its open issues are the specification for this one: the notes below say which issue each behaviour answers.

What it substitutes

Each group has its own switch in settings.

<= is the one real collision: it is both "less than or equal" and a leftwards double arrow. With mathematical symbols on it gives ≤, and <== still reaches ⇐. With them off, <= gives ⇐.

Quotation marks in your language

The convention is a dropdown, not a fixed set of curly quotes: English, German, French, Spanish, Swedish, Polish and Russian, or off. French adds the no-break space its typography asks for inside the guillemets. This is what issues #47, #64 and #51 ask for.

The apostrophe is ’ in every convention, which is a separate switch from the quotation marks. German is the case that makes the difference visible: it closes a single quotation with ‘, but geht's still takes ’ (#70).

A quotation mark opens or closes depending on what precedes it, and the start of a note counts as an opening position, so a note that begins with a quotation gets the opening mark (#65).

Typing a closing quote where one already sits steps over it rather than adding a second one, which is what Obsidian's own auto-pairing leaves behind (#56, #57, #59).

Where it keeps out

A curly quote in a query is a syntax error, and this is where most of the original's bug reports come from. Nothing is substituted inside:

• fenced code blocks, which covers Dataview and every other query language written in one (#46);
• inline code, which covers inline Dataview;
• $...$ and $$...$$ formulas, though a lone $ before a digit or a space is read as money and not as an unclosed formula;
• [[wikilink]] targets and the (target) of a markdown link (#62);
• YAML frontmatter;
• <% ... %> Templater expressions and <%* ... %> scripts, including ones that run over many lines (#39);
• <!-- HTML comments -->, on one line or several, where -- is usually on its way to -->;
• HTML tags such as <span style="color: red"> or <img src="https://raw.githubusercontent.com/perezamadorluisenrique-gif/smart-typography-plugin/HEAD/a.png" width="300">, up to their >, where a curled quote breaks the attribute;
• bare URLs.

--- alone on a line is left alone too, in a quote or callout as well: it is a horizontal rule, a setext underline and the frontmatter fence, and none of those is an em dash. So is the delimiter row of a table, | --- | :-: |, which would stop being one with a dash in it.

Text that is already there

Substitutions happen as you type, so a paragraph pasted from elsewhere, or a note written before you installed the plugin, keeps its straight quotes and double hyphens. The command Apply typography to the selection or the whole note fixes that: it works on the selection, or on the whole note when nothing is selected.

It feeds the text through the same rules as typing, one character at a time, so the result is exactly what you would have got by typing it: code, maths, links, front matter and HTML tags are left alone, your quotation style and the groups you switched off are respected, and text that is already typeset is not touched again. The change is one step in the undo history.

Turning it off for a folder or a note

• Excluded folders in the settings takes one folder per line. Nothing is substituted in any note inside them, at any depth: a folder of code snippets, raw imports, or templates that must stay plain (#41).
• One note opts out with the property typography: off. The command Turn substitutions off or on in this note adds or removes it for you.

Everything else about the note (its quotes, dashes and ellipses already in place) is left as it is; only new typing stops being converted. The Apply typography command still works there when you run it on purpose.

Undo, and taking a substitution back

Each substitution is one editor transaction covering both the character you typed and the replacement, so one undo removes the whole thing rather than leaving half of it behind.

Backspace pressed straight afterwards restores the characters you typed: an em dash goes back to ---, not to --. That is the escape hatch that makes the rules safe to leave on.

It only applies at the cursor position the substitution left, and any other editor transaction, a bare cursor move included, drops the record. The original reverts on any Backspace, so moving the cursor and then pressing it rewrites text somewhere else in the note (#58).

Input methods, dead keys and phones

Nothing is substituted while an input method or a dead key is composing. The characters that arrive mid-composition are half-finished and the keyboard revises them afterwards, and rewriting them is what produces the doubled quotes reported on GNOME (#44, #63).

Once the composition is over, the quotes it produced are curled, each one where it stands. This matters most on Android, where keyboards such as Gboard compose every word as you type it, apostrophe included: without this step it's would never become it’s there. Only quotes get this treatment: a keyboard that composes -- or ... as part of a word leaves them as typed.

On iPhone and iPad, iOS has its own Smart Punctuation (Settings → General → Keyboard), on by default, which curls quotes and turns -- into an em dash before the plugin sees them. The two work side by side, but iOS always uses English quotation marks and its own dash rule. For the convention you picked here, the -- en dash and Backspace putting back what you typed, turn Smart Punctuation off.

How it is put together

• main.ts is the only file that touches Obsidian or CodeMirror. It holds the input handler, the Backspace binding, the state field that remembers the last substitution, and the settings tab.
• src/ is pure logic with no imports from either: context.ts decides what is protected, rules.ts is the table of character substitutions, substitute.ts turns a keystroke into an editor change, compose.ts curls the quotes a composition left behind, revert.ts decides whether Backspace should put something back, and settings.ts holds the conventions.
• tests/ runs under node --test with no test framework and no browser.

npm install
npm test
npm run build

What is tested, and where

The 83 tests cover the engine, not the editor. They type through substitutionFor one character at a time, which is how the chained rules get exercised.

The editor side has been checked inside the Obsidian desktop app (1.13.7, Linux), with keystrokes sent through Chromium's input pipeline rather than by calling the plugin directly:

• with Obsidian's "Auto-pair brackets" on, the default, quotation marks are curled and not doubled (0.1.1 and earlier lost this to auto-pairing);
• a substitution is one undo step, and Backspace straight afterwards puts back what was typed;
• input-method composition, sent through Chromium's own composition API, is left alone while it lasts, and its quotes are curled once it is committed (it's composed as one word, a dead-key ");
• the settings tab renders, saves, and applies to open notes at once.

Still not checked: a physical dead-key layout on GNOME and a real Android or iOS keyboard, which may reach the editor differently from the simulated composition, and other plugins that also handle typing, Easy Typing among them (#66).

What it deliberately does not do

• Reading-view-only substitution (#40, #67). That is a different plugin: it would render substitutions without changing the note, and mixing the two in one settings tab makes both confusing.
• Superscripts and subscripts (#69), and unit symbols (#73). Both are substitutions of a different kind, and ^2 is live markdown in too many vaults to convert by default.
• Right-to-left quotation order (#68), which needs more than a rule table.

Installing

In Obsidian, open Settings -> Community plugins -> Browse, search for Typography as You Type, then install and enable it.

To install it by hand instead, download main.js and manifest.json from the latest release into <your vault>/.obsidian/plugins/typography-as-you-type/ and enable the plugin in Settings -> Community plugins.

It needs Obsidian 1.3.5 or newer.

More plugins by Siulved54

All of them are in the community directory: Settings -> Community plugins -> Browse, then search for the name.

Licence

MIT, (c) Siulved54.