How to Inspect CSS font-feature-settings JIS04 Proportional Kana and Japanese JIS04 Small Kana Alternates in Safari Web Inspector

Modern multilingual typography demands rigorous control over OpenType glyph substitution tables, particularly when rendering complex East Asian scripts. When styling Japanese typography in Safari and WebKit, designers frequently pair small kana variations with proportional kana formatting to maximize visual clarity across furigana annotations and phonetic ruby glosses. Specifically, configuring JIS04 (jp04), proportional kana (pkna), and simplified small kana (smpl) requires deep familiarity with CSS font features. This technical guide outlines how to inspect, verify, and fine-tune these advanced OpenType settings using Safari Web Inspector.

The Mechanics of JIS04, Proportional Kana, and Small Kana

Japanese OpenType fonts contain numerous glyph alternate layouts standardized across different ministerial revisions. The JIS X 0213:2004 standard introduces precise typographic refinements, triggered in CSS via the jp04 feature tag or font-variant-east-asian: jis04.

Furthermore, small kana forms (sokuon and yōon such as ‘っ’, ‘ゃ’, ‘ゅ’, ‘ょ’) historically adhere to strict bottom-left corner positioning within standard em-boxes. When formatting small phonetic annotations or inline definitions, enabling smpl alongside pkna (Proportional Kana) optically centres small kana glyphs and dynamically adjusts kerning pairs against adjoining kanji. Orchestrating these features ensures impeccable aesthetic rhythm in Safari on macOS and iPadOS.

Implementing Font Feature Declarations in CSS

To ensure consistent cross-browser fallbacks while targeting WebKit’s layout engine, apply both modern high-level properties and low-level font-feature-settings declarations:

/* Comprehensive OpenType feature specification for Japanese ruby and small kana annotations */
.ruby-annotation-jp {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-variant-east-asian: jis04 proportional-widths;
  
  /* Low-level fallback ensuring strict WebKit activation */
  font-feature-settings: "jp04" 1, "pkna" 1, "smpl" 1;
  text-rendering: optimizeLegibility;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Secondary rule demonstrating isolated small kana formatting */
.inline-phonetic-jp {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-feature-settings: "smpl" 1;
}

Inspecting Glyph Substitution in Safari Web Inspector

Safari features powerful native typography inspection tools that allow front-end engineers to inspect active OpenType tables directly within the DOM tree:

1. Launch Safari and navigate to Settings > Advanced. Ensure that Show features for web developers is checked.
2. Right-click the Japanese text element and choose Inspect Element to launch Web Inspector.
3. In the right-hand inspection sidebar, select the Styles panel and scroll to the Font Details section.
4. Under Feature Settings, expand the OpenType table list. Confirm that jp04, pkna, and smpl are toggled to their active states.
5. Inspect the Rendered Fonts panel at the bottom to ensure the operating system resolved the intended physical font file rather than a generic fallback glyph system.

Troubleshooting Glyph Inconsistencies and Font Fallbacks

When working with third-party web fonts or custom dynamic subsets, certain OpenType tables may be stripped during compression. To diagnose missing glyph substitution issues:

• Check Glyph Availability: Verify that the target web font includes GSUB tables for pkna and smpl. Stripped subsets will silently ignore font-feature-settings without raising console errors.
• Prevent Property Collisions: High-level CSS shorthand properties such as font or modern font-variant resets can unintentionally overwrite font-feature-settings. Always declare font-feature-settings after general typography rules.
• Verify macOS Version Compatibility: Different versions of macOS supply updated system fonts. Testing across multiple OS versions ensures consistent optical appearance across all client devices.