Advanced Typography plugin

This plugin is only available for paid TinyMCE subscriptions.
This feature is only available for TinyMCE 6.3 and later.

The Advanced Typography plugin, depending on its setting, can replace common typewriter-style characters with their professional typesetter equivalents after the Advanced Typography button is pressed. This action will modify either the entire content for the TinyMCE document or the specific text selection highlighted by the user.

For example, if English-language typography rules are set, the Advanced Typography plugin can automatically replace an open-hyphen (-) with an em-dash (). And it can automatically replace the teardrop apostrophe (') with opening and closing quote marks ( and ).

The Advanced Typography plugin rules are sourced from the typograf library.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="advanced-typography">

<h3>Using the Advanced Typography plugin</h3>

<ol>
<li>Select the text of the short narrative below.</li>
<li>Press the typography toolbar button to run the <em>Advanced Typography</em> plugin’s en-US typography rules.</li>
<li>See the text change from typewriter-centric typesetting to typographer-friendly typesetting.</li>
</ol>

<h3>Short narrative</h3>

<p>"It's over there", she said.</p>

<p>"No. There" -- -> -- she pointed.</p>

<p>"Got it", he said.</p>

<p>He smiled as he looked down at the simple but striking image. "So, I presume the next step is to (c) this?"</p>

<p>"Nah, that happens automatically. We need a full-blown (tm). And that takes... lawyers."</p>

<p>"Oh. Well" -- he started back towards her desk -- "I guess I'd better call Sarah."</p>

<p>She -> back to the table he'd grabbed the design from. "The <code>8-bit and "gloriously proud of it"</code> version is also back there. Sarah will need that as well, and all the sample product packaging using both designs."</p>

<p>He turned back, grabbed the extra sheet, and headed back to his office. <em>[ This sentence needs work. Something about 10C hotter to reflect his excitement -- ed. ]</em></p>
</textarea>
tinymce.init({
  selector: "textarea#advanced-typography",
  height: 300,
  menu: { tools: { title: 'Tools', items: 'code wordcount typography' }},
  plugins: 'code typography',
  toolbar: 'bold italic | code typography',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
  typography_default_lang: 'en-US',
  typography_langs: [
    'en-US',
    'es',
    'de'
  ],
  typography_rules: [
    'common/punctuation/quote',
    'en-US/dash/main',
    'common/nbsp/afterParagraphMark',
    'common/nbsp/afterSectionMark',
    'common/nbsp/afterShortWord',
    'common/nbsp/beforeShortLastNumber',
    'common/nbsp/beforeShortLastWord',
    'common/nbsp/dpi',
    'common/punctuation/apostrophe',
    'common/space/delBeforePunctuation',
    'common/space/afterComma',
    'common/space/afterColon',
    'common/space/afterExclamationMark',
    'common/space/afterQuestionMark',
    'common/space/afterSemicolon',
    'common/space/beforeBracket',
    'common/space/bracket',
    'common/space/delBeforeDot',
    'common/space/squareBracket',
    'common/number/mathSigns',
    'common/number/times',
    'common/number/fraction',
    'common/symbols/arrow',
    'common/symbols/cf',
    'common/symbols/copy',
    'common/punctuation/delDoublePunctuation',
    'common/punctuation/hellip'
  ],
  typography_ignore: [ 'code' ]
});

Basic setup

To add the Advanced Typography plugin to the editor, add typography to the plugins option in the editor configuration.

The Advanced Typography plugin requires a typography_default_lang be configured.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: [ "en-US" ], // Required to set specific typography language rules.
});

Options

The following configuration options affect the behavior of the Advanced Typography plugin.

typography_default_lang

This option gives the user the ability to pre-set a default typography language within the TinyMCE editor. By setting up the typography_default_lang, when the user opens the TinyMCE editor for the first time, it will automatically default to the new default language applied. If this default language is subsequently changed by the user, the new default will be saved and persistent between documents.

By setting up the typography_default_lang, each time the user opens the TinyMCE editor, it will automatically default to the new default language applied.

Example: Using typography_default_langs

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  menu: { tools: { title: 'Tools', items: 'code wordcount typography' }},
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: 'en-US', // Define the default language here, example: 'en-US'
});

typography_ignore

This option tells the Advanced Typography plugin to ignore content within specified HTML tags or within specified HTML tags that have specified attributes.

If an HTML tag or an HTML tag with a specified attribute is added to the typography_ignore array, the Typography plugin’s rules are not applied to material set within that tag.

Type: Array

Possible values: [ '<html-selector>', 'span["<html-selector>"]' ]

Default value: none

Example: Using typography_ignore

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: 'en-US',
  typography_ignore: [ 'code', 'span["lang"]' ]
});

typography_langs

This option sets which languages are available for applying language-specific typography rules.

A user can then select text and select from the available languages. That language’s language-specific typography rules are then applied to the selected text.

Type: Object

Example: Using typography_langs

tinymce.init({
  selector: 'textarea', // change this value according to your html
  plugins: 'typography',
  toolbar: 'typography language',
  typography_default_lang: 'en-US',
  typography_langs: [
    'en-US',
    'es',
    'de'
  ],
});

Currently supported languages

Supported language Language code

Belarusian

be

Bulgarian

bg

Catalan

ca

Czech

cs

Danish

da

Dutch

nl

English (UK)

en-GB

English (US)

en-US

Esperanto

eo

Estonian

et

Finnish

fi

German

de

Greek

el

Hungarian

hu

Irish

ga

Italian

it

Latvian

lv

Norwegian

no

Polish

pl

Romanian

ro

Russian

ru

Servian

sr

Slovak

sk

Slovenian

sl

Spanish

es

Swedish

sv

Turkish

tr

Ukrainian

uk

typography_rules

This option specifies which rules are available to the Advanced Typography plugin.

The Advanced Typography plugin rules are sourced from the typograf library.

All rules supported by the Advanced Typography plugin are documented in the Rules of typograf.

Type: Array

Example: Using typography_rules

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: 'en_US', // This is required to configure the default language used by typography.
  typography_rules: [
    'common/punctuation/quote',
    'en-US/dash/main',
    'common/nbsp/afterParagraphMark',
    'common/nbsp/afterSectionMark',
  ]
});

Toolbar buttons

The Advanced Typography plugin provides the following toolbar buttons:

Toolbar button identifier Description

typopgraphy

Runs the currently active set of Advanced Typography rules over the document or the current selection. Also contains a menu of available language-specific rule sets. When the menu reveal, rather than the icon proper, is pressed, this menu is displayed and a new language-specific rule set can be selected. Note that selecting a language from the menu both switches to that language’s rule set and runs that language’s rule set over the document or the current selection.

These toolbar buttons can be added to the editor using:

The Advanced Typography plugin provides the following menu items:

Menu item identifier Default Menu Location Description

typography

Custom

Provides two sub-menu items: Enhance, which runs the currently active set of Advanced Typography rules over the document or the current selection; and Language, which displays a further menu listing all the language-specific rule sets that can be selected. Note that selecting a language sub-menu item both switches to that language’s rule set and runs that language’s rule set over the document or the current selection.

These menu items can be added to the editor using:

Commands

The Advanced Typography plugin provides the following TinyMCE commands.

Command Description

mceTypography

Run the currently active Advanced Typography rules over either the entire content for the TinyMCE document or the specific text selection highlighted by the user.

Example
tinymce.activeEditor.execCommand('mceTypography');