---
title: "Typography extension"
description: "Replace common text patterns with typographic characters with the typography extension in your editor. More in the docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/typography"
---

# Typography extension

Replace common text patterns with typographic characters with the typography extension in your editor. More in the docs!

This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.

> **Interactive demo:** [Typography](https://embed.tiptap.dev/preview/Extensions/Typography)

## Install

```bash
npm install @tiptap/extension-typography
```

## Rules

| Name                | Description                                                      |
| ------------------- | ---------------------------------------------------------------- |
| emDash              | Converts double dashes `--` to an emdash `—`.                    |
| ellipsis            | Converts three dots `...` to an ellipsis character `…`           |
| openDoubleQuote     | `“`Smart” opening double quotes.                                 |
| closeDoubleQuote    | “Smart`”` closing double quotes.                                 |
| openSingleQuote     | `‘`Smart’ opening single quotes.                                 |
| closeSingleQuote    | ‘Smart`’` closing single quotes.                                 |
| leftArrow           | Converts `<-` to an arrow `←` .                                  |
| rightArrow          | Converts `->` to an arrow `→`.                                   |
| copyright           | Converts `(c)` to a copyright sign `©`.                          |
| registeredTrademark | Converts `(r)` to registered trademark sign `®`.                 |
| trademark           | Converts `(tm)` to registered trademark sign `™`.                |
| servicemark         | Converts `(sm)` to registered trademark sign `℠`.                |
| oneHalf             | Converts `1/2` to one half `½`.                                  |
| oneQuarter          | Converts `1/4` to one quarter `¼`.                               |
| threeQuarters       | Converts `3/4` to three quarters `¾`.                            |
| plusMinus           | Converts `+/-` to plus/minus sign `±`.                           |
| notEqual            | Converts `!=` to a not equal sign `≠`.                           |
| laquo               | Converts `<<` to left-pointing double angle quotation mark `«`.  |
| raquo               | Converts `>>` to right-pointing double angle quotation mark `»`. |
| multiplication      | Converts `2*3` or `2x3` to a multiplcation sign `2×3`.           |
| superscriptTwo      | Converts `^2` a superscript two `²`.                             |
| superscriptThree    | Converts `^3` a superscript three `³`.                           |

## Keyboard shortcuts

| Command         | Windows/Linux | macOS  |
| --------------- | ------------- | ------ |
| undoInputRule() | Backspace     | Delete |

## Source code

[packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)

### Disabling rules

You can configure the included rules, or even disable a few of them, like shown below.

```js
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    // Disable some included rules
    Typography.configure({
      oneHalf: false,
      oneQuarter: false,
      threeQuarters: false,
    }),
  ],
})
```

### Overriding rules

You can override the output of a rule by passing a string to the option you want to override.

```js
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    // Disable some included rules
    Typography.configure({
      oneHalf: '1 / 2', // this will insert "1 / 2" instead of the default "½"
    }),
  ],
})
```

### RTL smart quotes

The `openDoubleQuote`, `closeDoubleQuote`, `openSingleQuote`, and `closeSingleQuote` rules support RTL-aware quote characters via the `doubleQuotes` and `singleQuotes` options.

Explicit `rtl` configuration takes precedence over `textDirection`. If no explicit config is provided, the extension falls back to `editor.options.textDirection === 'rtl'`. Otherwise, default LTR quotes are used.

> **Note:** Automatic content-based direction detection is intentionally avoided to prevent ambiguity in mixed-direction text.

```js
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    Typography.configure({
      doubleQuotes: { rtl: { open: '”', close: '“' } },
      singleQuotes: { rtl: { open: '’', close: '‘' } },
    }),
  ],
})
```