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

Advanced Typography plugin rules

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

However, the Advanced Typography plugin only uses a sub-set of all the rules available in this library.

Of the library’s full Rules of typograf list, the Advanced Typography plugin uses the following:

common/space/delBeforePunctuation
common/space/afterComma
common/space/afterColon
common/space/delBetweenExclamationMarks
common/space/afterExclamationMark
common/space/afterQuestionMark
common/space/afterSemicolon
common/space/beforeBracket
common/space/bracket
common/space/delBeforeDot
common/space/delBeforePercent
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
common/nbsp/afterSectionMark
common/punctuation/quote
en-US/dash/main
common/nbsp/afterParagraphMark
common/nbsp/afterShortWord
common/nbsp/beforeShortLastNumber
common/nbsp/beforeShortLastWord
common/nbsp/dpi
common/punctuation/apostrophe

No other typograf rules are used and the Advanced Typography plugin cannot be configured to use any typograf rules other than those listed above.

The Advanced Typography plugin affects text only. It does not modify the underlying HTML markup.

Interactive example

TinyMCE
HTML
JS
Edit on CodePen

<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 Advanced Typography 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>

"It's over there", she said.

"No. There" -- -> -- she pointed.

"Got it", he said.

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

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

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

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

He turned back, grabbed the extra sheet, and headed back to his office. [ This sentence needs work. Something about 10C hotter to reflect his excitement -- ed. ]

<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

Supported language

Language code

Belarusian

Bulgarian

Catalan

Czech

Danish

Dutch

English (UK)

en-GB

English (US)

en-US

Esperanto

Estonian

Finnish

German

Greek

Hungarian

Irish

Italian

Latvian

Norwegian

Polish

Romanian

Russian

Servian

Slovak

Slovenian

Spanish

Swedish

Turkish

Ukrainian

`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',
  ]
});

The Advanced Typography plugin provides the following toolbar buttons:

Toolbar button identifier Description

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.

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 toolbar configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

The Advanced Typography plugin provides the following menu items:

Menu item identifier Default Menu Location Description

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.

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:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

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.

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');

Advanced Typography plugin

Advanced Typography plugin rules

Interactive example

Basic setup

Options

typography_default_lang

Example: Using typography_default_langs

typography_ignore

Example: Using typography_ignore

typography_langs

Example: Using typography_langs