# text-align

> Applies `text-align` using the logical `start`/`end` keywords so alignment flips automatically under `dir="rtl"`.

```ts
import { textAlign } from "@sdxc/u/typography";
```

Applies `text-align` using the logical `start`/`end` keywords so alignment
flips automatically under `dir="rtl"`. A raw value such as `"left"` or
`"right"` is also accepted for alignment that must stay physical.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.textAlign("end")` | `css({ textAlign: "end" })` |
| `u.textAlign("left")` | `css({ textAlign: "left" })` |

## Examples

### Basic example

Use `textAlign("start")`, `textAlign("center")` or `textAlign("end")` to align the text of an element:

```tsx
<div mix={[maxIs(96), ...]}>
	<div>
		<p mix={[...]}>textAlign("start")</p>
		<p mix={[textAlign("start")]}>
			The ferry left at dawn, and by the time the fog lifted we could see the island.
		</p>
	</div>
	<div>
		<p mix={[...]}>textAlign("center")</p>
		<p mix={[textAlign("center")]}>
			The ferry left at dawn, and by the time the fog lifted we could see the island.
		</p>
	</div>
	<div>
		<p mix={[...]}>textAlign("end")</p>
		<p mix={[textAlign("end")]}>
			The ferry left at dawn, and by the time the fog lifted we could see the island.
		</p>
	</div>
</div>
```

### Justifying text

Use `textAlign("justify")` to stretch each line so the text meets both edges of its box:

```tsx
<div mix={[maxIs(96)]}>
	<p mix={[...]}>textAlign("justify")</p>
	<p mix={[textAlign("justify")]}>
		The ferry left at dawn, and by the time the fog lifted we could see the island: a low green
		line, a lighthouse, and one road climbing from the harbour to the church. Nobody on board
		had been there before, and nobody said a word until we docked.
	</p>
</div>
```

### Following the writing direction

`textAlign("start")` and `textAlign("end")` follow the writing direction, so they flip under `dir="rtl"`; pass `"left"` or `"right"` for an alignment that never flips:

```tsx
<div dir="rtl" lang="ar" mix={[maxIs(96), ...]}>
	<div mix={[...]}>
		<p dir="ltr" mix={[...]}>
			textAlign("start")
		</p>
		<p mix={[textAlign("start")]}>مرحبًا بكم في متجرنا الجديد</p>
	</div>
	<div mix={[...]}>
		<p dir="ltr" mix={[...]}>
			textAlign("left")
		</p>
		<p mix={[textAlign("left")]}>مرحبًا بكم في متجرنا الجديد</p>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.textAlign("end"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.textAlign("end"))
```

## Signature

```ts
u.textAlign(value?: TextAlignValue)
```