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

In Japanese editorial design, balancing optical character density across mixed kana and kanji text runs is essential for refined typographic presentations. While standard Japanese digital fonts assign fixed full-width em-square bounding boxes to kana characters, combining JIS2004 standard glyphs (jp04) with proportional kana (pkna) and proportional alternate metrics (palt) ensures optical rhythm and cohesive word spacing. Apple Safari’s Web Inspector offers dedicated OpenType inspection tools to verify these advanced glyph tables directly in the browser.

The Functional Synergy of jp04, pkna, and palt Features

The jp04 feature replaces older glyph structures with JIS X 0213:2004 standard forms. Meanwhile, pkna applies proportional metrics specifically to hiragana and katakana glyphs, and palt adjusts proportional spacing for accompanying full-width punctuation and symbols. Combining these three tags ensures that both textual glyphs and punctuation adjust harmoniously without visual distortion.

Declare these OpenType layout rules in CSS using standard properties with fallback support:

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

Inspecting and Testing in Safari Web Inspector

To inspect and audit OpenType glyph substitution inside Apple Safari:

1. Launch Apple Safari and open your target web page.
2. Right-click on the Japanese passage and select Inspect Element.
3. In the Web Inspector drawer, go to the Elements tab and open the Font sidebar on the right.
4. Scroll down to the Font Features accordion.
5. Verify that JIS2004 Forms (jp04), Proportional Kana (pkna), and Proportional Alternates (palt) are all active and highlighted in blue.
6. Toggle individual feature checkboxes dynamically to observe character kerning and whitespace compaction in real time.

Troubleshooting Common Typography Challenges

If proportional kana and punctuation features fail to render as expected in Safari:

• Web Font Subsetting: Verify that your web font subsetting process has not discarded GPOS kerning and feature tables to save file size.
• CSS Priority Hierarchy: Ensure parent container resets do not inadvertently set font-variant: normal or reset font-feature-settings to default values.
• Synthesis Overrides: Set font-synthesis: none to prevent WebKit from synthesising pseudo-glyphs that bypass OpenType tables.