How to Inspect and Control CSS text-orientation in Vertical Layouts in Safari Web Inspector

Modern responsive web design increasingly embraces creative international typography, sidebar banners, vertical navigation rails, and multilingual East Asian scripts (such as Japanese, Chinese, and Korean). When transitioning text flow from traditional horizontal lines to vertical columns using writing-mode: vertical-rl or vertical-lr, web designers frequently encounter typographic misalignment. By default, Latin alphabet characters, numbers, and punctuation are rotated 90 degrees clockwise to align with vertical text progression, whereas East Asian characters remain naturally upright. When designing callouts, vertical badges, or bilingual headings where Latin characters must stand upright alongside vertical glyphs, the text-orientation CSS property provides definitive control. Safari Web Inspector delivers comprehensive visual tools to inspect vertical typographic flow, audit character orientation, and debug WebKit layout engine behaviour.

Understanding the text-orientation Property and Vertical Writing Modes

The text-orientation property operates exclusively within block containers where the writing-mode is set to a vertical orientation (vertical-rl or vertical-lr). It has no effect on conventional horizontal text flows. Understanding its primary values is essential for mastering vertical typography:

• mixed: The default value. Rotates horizontal scripts (such as Latin, Greek, Cyrillic, and Arabic numerals) 90 degrees clockwise, while preserving the upright orientation of vertical scripts (such as Han ideographs, Hiragana, and Katakana).
• upright: Forces all glyphs—including Latin letters and numbers—to stand upright in vertical text lines. This value is widely used for vertical book spines, poster designs, architectural signage, and stylized acronyms. Note that shaping for cursive scripts (such as Arabic) is disabled in this mode.
• sideways: Rotates the entire text line—including East Asian characters—90 degrees clockwise as if the horizontal line were tilted onto its side.

Configuring Safari Web Inspector for Vertical Typography Auditing

To inspect text-orientation rules in Safari, open Safari Web Inspector using Option + Command + I (or secondary-click the vertical element and choose Inspect Element).

To inspect rendering on an iPad or iPhone, connect your device to your Mac via USB, open desktop Safari, and select your mobile device from the Develop menu.

Ensure that your target container establishes a valid vertical writing context in its stylesheet before evaluating text-orientation:

.vertical-banner {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Inspecting and Testing text-orientation in the Styles Panel

Use Web Inspector to experiment interactively with orientation settings and observe real-time layout reflows:

1. In the Elements DOM tree, select the container holding your vertical text.
2. In the right sidebar, open the Styles panel.
3. Locate the rule governing the vertical typography, or add declarations inside the inline element style block:

   .sidebar-label {
     writing-mode: vertical-rl;
     text-orientation: upright;
     letter-spacing: 0.15em;
   }

4. Toggle text-orientation: upright; on and off. Notice how Latin text instantly transitions between standing vertically stacked (each letter upright) and lying sideways (rotated 90 degrees).
5. Open the Computed tab and search for text-orientation to verify that the property resolves cleanly without conflicting user-agent stylesheet overrides.

Pairing text-orientation with text-combine-upright

A classic design challenge in vertical typography is the treatment of two-digit numbers, dates, and abbreviations (such as “24”, “AM”, or “No.”). Setting text-orientation: upright causes “2” and “4” to stack vertically on top of each other, which can impair readability.

To resolve this, combine vertical typography with the text-combine-upright property (Tate-chu-yoko in Japanese typography), which packs horizontal characters into the space of a single vertical character box:

.vertical-date-badge {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.vertical-date-badge .year {
  /* Latin letters stand upright individually */
  text-orientation: upright;
}

.vertical-date-badge .day {
  /* Compresses two digits into a single upright character frame */
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
}

In Safari Web Inspector, select the inner .day span and inspect the Metrics panel to observe how WebKit automatically synthesizes a compressed glyph box within the vertical line column.

Auditing Line Heights and Baseline Alignment

In horizontal typography, text flows along a horizontal baseline (with ascenders and descenders). In vertical writing modes with upright text orientation, WebKit aligns glyphs along a central vertical baseline.

Inspect the computed typographic metrics in Web Inspector:

1. Check the computed line-height value. In vertical layouts, line-height governs the horizontal spacing between vertical columns (analogous to column pitch).
2. Ensure adequate line height is declared so that wide upright characters do not collide across adjacent columns:

   .vertical-article-body {
     writing-mode: vertical-rl;
     text-orientation: upright;
     line-height: 1.8; /* Expands horizontal column gap */
     margin: 1.5rem;
   }

3. Verify that font glyph bounding boxes remain centered by inspecting the font metrics in the Fonts panel of Safari Web Inspector.

Troubleshooting Common WebKit Vertical Text Artifacts

When implementing vertical layouts, review these common operational pitfalls:

• Font Metric Discrepancies: Certain custom web fonts lack dedicated vertical font metrics in their OpenType tables (vmtx table). When text-orientation: upright is applied to fonts lacking vertical metrics, WebKit synthesizes vertical metrics from horizontal dimensions, which may result in uneven inter-character gaps. Test with system fonts (such as -apple-system, Helvetica Neue, or PingFang SC) to isolate font-specific rendering issues.
• Flexbox and Grid Axis Inversion: When a container uses writing-mode: vertical-rl, the main axis and cross axis of CSS Flexbox and Grid invert. justify-content governs vertical positioning, while align-items governs horizontal column alignment. Use Web Inspector’s Flexbox and Grid overlay badges to visualize the inverted coordinate axes.
• Punctuation and Bracket Rotation: When setting text-orientation: upright, certain quotation marks and parentheses may not rotate appropriately in fonts lacking OpenType vertical glyph alternates. Use appropriate unicode vertical punctuation (such as full-width brackets) or wrap punctuation in specific span overrides if necessary.

By inspecting and controlling text-orientation within Safari Web Inspector, front-end developers can craft sophisticated, accessible vertical layouts and international typography that render flawlessly across macOS, iOS, and iPadOS devices.