How to Inspect and Control CSS writing-mode and Vertical Layouts in Safari Web Inspector

Modern responsive web design increasingly embraces international typography and creative vertical layouts. Whether authoring vertical text for East Asian writing systems (such as Traditional Chinese, Japanese, or Korean), designing vertical navigation rails, or styling decorative magazine badges, the CSS writing-mode property governs the block flow direction and inline text progression of HTML content.

Switching from a standard horizontal writing mode to a vertical writing mode fundamentally transposes the layout geometry of the box model. Traditional physical dimensions (such as width, height, margin-top, and padding-left) behave differently when the inline axis becomes vertical. In Apple Safari, Safari Web Inspector provides specialized inspection tools, visual box model overlays, and logical property views to debug vertical writing modes and typography orientations.

Understanding CSS writing-mode Values and Text Progression

The writing-mode property defines whether lines of text are laid out horizontally or vertically, and the direction in which successive blocks progress:

• horizontal-tb: Standard horizontal top-to-bottom writing mode used in Western, Latin, Arabic, and Hebrew typography.
• vertical-rl: Vertical lines that progress from right to left (standard vertical layout for Japanese, Chinese, and Korean text).
• vertical-lr: Vertical lines that progress from left to right (frequently used in modern Western graphic design and Mongolian script).
• sideways-rl & sideways-lr: Rotates the entire text flow 90 degrees sideways without reshaping character glyphs.

/* Example: Vertical text layout running right-to-left */
.vertical-banner {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    inline-size: 300px;
    block-size: 100%;
}

Opening Safari Web Inspector and Selecting the Vertical Container

To inspect vertical writing layouts in Safari on macOS:

1. Enable developer features in Safari under Safari > Settings > Advanced > Show features for web developers.
2. Navigate to the web page containing the vertical text component.
3. Right-click the vertical element and choose Inspect Element.
4. In the DOM tree of the Elements tab, select the container node where writing-mode is declared.

Inspecting Transposed Box Models and Logical Properties

When an element adopts a vertical writing mode, physical axes transpose:

• Inline Axis (Horizontal becomes Vertical): inline-size now governs the physical height, and margin-inline governs top and bottom margins.
• Block Axis (Vertical becomes Horizontal): block-size now controls physical width, and margin-block controls left and right margins.

In the right-hand panel of Safari Web Inspector:

1. Navigate to the Styles panel to review active rules.
2. Switch to the Box Model graphic overlay. Hover over the box model regions (margin, border, padding, content).
3. Notice that Safari Web Inspector adjusts the visual box model to reflect the active writing mode, clearly indicating block progression and inline flow arrows directly over the canvas.
4. Review the Computed panel to verify that CSS Logical Properties (such as padding-block-start and inset-inline-end) resolve cleanly without being overridden by legacy physical declarations.

Controlling Glyph Orientation with text-orientation

When using vertical writing modes, individual characters within the text flow can either remain upright or rotate sideways depending on their Unicode character class and the CSS text-orientation property:

text-orientation Value	Glyph Display Behaviour	Primary Usage
mixed (Default)	East Asian ideographs remain upright; Latin/Western letters rotate 90° sideways	Standard CJK vertical documents containing mixed English words or numbers
upright	All glyphs (including Latin letters and digits) stand upright in a vertical column	Acronyms, code identifiers, or stylized vertical Western signage
sideways	Entire text line is rotated 90° as a unified block	Side tabs, book spines, and vertical chart axis labels

In the Styles panel, toggle between text-orientation: mixed and text-orientation: upright to immediately observe how Latin letters and numerals orient within vertical columns.

Debugging Flexbox and Grid Alignment in Vertical Modes

When an element combines display: flex or display: grid with writing-mode: vertical-rl, the main axis and cross axis reorient:

• In flexbox, flex-direction: row now flows vertically along the inline axis.
• justify-content aligns items along the vertical inline axis.
• align-items aligns items horizontally along the block axis.

In Safari Web Inspector, click the flex or grid badge in the DOM tree next to the element tag. Safari renders the interactive alignment grid overlay on the live canvas, highlighting transposed track numbers and alignment baselines.

Resolving Common Vertical Typography Defects in Safari

When implementing vertical typography in WebKit, observe the following best practices:

• Number Formatting (Tate-chu-yoko): For 2-digit numbers in vertical Japanese or Chinese text, use text-combine-upright: all to render numbers horizontally within a single vertical character cell.
• Overflow Clipping: Ensure vertical containers declare overflow: auto or overflow: clip along the inline axis to prevent vertical text from overflowing beneath adjacent sections.
• Font Fallbacks: Confirm that specified font families include native vertical metrics (OpenType vmtx tables) to avoid uneven vertical glyph spacing.

By leveraging Safari Web Inspector’s transposed box model visualisations and logical property auditing tools, web designers ensure complex vertical and multi-directional layouts render consistently across Apple platforms.