How to Inspect and Control CSS font-variant-east-asian in Safari Web Inspector

Typesetting East Asian languages—including Japanese (Kanji/Kana), Simplified and Traditional Chinese (Hanzi), and Korean (Hanja)—presents unique typographic challenges. OpenType CJK fonts bundle multiple historical and standardised glyph variations within a single font file. Depending on regional standards (such as Japanese JIS78, JIS83, JIS90, or JIS04) or document layouts (proportional widths versus fixed tabular spacing and ruby annotations), glyph forms shift significantly. The font-variant-east-asian CSS property provides web authors with declarative control over these OpenType typographic feature tags. Using Safari Web Inspector on macOS and iOS, developers can live-audit, inspect, and debug CJK glyph rendering and font fallback stacks.

Understanding font-variant-east-asian OpenType Features

The font-variant-east-asian property maps directly to internal OpenType feature layout tags in modern CJK typefaces (such as Hiragino Kaku Gothic, Apple LiGothic, or Noto Sans CJK):

• Variant Forms (jis78, jis83, jis90, jis04, simplified, traditional): Selects historical or regional glyph shapes. For example, jis04 invokes OpenType feature jp04, rendering modern Japanese educational character standards, whereas traditional invokes trad for classical Hanzi glyphs.
• Width Variations (full-width, proportional-width): Governs spacing metrics. full-width (fwid) enforces strict monospaced em-square character grids typical of classical East Asian print, while proportional-width (pwid) adjusts character metrics to eliminate awkward whitespace between mixed Latin and Kana characters.
• Ruby Annotations (ruby): Activates ruby OpenType variants specially drawn with thicker strokes and adjusted bounding boxes to maintain legibility when rendered as micro-sized pronunciation furigana above base Kanji text.

Configuring font-variant-east-asian in Stylesheets

Declare typographic rules using standard CSS syntax to ensure regional compliance and aesthetic consistency:

/* Standard modern Japanese publishing with JIS04 glyphs */
.japanese-body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-variant-east-asian: jis04 proportional-width;
}

/* Classical literature displaying traditional Hanzi variants */
.classical-chinese {
  font-family: "Hiragino Mincho ProN", "Songti SC", serif;
  font-variant-east-asian: traditional full-width;
}

/* Pronunciation guide styling using dedicated ruby glyph variants */
ruby rt {
  font-variant-east-asian: ruby;
  font-size: 0.5em;
}

Inspecting font-variant-east-asian via Safari Web Inspector

To inspect active East Asian typographic features in Safari:

1. Launch Safari and navigate to your web page. Open developer tools via Develop > Show Web Inspector (or press Cmd + Option + I).
2. Select the target text block containing CJK characters using the Element Selector tool.
3. In the right-hand inspection drawer, navigate to the Styles panel.
4. Examine the Computed tab and search for font-variant-east-asian. Confirm that the intended property value (e.g. jis04 proportional-width) is computed without being overridden by generic reset stylesheets.

/* Console verification in Web Inspector */
window.getComputedStyle($0).fontVariantEastAsian;
// Returns: "jis04 proportional-width"

Auditing Glyph Substitution in the Fonts Panel

Safari Web Inspector includes a powerful Fonts panel that inspects OpenType tables directly:

1. With the target CJK element selected, click the Fonts tab in the right-hand panel.
2. Observe the Rendered Fonts section. Ensure Safari is rendering glyphs from your desired CJK primary font rather than falling back to an unstyled system font that lacks OpenType JIS variant tables.
3. Under Font Variations & Features, locate the East Asian group.
4. Toggle between variant options in real time. Observe how complex Kanji characters (such as 辻, 葛, or 卿) dynamically update their stroke structure on the rendered canvas as Apple Core Text switches between JIS90 and JIS04 glyph tables.

Debugging Width Inconsistencies and Text Clipping

When applying proportional-width or full-width, layout bounding boxes can shift unexpectedly, causing vertical Japanese text (using writing-mode: vertical-rl) or fixed-width columns to break:

1. Inspect the element using the Layout panel in Safari Web Inspector.
2. Enable Show Rulers and Element Overlays.
3. Check whether glyph bounding boxes spill outside container margins when switching between full-width and proportional-width.

/* Preserving vertical layout stability in vertical-rl contexts */
.vertical-container {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-variant-east-asian: full-width; /* Retains rigid grid alignment */
}

Leveraging font-variant-east-asian and auditing glyph substitutions via Safari Web Inspector ensures high typographic accuracy, linguistic compliance, and visual polish across multilingual digital publications.