INTERNATIONAL LAYOUT · COMPLETE IN 0.3

Logical properties and writing modes

Build one component that follows left-to-right, right-to-left, horizontal, vertical, and sideways writing systems without rewriting its physical edges.

✓

The release gate now covers direction, all five standard writing modes, glyph orientation, Unicode bidi controls, upright text composition, and the logical spacing, inset, sizing, border, radius, float, clear, and scroll utilities that respond to them.

DIRECTION FIRST

Keep document meaning in markup

For HTML content, prefer the semantic dir attribute and use bdi or bdo for isolated text fragments. Use direction utilities when styling generated structures, non-HTML documents, or tightly controlled components.

component.coord

<article dir="rtl" class="co-ps-6 co-border-s-2">
  <h2>واجهة متعددة اللغات</h2>
  <p>Logical start follows the document direction.</p>
</article>

<span>Order ID: <bdi>INV-2048</bdi></span>

AI rule

Do not add co-direction-rtl merely to mirror a visual layout. Direction describes reading order; use the rtl: variant only for conditional styling inside an established RTL context.

WRITING MODE

Choose block flow explicitly

Writing mode changes which physical dimension represents inline size and block size. Logical utilities follow that mapping automatically.

ClassGenerated CSS and purpose

co-writing-horizontal-tbwriting-mode: horizontal-tb; Horizontal lines; blocks flow top to bottom

co-writing-vertical-rlwriting-mode: vertical-rl; Vertical lines; blocks flow right to left

co-writing-vertical-lrwriting-mode: vertical-lr; Vertical lines; blocks flow left to right

co-writing-sideways-rlwriting-mode: sideways-rl; Sideways text; blocks flow right to left

co-writing-sideways-lrwriting-mode: sideways-lr; Sideways text; blocks flow left to right

VERTICAL COMPONENT

Compose with logical dimensions and edges

The same inline, block, padding, inset, border, and logical-radius classes remain meaningful when the block axis rotates.

component.coord

<section class="co-writing-vertical-rl co-inline-48 co-block-64 co-pbs-4 co-pbe-8 co-border-s-2 co-rounded-se-lg">
  <h2 class="co-text-orientation-upright">縦書き</h2>
  <p>Logical layout follows the active writing mode.</p>
</section>

BIDIRECTIONAL TEXT

Isolate before overriding

Mixed scripts usually need isolation, not a forced override. Overrides deliberately ignore inherent character direction and should be rare.

ClassBehavior

co-direction-ltr / co-direction-rtlSet the inline base direction

co-unicode-bidi-normalUse ordinary bidirectional reordering

co-unicode-bidi-embedCreate a directional embedding

co-unicode-bidi-isolateIsolate the fragment from surrounding directionality

co-unicode-bidi-overrideOverride character direction using the chosen base direction

co-unicode-bidi-isolate-overrideCombine isolation and directional override

co-unicode-bidi-plaintextInfer each paragraph direction from its content

GLYPH ORIENTATION

Control text inside vertical lines

Use co-text-orientation-mixed, co-text-orientation-upright, or co-text-orientation-sideways. Short horizontal runs can be combined into one upright glyph cell.

component.coord

<p class="co-writing-vertical-rl co-text-orientation-mixed">
  平成<span class="co-text-combine-digits-2">20</span>年
</p>

<!-- Available composition values -->
<span class="co-text-combine-none">12</span>
<span class="co-text-combine-all">AB</span>
<span class="co-text-combine-digits-2">12</span>
<span class="co-text-combine-digits-3">123</span>
<span class="co-text-combine-digits-4">2026</span>

FLOW-RELATIVE MAP

Utilities that follow the writing system

01
Spacing: ps/pe/pbs/pbe and ms/me/mbs/mbe.
02
Positioning: inset-s/e/bs/be and compatibility start/end.
03
Sizing: inline, block, and their min/max forms.
04
Borders: border-s/e/bs/be plus logical rounded-s/e/ss/se/es/ee.
05
Scrolling: logical scroll margin and padding use the same edge suffixes.

AI GENERATION CONTRACT

Track semantics and browser boundaries

Agents can query the complete Layout family and the Logical properties capability before generating internationalized components.

Prefer semantic direction markup for HTML text.
Prefer logical edges and dimensions once direction or writing mode can vary.
Use bidi isolation for untrusted or unknown-direction fragments; do not infer an override.
Treat sideways writing and digit composition as progressive enhancement.
Keep every utility literal so the scanner and reviewers can track the writing-system decision.

Previous← Preflight NextLayout →