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

Vertical typography is a fundamental design element in East Asian publishing (such as Japanese and traditional Chinese literature), elegant sidebar banners, and specialized financial chart labels. While standard horizontal layouts are well understood, vertical typesetting introduces complex coordinate system rotations where horizontal widths become block heights and vertical line heights determine column widths. The CSS text-orientation property controls how individual characters are oriented inside vertical writing modes. Safari Web Inspector provides specialized layout visualization tools that make debugging vertical typographic flow straightforward.

Understanding writing-mode and text-orientation Values

Vertical typesetting relies on two coordinating CSS properties:

• writing-mode: vertical-rl: Rotates the block flow vertically, running lines from top to bottom and progressing columns from right to left (traditional East Asian flow).
• writing-mode: vertical-lr: Runs lines from top to bottom, progressing columns from left to right (frequent in modern infographic design).
• text-orientation: mixed (Default): Rotates Latin characters 90 degrees clockwise while keeping CJK ideographs upright.
• text-orientation: upright: Renders all characters—including Latin letters and numerals—in an upright vertical orientation.
• text-orientation: sideways: Rotates all text (including ideographs) 90 degrees clockwise, resembling a book spine layout.

Configuring Clean Vertical Typographic Styles

Author resilient vertical rules for navigational headers and Asian editorial blocks:

/* Vertical editorial article layout */
.vertical-editorial-block {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-combine-upright: digits 2; /* Keeps two-digit numbers horizontal within the line */
    font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.8;
    height: 480px;
    padding: 1.5rem;
    overflow-y: hidden;
    overflow-x: auto;
}

Inspecting Vertical Layouts in Safari Web Inspector

To inspect vertical typography and diagnose coordinate rotations in Safari on macOS:

1. Open Safari and navigate to your web page.
2. Right-click the vertical text container and select Inspect Element.
3. In the Elements panel, inspect the Styles sidebar. Safari displays visual indicators showing active writing-mode and text-orientation properties.
4. Examine the Box Model panel. Notice that margin-inline-start and padding-block-start now map along rotated geometric axes: inline properties govern vertical height, while block properties control horizontal width.
5. Hover over the container in the DOM tree. Safari draws interactive grid lines demonstrating column progression direction and baseline alignments.

Debugging Tate-chu-yoko and Two-Digit Numbers

In traditional Japanese vertical typesetting, two-digit numbers (such as dates or percentages) are rendered horizontally within the vertical line, a technique known as tate-chu-yoko:

• Use text-combine-upright: all or digits 2 on numeric spans to verify horizontal grouping.
• Inspect glyph rendering in Safari Web Inspector to confirm that font metrics do not cause two-digit numbers to collide with adjacent vertical glyphs.
• Verify rendering across both iOS and macOS to ensure system font fallbacks display proportional character bounding boxes.