0
# Line Height Styling
1

2
The LineHeight extension provides line height styling capabilities, allowing users to control text line spacing for improved readability and layout control with support for all CSS line-height units.
3

4
## Capabilities
5

6
### LineHeight Extension
7

8
Extension for applying line heights to text with full CSS line-height unit and value support.
9

10
```typescript { .api }
11
/**
12
 * Extension for setting line height on specified node types
13
 * Extends textStyle mark with lineHeight attribute
14
 */
15
const LineHeight: Extension<LineHeightOptions>;
16

17
interface LineHeightOptions {
18
  /** 
19
   * Node types where line height can be applied
20
   * @default ['textStyle']
21
   * @example ['heading', 'paragraph', 'textStyle']
22
   */
23
  types: string[];
24
}
25
```
26

27
**Usage Example:**
28

29
```typescript
30
import { Editor } from "@tiptap/core";
31
import { LineHeight } from "@tiptap/extension-text-style/line-height";
32
import { TextStyle } from "@tiptap/extension-text-style/text-style";
33

34
const editor = new Editor({
35
  extensions: [
36
    TextStyle, // Required dependency
37
    LineHeight.configure({
38
      types: ['textStyle', 'paragraph']
39
    })
40
  ]
41
});
42
```
43

44
### Set Line Height Command
45

46
Apply a specific line height to the current text selection.
47

48
```typescript { .api }
49
/**
50
 * Set the line height
51
 * @param lineHeight - CSS line-height value (number, px, em, rem, %, normal, etc.)
52
 * @returns Command result indicating success/failure
53
 */
54
setLineHeight(lineHeight: string): Command;
55
```
56

57
**Usage Examples:**
58

59
```typescript
60
// Unitless numbers (most common, multiplier of font size)
61
editor.commands.setLineHeight("1");      // Tight spacing
62
editor.commands.setLineHeight("1.2");    // Compact spacing
63
editor.commands.setLineHeight("1.5");    // Comfortable reading
64
editor.commands.setLineHeight("2");      // Double spacing
65

66
// Pixel units
67
editor.commands.setLineHeight("20px");
68
editor.commands.setLineHeight("24px");
69

70
// Em units (relative to element's font size)
71
editor.commands.setLineHeight("1.2em");
72
editor.commands.setLineHeight("1.8em");
73

74
// Rem units (relative to root font size)
75
editor.commands.setLineHeight("1.5rem");
76
editor.commands.setLineHeight("2rem");
77

78
// Percentage
79
editor.commands.setLineHeight("120%");
80
editor.commands.setLineHeight("150%");
81

82
// Keywords
83
editor.commands.setLineHeight("normal");  // Browser default
84

85
// Chain with other styling commands
86
editor.chain()
87
  .setLineHeight("1.6")
88
  .setFontSize("16px")
89
  .setFontFamily("Georgia")
90
  .run();
91
```
92

93
### Unset Line Height Command
94

95
Remove line height styling from the current text selection.
96

97
```typescript { .api }
98
/**
99
 * Unset the line height, removing lineHeight attribute and cleaning up empty textStyle marks
100
 * @returns Command result indicating success/failure
101
 */
102
unsetLineHeight(): Command;
103
```
104

105
**Usage Example:**
106

107
```typescript
108
// Remove line height and clean up empty styling
109
editor.commands.unsetLineHeight();
110

111
// Chain removal with other operations
112
editor.chain()
113
  .unsetLineHeight()
114
  .setFontSize("16px")
115
  .run();
116
```
117

118
## HTML Processing
119

120
### Line Height Parsing
121

122
The LineHeight extension includes straightforward HTML parsing:
123

124
- **Direct Style Reading**: Reads `line-height` value directly from `element.style.lineHeight`
125
- **Unit Preservation**: Maintains original CSS units and format
126
- **Unitless Support**: Properly handles unitless number values
127
- **Computed Value**: Uses computed line-height value from the DOM
128

129
### Rendering Output
130

131
- **CSS Format**: Renders as `style="line-height: {value}"` attribute
132
- **Clean Output**: Only adds line-height attribute when a value is present
133
- **Format Preservation**: Maintains exact line-height string including units or unitless format
134

135
## Type System Integration
136

137
### Module Augmentation
138

139
The LineHeight extension augments TipTap's type system:
140

141
```typescript
142
// Extends core Commands interface
143
declare module '@tiptap/core' {
144
  interface Commands<ReturnType> {
145
    lineHeight: {
146
      setLineHeight: (lineHeight: string) => ReturnType;
147
      unsetLineHeight: () => ReturnType;
148
    }
149
  }
150
}
151

152
// Extends TextStyleAttributes interface  
153
declare module '@tiptap/extension-text-style' {
154
  interface TextStyleAttributes {
155
    lineHeight?: string | null;
156
  }
157
}
158
```
159

160
## Configuration Examples
161

162
### Basic Configuration
163

164
```typescript
165
import { LineHeight } from "@tiptap/extension-text-style/line-height";
166

167
const lineHeightExtension = LineHeight.configure({
168
  types: ['textStyle']
169
});
170
```
171

172
### Extended Node Type Support
173

174
```typescript
175
const lineHeightExtension = LineHeight.configure({
176
  types: ['textStyle', 'heading', 'paragraph']
177
});
178
```
179

180
This allows line heights to be applied directly to headings and paragraphs in addition to inline text styling.
181

182
## Line Height Value Examples
183

184
### Unitless Values (Recommended)
185

186
Unitless values are multipliers of the element's font size and are the most flexible:
187

188
```typescript
189
// Tight line spacing (for headings)
190
editor.commands.setLineHeight("1");      // 100% of font size
191
editor.commands.setLineHeight("1.1");    // 110% of font size
192

193
// Normal reading (for body text)
194
editor.commands.setLineHeight("1.4");    // Good for small text
195
editor.commands.setLineHeight("1.5");    // Standard reading comfort
196
editor.commands.setLineHeight("1.6");    // Generous spacing
197

198
// Loose spacing (for accessibility)
199
editor.commands.setLineHeight("1.8");    // Extra spacing
200
editor.commands.setLineHeight("2");      // Double spacing
201
```
202

203
### Absolute Units
204

205
```typescript
206
// Pixel values (fixed spacing)
207
editor.commands.setLineHeight("18px");   // Tight
208
editor.commands.setLineHeight("24px");   // Normal
209
editor.commands.setLineHeight("30px");   // Loose
210

211
// Point values (print-oriented)
212
editor.commands.setLineHeight("14pt");
213
editor.commands.setLineHeight("18pt");
214
```
215

216
### Relative Units
217

218
```typescript
219
// Em units (relative to element font size)
220
editor.commands.setLineHeight("1.2em");  // 120% of font size
221
editor.commands.setLineHeight("1.5em");  // 150% of font size
222

223
// Rem units (relative to root font size)
224
editor.commands.setLineHeight("1.5rem"); // Fixed based on root
225
editor.commands.setLineHeight("2rem");   // Double root size
226

227
// Percentages
228
editor.commands.setLineHeight("120%");   // 120% of font size
229
editor.commands.setLineHeight("150%");   // 150% of font size
230
```
231

232
## Typography Best Practices
233

234
### Recommended Line Heights
235

236
```typescript
237
// For different content types
238
editor.commands.setLineHeight("1.2");    // Headlines/headings
239
editor.commands.setLineHeight("1.4");    // Small body text (12-14px)
240
editor.commands.setLineHeight("1.5");    // Normal body text (16px)
241
editor.commands.setLineHeight("1.6");    // Large body text (18px+)
242
editor.commands.setLineHeight("1.8");    // Accessibility/readability focus
243
```
244

245
### Responsive Line Heights
246

247
```typescript
248
// Use unitless values for responsive design
249
editor.commands.setLineHeight("1.4");    // Scales with font size changes
250

251
// Avoid fixed pixel values for responsive text
252
// editor.commands.setLineHeight("20px"); // Not recommended for responsive
253
```
254

255
## Accessibility Considerations
256

257
For improved accessibility and readability:
258

259
```typescript
260
// WCAG recommends at least 1.5x line height for body text
261
editor.commands.setLineHeight("1.5");
262

263
// For users with dyslexia, higher line heights can help
264
editor.commands.setLineHeight("1.6");
265
editor.commands.setLineHeight("1.8");
266
```