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

Japanese administrative systems and legacy publishing databases frequently require kanji glyph shapes defined under the JIS X 0208:1990 standard rather than modern JIS2004 revisions. When styling documents combining Japanese proportional kana with JIS90 glyph forms, pairing the jp04 (JIS X 0213:2004 forms), pkna (proportional kana), and jp90 (JIS90 forms) OpenType feature tags allows typography designers to enforce exact historical glyph rendering without font switching. Safari Web Inspector provides specialized typography inspection panels to validate and debug these glyph substitutions live in WebKit.

Understanding OpenType Feature Tags: jp04, pkna, and jp90

Modern OpenType layout shapers like Apple CoreText parse font feature tables to execute glyph replacements:

  • jp04 (JIS2004 Forms): Enforces the modern Japanese orthographic glyph forms ratified in the 2004 JIS revision.
  • pkna (Proportional Kana): Replaces rigid full-width Japanese hiragana and katakana glyphs with proportionally spaced variants designed to fit naturally against kanji.
  • jp90 (JIS90 Forms): Accesses historical kanji glyph variants conforming to the 1990 JIS standard specification.

While the standard CSS property font-variant-east-asian: jis90 exists, combining it with proportional kana requires explicit configuration of font-feature-settings.

Authoring the Multilingual Typography CSS Stack

To ensure consistent cross-platform typography in Safari, declare your font styling using both high-level CSS properties and low-level feature settings:

/* Historical JIS90 Typography Rule */
.historical-jis90-heading {
  font-family: "Hiragino Mincho ProN", "YuMincho", system-ui, serif;
  font-size: 2.25rem;
  line-height: 1.4;
  text-rendering: optimizeLegibility;

  /* Standard CSS Font Variant Declarations */
  font-variant-east-asian: jis90 proportional-width;

  /* Explicit Low-Level Feature Settings Fallback */
  font-feature-settings: "jp04" 1, "pkna" 1, "jp90" 1;
}

Inspecting Glyphs with Safari Web Inspector

To inspect and live-debug these OpenType substitutions in Apple Safari on macOS:

  1. Enable developer tools: In Safari, navigate to Settings > Advanced and check Show features for web developers.
  2. Right-click the typography element and select Inspect Element.
  3. In the Web Inspector right-hand sidebar, navigate to the Styles panel and scroll to the Font section.
  4. Click the typographic properties icon to open the OpenType Feature Settings inspector.
  5. Confirm that Proportional Kana is highlighted under East Asian Spacing.
  6. Under the East Asian Variants category, toggle JIS90 forms to verify that kanji map correctly to historical 1990 glyph variants.

Diagnosing Missing OpenType Tables

If Safari displays standard contemporary glyphs despite CSS declarations, inspect the Fonts Used card in Web Inspector. System fonts or third-party web fonts lacking a dedicated jp90 table cannot execute JIS90 substitutions. Safari Web Inspector enables engineers to rapidly identify whether layout anomalies originate from CSS rules or underlying font file limitations.

Get the best tech tips delivered straight to your inbox.

Join thousands of readers mastering Apple, Google, Microsoft, and Linux.