---
title: "Advanced Typography plugin"
description: "Automatically or interactively replace typewriter-centric characters with characters preferred by typesetters."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 2432
---
# Advanced Typography plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing/).
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](https://github.com/typograf/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](https://github.com/typograf/typograf/blob/dev/docs/RULES.en-US.md) 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.

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

## Interactive example

**Example**

```js
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.

> **Note:** The Advanced Typography plugin requires a `typography_default_lang` be configured.
For example:

```js
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.
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## 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`

```js
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`

**Default value:** none

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

### Example: Using `typography_ignore`

```js
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`

```js
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](https://github.com/typograf/typograf) library.

All rules supported by the Advanced Typography plugin are documented in the [Rules of typograf](https://github.com/typograf/typograf/blob/dev/docs/RULES.en-US.md).

**Type:** `Array`

### Example: Using `typography_rules`

```js
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 [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Advanced Typography plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | 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:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## 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
```js
tinymce.activeEditor.execCommand('mceTypography');
```