In Japanese editorial typography, setting small furigana pronunciation glosses (ruby text) above ideographs requires specialized proportional metrics to prevent wide inter-character whitespace around narrow kana. The OpenType ruby feature tag paired with proportional metrics optimizes kana glyph spacing and stroke weights for minute reading sizes. Safari Web Inspector provides native typographic tools to preview and audit ruby typography on macOS.
Typographical Role of Proportional Ruby Glyphs
Standard phonetic kana designed for 14pt body text appear hairline-thin and excessively spaced when scaled down to 6pt for ruby annotations. Activating font-feature-settings: "ruby" 1; ensures Apple’s CoreText layout engine renders heavier, proportionally spaced cuts tailored specifically for compact pronunciation glosses.
Configuring Ruby Typography in CSS
Implement ruby typography in your stylesheet:
ruby rt {
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
font-feature-settings: "ruby" 1;
font-size: 0.5em;
letter-spacing: 0.02em;
}Inspecting Features in Safari Web Inspector
- Open the webpage containing Japanese ruby text in Safari.
- Right-click the
<rt>element and choose Inspect Element. - Switch to the Font tab in Web Inspector’s right pane.
- Locate Ruby Glyphs (ruby) under the Features list.
- Toggle the switch to observe live kana stroke alterations rendered by CoreText across the character sequence.
Accessible Semantic Text Integrity
Because OpenType substitutions operate exclusively at the graphic layout layer, the accessibility tree retains standard semantic text representation, ensuring optimal search indexing and screen reader performance.