[ @sdxc/u/typography ]

text-align

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

textAlign("start")

The ferry left at dawn, and by the time the fog lifted we could see the island.

textAlign("center")

The ferry left at dawn, and by the time the fog lifted we could see the island.

textAlign("end")

The ferry left at dawn, and by the time the fog lifted we could see the island.

<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:

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.

<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:

textAlign("start")

مرحبًا بكم في متجرنا الجديد

textAlign("left")

مرحبًا بكم في متجرنا الجديد

<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.

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

Responsive design

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

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

Signature

u.textAlign(value?: TextAlignValue)