How to Inspect CSS font-feature-settings JIS04 Proportional Kana in Safari Web Inspector

High-end digital typography for multi-lingual web platforms requires exacting control over East Asian glyph variants and proportional spacing. In Japanese typography, combining the JIS2004 standard variant glyphs (jp04) with proportional kana adjustments (pkna) ensures visual harmony between kanji and kana characters. Apple Safari provides robust OpenType feature inspection within its Web Inspector, allowing front-end engineers to verify complex glyph substitution and kerning tables directly in the browser.

OpenType Features: jp04 and Proportional Kana Coordination

The jp04 OpenType feature substitutes legacy glyph forms with modern JIS X 0213:2004 standard variants. When coupled with pkna (Proportional Kana), glyph bounding boxes shift from traditional monospaced em-squares to optical character widths tailored for horizontal display. To declare these features reliably in modern CSS, combine modern font variant descriptors with backward-compatible font-feature-settings declarations:

.japanese-editorial-copy {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-variant-east-asian: jis04;
  font-feature-settings: "jp04" 1, "pkna" 1;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

Navigating Safari Web Inspector for Font Feature Validation

To inspect glyph rendering and ensure Safari activates the desired OpenType layout tables:

1. Launch Safari and navigate to your staging or production page.
2. Right-click the Japanese text block and choose Inspect Element.
3. In the Web Inspector right-hand sidebar, select the Styles panel, then switch to the Font tab.
4. Under the Font Features accordion, verify that JIS2004 Forms and Proportional Kana checkboxes are actively illuminated.
5. Toggle individual features on and off to observe real-time layout shifts and baseline kerning adjustments.

Debugging Common Fallback and Font Substitution Issues

If Safari fails to reflect proportional kana spacing, consider these primary architectural factors:

• Font Family Incompatibilities: Verify that the loaded font family contains genuine jp04 and pkna GSUB/GPOS tables. Many simplified web font subsets strip alternate tables to save bandwidth.
• CSS Cascade Overrides: Check if a generic font-feature-settings: normal or utility class is resetting the OpenType properties higher up the DOM tree.
• WebKit Synthesis: Ensure font-synthesis: none is specified to prevent the browser engine from synthesising pseudo-glyphs that bypass OpenType tables.