How to Inspect CSS font-variant-east-asian Ruby Glyphs in Safari Web Inspector

In Japanese and East Asian educational publications, children literature, and linguistic reference works, small phonetic gloss annotations—known as Ruby characters (or Furigana)—are positioned above or beside base ideographic Kanji characters to indicate pronunciation. When rendering ruby annotations at small font sizes (typically 5pt to 7pt), standard kana glyphs become illegible due to overly delicate stroke weights. In modern CSS Fonts Module Level 4, the font-variant-east-asian: ruby property provides declarative access to OpenType ruby glyph tables, rendering specialized optical variants tailored specifically for ruby annotations. Apple Safari provides native visual inspection tooling within Safari Web Inspector to inspect and validate ruby substitutions in real time.

The Typographic Purpose of Ruby OpenType Glyphs

Standard Japanese kana glyphs are designed with optical weights and letterforms suited for 10pt to 16pt body copy. When reduced to 50% or smaller to fit into HTML <ruby> and <rt> annotation tags, standard strokes appear faint and indistinct.

Applying font-variant-east-asian: ruby instructs the OpenType layout engine to query the ruby table. The engine substitutes standard kana with specialized ruby glyphs featuring heavier stem weights, expanded internal counters, and simplified stroke junctions optimized specifically for micro-typography:

/* Apply specialized ruby glyphs to phonetic annotation text */
rt {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-variant-east-asian: ruby;
  font-size: 0.5em;
  line-height: 1;
}

/* Reset to standard glyphs for base text */
ruby {
  font-variant-east-asian: normal;
}

Inspecting Ruby Glyphs in Safari Web Inspector

Safari Web Inspector allows web authors to verify active OpenType East Asian tables directly from the visual browser interface:

1. Launch Safari and navigate to Develop > Show Web Inspector (Cmd+Option+I on macOS).
2. Select the Elements panel and click on an <rt> element containing phonetic furigana annotations.
3. In the right-hand details pane, click the Font icon in the inspector toolbar.
4. Scroll down to the Font Variant and OpenType Features sections.
5. Locate the Ruby (ruby) feature toggle under East Asian Features.
6. If the active font contains OpenType ruby glyph tables, Safari highlights the feature with a blue status badge. You can toggle switches directly to preview visual transformations in real time.

Diagnosing Typography Support Pitfalls

If ruby glyph substitutions fail to render as anticipated, consider these troubleshooting steps:

• Font file table availability: The OpenType ruby table is present in high-grade Japanese typefaces (such as Hiragino, Yu Gothic, and Morisawa typefaces), but is commonly omitted from generic Western fonts.
• HTML language attributes: Always ensure the enclosing container declares lang="ja" so the browser prioritizes appropriate Japanese glyph tables during font matching.
• Preserving tables during subsetting: Confirm that web font compressors do not discard the ruby OpenType table when building lightweight WOFF2 bundles.