# Text

```ts
import { Text } from 'cx/svg';
```



The `Text` component renders SVG `text` as a [bounded object](./svg#bounded-objects). The initial cursor position is the **top-left corner** of the bounding box. Use `textAnchor` and `dominantBaseline` attributes to position the text within its bounds.

This example demonstrates all 9 text alignment combinations using `anchors`, `textAnchor`, and `dominantBaseline`:

```tsx
import { Svg, Rectangle, Text } from "cx/svg";

export default (
  <div class="flex flex-wrap gap-2">
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="0 1 1 0" style="fill: lightblue" />
      <Text anchors="0 1 1 0" textAnchor="start" dominantBaseline="hanging">
        Top-left
      </Text>
    </Svg>
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="0 1 1 0.5" style="fill: lightblue" />
      <Text anchors="0 1 1 0.5" textAnchor="middle" dominantBaseline="hanging">
        Top-center
      </Text>
    </Svg>
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="0 1 1 1" style="fill: lightblue" />
      <Text anchors="0 1 1 1" textAnchor="end" dominantBaseline="hanging">
        Top-right
      </Text>
    </Svg>

    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="0.5 1 1 0" style="fill: lightblue" />
      <Text anchors="0.5 1 1 0" textAnchor="start" dominantBaseline="middle">
        Middle-left
      </Text>
    </Svg>
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="0.5 1 1 0.5" style="fill: lightblue" />
      <Text anchors="0.5 1 1 0.5" textAnchor="middle" dominantBaseline="middle">
        Center
      </Text>
    </Svg>
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="0.5 1 1 1" style="fill: lightblue" />
      <Text anchors="0.5 1 1 1" textAnchor="end" dominantBaseline="middle">
        Middle-right
      </Text>
    </Svg>

    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="1 1 1 0" style="fill: lightblue" />
      <Text anchors="1 1 1 0" textAnchor="start">
        Bottom-left
      </Text>
    </Svg>
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="1 1 1 0.5" style="fill: lightblue" />
      <Text anchors="1 1 1 0.5" textAnchor="middle">
        Bottom-center
      </Text>
    </Svg>
    <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
      <Rectangle anchors="1 1 1 1" style="fill: lightblue" />
      <Text anchors="1 1 1 1" textAnchor="end">
        Bottom-right
      </Text>
    </Svg>
  </div>
);

```

## Alignment Guide

**Horizontal alignment** is controlled by `textAnchor`:

- `textAnchor="start"` — align to left edge
- `textAnchor="middle"` — center horizontally
- `textAnchor="end"` — align to right edge

**Vertical alignment** is controlled by `dominantBaseline`:

- `dominantBaseline="hanging"` — top alignment (text hangs below the anchor)
- `dominantBaseline="middle"` — center vertically
- Default (no value) — bottom alignment (baseline sits on the anchor)

## Configuration

| Property           | Type            | Description                                                                       |
| ------------------ | --------------- | --------------------------------------------------------------------------------- |
| `anchors`          | `string/number` | Position within parent bounds. Format: `"t r b l"`. See [Svg](./svg) for details. |
| `offset`           | `string/number` | Translate edges in pixels. Format: `"t r b l"`. See [Svg](./svg) for details.     |
| `margin`           | `string/number` | CSS-like margin. See [Svg](./svg) for details.                                    |
| `textAnchor / ta`       | `string`        | Horizontal alignment: `"start"`, `"middle"`, or `"end"`.                     |
| `dominantBaseline / db` | `string`        | Vertical alignment: `"hanging"`, `"middle"`, `"auto"`, etc.                  |
| `dx`               | `string`        | Horizontal offset from the anchor point.                                          |
| `dy`               | `string`        | Vertical offset from the anchor point.                                            |
| `fill`             | `string`        | Text fill color.                                                                  |
| `colorIndex`       | `number`        | Index in the default color palette.                                               |