CSS writing-mode Test Page

1 — vertical-rl: columns stack right-to-left

This paragraph flows in real vertical-rl columns, wrapping to a new column to the left of the previous one as each fills up.
writing-mode: vertical-rl

2 — vertical-lr: columns stack left-to-right

This paragraph flows in real vertical-lr columns, wrapping to a new column to the right of the previous one as each fills up.
writing-mode: vertical-lr

3 — forced line break starts a fresh column

First column.
Second column, even though the first had room to spare.
writing-mode: vertical-rl with <br>

4 — auto height shrinks to the content's own extent

Short auto-height line.
height: auto

4b — auto width shrinks to the content's own extent (issue #761)

One Two Three
vertical-rl, width: auto
One Two Three
vertical-lr, width: auto

5 — flex-direction: row under vertical-rl (main axis = inline = physical Y)

flex row: items stack top-to-bottom

6 — flex-direction: column under vertical-rl/vertical-lr (main axis = block = physical X)

vertical-rl flex column: right-to-left
vertical-lr flex column: left-to-right

7 — table under vertical-rl/vertical-lr (rows = block axis, columns = inline axis)

R1C1R1C2
R2C1R2C2
vertical-rl table: rows stack right-to-left, columns run top-to-bottom
R1C1R1C2
R2C1R2C2
vertical-lr table: rows stack left-to-right, columns run top-to-bottom

7b — caption, <thead>/<tfoot>, collapsed borders and rowspan under vertical-rl (issue #762)

Top captionBottom caption
HeadHead
SpanR1C2
R2C2
Foot
top/bottom caption flank the row axis, <thead>/<tfoot> sit at the row-axis start/end, collapsed borders paint as row-axis-tall/column-axis-wide stripes, and the rowspan cell spans both body rows' combined row-axis extent

7c — multi-row <thead>/<tfoot> reverses its own internal row order under vertical-rl (issue #784)

H1
H2
Body
F1
F2
reading right-to-left (the table's own block-start-to-end order): H1, H2, Body, F1, F2 - topologically-first H1/F1 sit nearest their own group's block-start edge, not swapped with H2/F2 the way an unfixed #784 would paint them
SpanH1
H2
Body
a rowspan cell entirely inside a multi-row <thead> spans the combined row-axis extent of its own two rows, correctly positioned at the reversed (block-start-ward) side rather than only against its opening row

7d — real per-column pagination of a plain-grid vertical table (issue #783)

C1C2C3C4C5C6C7C8C9C10C11C12
a plain grid (no rowspan/colspan/caption/thead-tfoot/collapsed borders) whose own column-axis extent exceeds one page's band relocates the columns that don't fit onto the next page as whole units, rather than moving the entire table - the table's own outer border and each page's own slice-bottom border paint correctly on both pages

8 — text-orientation: real per-character upright/rotated splitting (issue #765)

縦書きテキストPDF2024
mixed (default): CJK upright, Latin/digits rotated
縦書きテキストPDF2024
upright: every character upright
縦書きテキストPDF2024
sideways: every character rotated

9 — block-level and orthogonal-flow children of a vertical box (issue #760)

First.
Second.
Third.
vertical-rl: block children stack right-to-left
This orthogonal child keeps its own horizontal-tb line flow, while the vertical parent places its whole box as one atomic unit.
orthogonal child: horizontal-tb block inside a vertical-rl parent

9b — direction: rtl block children anchor to the physical bottom edge (issue #778)

First.
Second.
Third.
direction: ltr (default): children flush against the top
First.
Second.
Third.
direction: rtl: children flush against the bottom instead

9c — real margin collapse between block-axis-stacked children (issue #776)

First.
Second.
both children margin: 0 20px — the gap between them collapses to 20px (the larger margin), not 40px (their sum)
Nested vertical-rl wrapper with no border/padding on its own block-start edge: its first child's own margin collapses with the wrapper's own edge instead of leaving an internal gap.
box-own-edge collapse: a nested vertical-rl wrapper's own edge collapsing with its first stacked child's margin

10 — text-align inside vertical line flow (issue #768)

Hi there
text-align: left (flush physical top)
Hi there
text-align: right (flush physical bottom)
Hi there
text-align: center
Alpha Beta Gamma Delta Epsilon.
text-align: justify (spreads non-last columns)

10b — Unicode Bidi Algorithm reordering inside vertical line flow (issue #768)

שלום עולם 123 כאן
dir: rtl paragraph; the embedded "123" digit run reorders between its two Hebrew neighbors, same as horizontal RTL text

10c — hyphenation splits a word across a column boundary (issue #768)

antidisestablishmentarianism
hyphens: auto — splits with a real hyphen instead of overflowing

10d — position: absolute/fixed nested inside vertical line flow (issue #768)

Before Positioned after
position: absolute, nested in otherwise inline-only vertical text — reserves no column space and resolves fully against its own nearest positioned ancestor

10e — float column wrap-around inside vertical line flow (issue #768)

Alpha Beta Gamma Delta Epsilon Zeta Eta Theta.
float: right — later columns narrow to avoid the float's own physical footprint, the same way a horizontal line already wraps around a float