Vertical Writing Systems on the Web: writing-mode, text-orientation and Unicode

Vertical writing is a page-layout and typographic mode, not a different encoding for the same text. East Asian vertical text can place ideographs upright while rotating certain Latin runs and punctuation according to CSS and Unicode properties. A correct implementation must keep logical character order intact while adapting line progression, orientation, measurement and interactive behavior.

Differentiate inline progression from block progression

CSS writing-mode: vertical-rl arranges text inline vertically with successive block lines progressing from right to left. vertical-lr uses the opposite block progression. These modes affect layout coordinates and physical sides, not the Unicode code points stored in the text.

A page may mix horizontal headings and vertical articles. Setting transform:rotate(90deg) on an otherwise horizontal paragraph is not equivalent: it rotates the entire painted box, including interaction geometry, without giving the layout engine vertical flow rules.

Text orientation is character- and run-dependent

CSS text-orientation controls orientation within vertical text. The mixed value can use Unicode vertical orientation data to keep appropriate CJK characters upright while orienting others differently. upright and sideways express alternative treatments.

Do not assume all Latin characters must rotate individually or that every punctuation mark retains its horizontal glyph. The chosen font may expose vertical alternates and vertical metrics. Actual results depend on font coverage, browser support and properties.

Unicode Vertical_Orientation is metadata, not another alphabet

Unicode defines Vertical_Orientation data for characters used in vertical contexts. Font and layout engines may select glyph substitutions or orientation behavior accordingly. The same encoded U+3001 IDEOGRAPHIC COMMA can have a different positioned glyph in vertical layout.

Changing source text to look-alike punctuation code points to force one specific screenshot risks breaking copy/paste and search. Prefer orientation-aware layout and glyph selection; the markup and font should describe presentation without rewriting semantic text.

Text-combine-upright can group short horizontal strings

East Asian vertical design sometimes uses tate-chu-yoko: a small group such as two digits arranged together horizontally within a vertical text column. CSS text-combine-upright can express combined treatment for appropriate inline content, with support and limitations depending on implementations.

This is different from adding hard line breaks between digits or using a single ligature character. Preserve the original logical digit sequence and verify selection and accessible reading order, especially when numbers are dynamically generated.

CSS logical properties avoid coordinate mistakes

In vertical writing, margin-inline-start can correspond to a physical side different from horizontal text. Logical block and inline properties allow layout rules to adapt to writing modes without a proliferation of hardcoded top/left coordinates.

Before adjusting padding or alignment, identify whether the desired position is block-start, block-end, inline-start or inline-end. A physical CSS property that works for horizontal Western layouts may fail for vertical Japanese or mixed writing systems.

Line breaking and punctuation constraints remain active

A vertical paragraph still needs Unicode line-breaking decisions, language-specific punctuation behavior and line length measurements. Japanese typography often restricts closing punctuation from appearing at the start of a new column and opening punctuation from ending one.

Use CSS line-break and related text properties where suitable, but test actual paragraphs. One short sample containing only ideographs cannot expose problems with punctuation, embedded Latin abbreviations or emoji.

Font metrics and shaping influence vertical advance

A font may provide vertical metrics and substitutions in OpenType tables such as vhea, vmtx and vertical features. Some fonts are tuned for horizontal Latin use and lack suitable data for polished vertical typesetting.

If spacing or rotation looks wrong, compare browser computed styles, actual font binary and shaping output. Do not repair it by altering Unicode scalars; a font fallback may be sufficient to create the observed change.

Bidirectional text and vertical writing are separate algorithms

Text direction determines ordering of characters and bidirectional runs, while writing-mode defines axes along which inline and block layout progresses. An RTL Arabic segment embedded in a vertical document is not solved by merely switching vertical-rl to vertical-lr.

Keep language and direction metadata explicit in HTML. Test numbers, Latin names, RTL quotations and vertical Japanese within a defined layout context so a rendering difference can be assigned to the right subsystem.

Selection, accessibility and print require verification

Vertical text should remain selectable, copy as logical Unicode order, and work under keyboard navigation and assistive technology. Some selection rectangles and caret placement behave differently from horizontal layout.

Include zoom, narrow viewport, print/PDF output and touch selection in regression tests. A CSS transform can visually approximate the effect yet produce unusable hit targets; prefer native writing-mode support when available.

Reproducible specimen and observable boundaries

The following controlled example tests one narrowly defined distinction. It cannot alone establish correctness of a complete multilingual application. Preserve the original Unicode scalar values, identify any normalization or transliteration performed, and separately inspect font rendering, selection, data serialization and user-interface behavior.

<article lang="ja" class="vertical">
  <p>縦書きの文章、2026年。</p>
  <p><span class="date">12</span>月のお知らせ</p>
</article>
<style>
.vertical { writing-mode:vertical-rl; text-orientation:mixed; block-size:24rem; }
.vertical .date { text-combine-upright:all; }
.vertical { padding-inline:1rem; margin-block-start:1rem; }
</style>
<!-- Source characters remain in logical Unicode order. -->

For interop reports, record the input stream, chosen language or locale (if meaningful), browser or runtime version, relevant font files and output. When the outcome is only visually different, avoid changing source characters until the rendering or layout stage responsible for the mismatch has been isolated.

Technical comparison: data, algorithms and presentation

Examples in this table represent distinct test contracts. Exact Unicode scalar equivalence is stronger than visual similarity, and an application may legitimately tailor text processing to language or product needs. Do not generalize one font's glyph appearance as a universal Unicode requirement.

Conformance and regression testing

1. Block direction. Preserve a fixture containing writing-mode:vertical-rl. Specify the Unicode version, application environment and expected observations. Verify that columns progress right-to-left; compare the actual code-point stream separately from appearance.
2. Glyph orientation. Preserve a fixture containing text-orientation:mixed. Specify the Unicode version, application environment and expected observations. Verify that cJK vs Latin run treatment; compare the actual code-point stream separately from appearance.
3. Short digits. Preserve a fixture containing text-combine-upright:all. Specify the Unicode version, application environment and expected observations. Verify that tate-chu-yoko where supported; compare the actual code-point stream separately from appearance.
4. Logical spacing. Preserve a fixture containing padding-inline-start. Specify the Unicode version, application environment and expected observations. Verify that writing-mode-adaptive geometry; compare the actual code-point stream separately from appearance.
5. Vertical glyphs. Preserve a fixture containing vhea/vmtx and substitutions. Specify the Unicode version, application environment and expected observations. Verify that font-dependent metrics and forms; compare the actual code-point stream separately from appearance.

For broader coverage, exercise known difficult cases rather than only ASCII text: decomposed accents, supplementary characters, mixed direction, language-specific scripts and emoji sequences where relevant. Include expected negative results and document any product-specific tailoring. Keep fixtures stable and versioned so future Unicode or browser updates remain diagnosable.

Interpreting false positives

A difference is not automatically a failure. Some font and platform variation is permitted; conversely, two identical screenshots may hide distinct scalar streams. A reliable defect report cites the applicable rule, names the observed implementation layer, and demonstrates how its contract is violated without silently discarding the original text.

Primary standards and authoritative implementation documentation

These references define the relevant Unicode properties, web layout semantics or platform APIs. Unicode data files and browser conformance can evolve independently; record the tested version rather than presuming that every installed system has identical support.

• CSS Writing Modes Level 4 — consult the primary specification or implementation reference for precise conformance wording, versions, property definitions and edge conditions.
• CSS Text Level 3 — consult the primary specification or implementation reference for precise conformance wording, versions, property definitions and edge conditions.
• Unicode Vertical Orientation UAX #50 — consult the primary specification or implementation reference for precise conformance wording, versions, property definitions and edge conditions.
• OpenType Vertical Metrics — consult the primary specification or implementation reference for precise conformance wording, versions, property definitions and edge conditions.
• W3C Japanese Layout Requirements — consult the primary specification or implementation reference for precise conformance wording, versions, property definitions and edge conditions.

Related technical references

Within the Multilingual Text & Input Systems virtual silo, these already published studies provide additional context for source text, rendering, editing and interchange:

• unicode line breaking scripts
• font metrics line height
• cross platform text rendering
• right to left text web interfaces