---
title: "Text direction & RTL support"
description: "Learn how to use text direction controls for RTL languages and bidirectional content with this comprehensive Tiptap example."
canonical_url: "https://tiptap.dev/docs/examples/basics/text-direction"
---

# Text direction & RTL support

Learn how to use text direction controls for RTL languages and bidirectional content with this comprehensive Tiptap example.

Tiptap includes built-in support for right-to-left (RTL) languages and bidirectional text. This example demonstrates how to set global text direction and control direction on individual nodes.

## Features

- **Global direction control**: Set the default text direction for all content (`ltr`, `rtl`, or `auto`)
- **Per-node direction**: Override direction for specific nodes using commands
- **Bidirectional text**: Properly render mixed LTR and RTL content
- **Multiple languages**: Support for English, Arabic, Hebrew, and other languages

The `auto` setting is particularly useful for bidirectional content, as it automatically detects the text direction based on the first strong directional character in each node.

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

## How to use

### Set global direction

Configure the editor with a default text direction:

```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
  textDirection: 'auto', // or 'ltr', 'rtl'
})
```

### Control direction with commands

Override direction for specific content:

```js
// Set RTL direction on selected text
editor.commands.setTextDirection('rtl')

// Set LTR direction on selected text
editor.commands.setTextDirection('ltr')

// Use automatic detection
editor.commands.setTextDirection('auto')

// Remove direction override
editor.commands.unsetTextDirection()
```

### Use with frameworks

The text direction can be changed dynamically by recreating the editor with a new `textDirection` option. This is demonstrated in the example above with React's `useEditor` hook.