[ @sdxc/u/typography ]

tab-size

Applies tab-size.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.tabSize()`	`css({ tabSize: "2" })`
`u.tabSize(4)`	`css({ tabSize: "4" })`
`u.tabSize("4ch")`	`css({ tabSize: "4ch" })`

Examples

Basic example

Use tabSize(n) to set how many spaces wide a tab character is drawn in preformatted text; tabSize() uses 2:

tabSize()

if (ready) {
	if (loud) {
		announce();
	}
	start();
}

tabSize(8)

if (ready) {
	if (loud) {
		announce();
	}
	start();
}

<div mix={[...]}>
	<div>
		<p mix={[...]}>tabSize()</p>
		<pre mix={[tabSize(), ...]}>
			{"if (ready) {\n\tif (loud) {\n\t\tannounce();\n\t}\n\tstart();\n}"}
		</pre>
	</div>
	<div>
		<p mix={[...]}>tabSize(8)</p>
		<pre mix={[tabSize(8), ...]}>
			{"if (ready) {\n\tif (loud) {\n\t\tannounce();\n\t}\n\tstart();\n}"}
		</pre>
	</div>
</div>

Using a length

Pass a length, like tabSize("6rem"), to set tab stops in any unit:

City	High	Low
Lisbon	24°	17°
Oslo	12°	4°
Cairo	33°	21°

<pre mix={[tabSize("6rem"), ...]}>
	{"City\tHigh\tLow\nLisbon\t24°\t17°\nOslo\t12°\t4°\nCairo\t33°\t21°"}
</pre>

Applying on a state

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

u.hover(u.tabSize())

Responsive design

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

u.at("md", u.tabSize())

Signature

u.tabSize(value?: number | (string & {}))