vi

1vi is 1% of the viewport along the inline axis, the direction text runs in. In ordinary horizontal text that axis is horizontal, so vi equals vw: 128px per 10 in a window 1280px wide. In vertical text it turns into the height.

The open question is whose writing mode decides, and the documentation does not agree with itself. MDN and the summary table in the specification point at the writing mode of the root. The definition of vi, in the editor’s draft of the specification read on 2026-11-04, says the inline axis of the box. Chromium 156 on Linux, measured with the test named “vi and vb” in tests/claims.spec.ts, takes the box’s side and uses the writing mode of the element the unit is written on, after the cascade and inheritance, whether the element sets it or inherits it. A vertical element on a horizontal page gets width: 10vi as 80px in a window 800px tall. A horizontal element inside a vertical parent gets 128px at 1280px wide. Direction plays no part: direction: rtl changes nothing. The same measurement, repeated in tests/browsers.spec.ts for all four prefixes, gave the same numbers in Firefox 157 and WebKit 27.2, so the three engines agree with each other and with the definition, not with the summary table.

Because writing-mode is inherited, the two readings give the same result wherever no element overrides the value of the root. A child of a vertical root measured 80px for width: 10vi, which is what the specification says too. They part ways when horizontal and vertical text share a document, so test that case in each browser you support before building a layout on it.