0
# AttributedString Utilities
1

2
Core utilities for creating styled text. AttributedString is the fundamental data structure representing text with styling attributes applied to specific ranges.
3

4
## Capabilities
5

6
### String Creation
7

8
Create attributed strings from text fragments with styling information.
9

10
```typescript { .api }
11
/**
12
 * Create attributed string from text fragments
13
 * @param fragments - Array of text fragments with optional attributes
14
 * @returns Complete attributed string with merged runs
15
 */
16
function fromFragments(fragments: Fragment[]): AttributedString;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { fromFragments } from "@react-pdf/textkit";
23

24
const fragments = [
25
  { string: "Hello ", attributes: { fontSize: 16, color: "black" } },
26
  { string: "World", attributes: { fontSize: 18, color: "blue" } },
27
  { string: "!", attributes: { fontSize: 16, color: "red" } }
28
];
29

30
const attributedString = fromFragments(fragments);
31
```
32

33
## Core Types
34

35
```typescript { .api }
36
interface AttributedString {
37
  string: string;
38
  syllables?: string[];
39
  runs: Run[];
40
  box?: Rect;
41
  decorationLines?: DecorationLine[];
42
  overflowLeft?: number;
43
  overflowRight?: number;
44
  xAdvance?: number;
45
  ascent?: number;
46
}
47

48
interface Fragment {
49
  string: string;
50
  attributes?: Attributes;
51
}
52

53
interface Run {
54
  start: number;
55
  end: number;
56
  attributes: Attributes;
57
  glyphIndices?: number[];
58
  glyphs?: Glyph[];
59
  positions?: Position[];
60
  xAdvance?: number;
61
  height?: number;
62
  descent?: number;
63
}
64
```