How to Inspect CSS font-feature-settings Vertical Alternates (vert) in Safari Web Inspector

Vertical writing modes—predominantly employed in traditional East Asian literature, poetry, and calligraphic web typography—require specialised glyph orientations for punctuation, parentheses, and ideographs. The OpenType vert (Vertical Alternates) feature tag substitutes horizontal glyph forms with vertically oriented counterparts. Safari Web Inspector offers native typographic inspection tools to preview and audit vertical glyph substitutions on macOS.

Role of Vertical Alternates in CoreText

When applying writing-mode: vertical-rl, certain punctuation marks (such as brackets, full stops, and hyphens) must rotate 90 degrees or swap to centered vertical equivalents. Apple’s CoreText layout engine evaluates OpenType GSUB tables to perform these substitutions automatically when vert is engaged.

Configuring Vertical Typography in CSS

Implement the vertical alternate layout in your stylesheet:

.vertical-document {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Noto Serif CJK JP", "Hiragino Mincho ProN", serif;
  font-feature-settings: "vert" 1;
  line-height: 2.0;
}

Inspecting Features in Safari Web Inspector

1. Open Safari and load the document featuring vertical text.
2. Right-click the vertical paragraph and choose Inspect Element.
3. Navigate to the Font tab in Web Inspector.
4. Under Features, find Vertical Alternates (vert).
5. Toggle the switch to audit live glyph substitutions rendered by CoreText across the vertical column.

Ensuring Mixed-Mode Punctuation Accuracy

Verify that Latin numerals and alphanumeric acronyms align correctly using text-combine-upright: all; for concise two-digit numbers, maintaining pristine typographic vertical rhythm.