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

Precision East Asian typography on the web demands strict alignment between Latin numerals, punctuation, and Japanese CJK glyphs. When rendering mathematical indices, footnote references, or legal citations in Japanese, setting OpenType jp04 (JIS2004 standard forms) alongside proportional kana and true OpenType superscript figures ensures that reference markers align naturally without altering baseline line-height. Apple Safari’s Web Inspector provides native font analysis tools that simplify testing and validation of these advanced layout features.

Understanding the Synergy Between jp04, pkna, and sups

The jp04 OpenType feature updates historical character representations to conform with contemporary Japanese publishing standards defined in JIS X 0213:2004. Concurrently, pairing jp04 with pkna (Proportional Kana) provides fluid horizontal rhythm for kana glyphs, while sups (Superscripts) replaces standard numeric digits with scaled, optically balanced superscript glyphs. Unlike raw CSS vertical-align adjustments, native OpenType superscripts preserve typographical stroke weight without distorting line boxes.

Declare these OpenType properties using modern high-level CSS properties with fallbacks:

.japanese-footnote-reference {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-variant-east-asian: jis04;
  font-variant-position: super;
  font-feature-settings: "jp04" 1, "pkna" 1, "sups" 1;
  text-spacing-trim: space-first;
  line-break: strict;
}

Validating Glyphs in Safari Web Inspector

To inspect and audit OpenType glyph substitution inside Apple Safari:

1. Launch Safari and navigate to your target page.
2. Right-click on the superscript reference passage and click Inspect Element.
3. Navigate to the Elements tab and select the Font sub-panel located in the right-hand inspection drawer.
4. Expand the Font Features disclosure widget.
5. Verify that both JIS2004 Forms (jp04) and Superscript (sups) are enabled and highlighted in blue.
6. Use the live text editing input within the Font panel to confirm that numeric digits render as true optical superscript glyphs.

Troubleshooting Glyphs and Fallback Rendering

When font features fail to apply as anticipated in Safari, verify the following configuration vectors:

• Subset Stripping: Ensure your web font distribution pipeline has not stripped the sups or pkna feature tables during WOFF2 subsetting.
• CSS Shorthand Precedence: Be cautious when using the font: shorthand property on child selectors, as it resets font-variant and font-feature-settings to initial values.
• Line Box Distortions: Avoid adding manual vertical-align: super styles, as this can compound with native OpenType shifts and disrupt baseline grids.