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

High-end digital typography often demands advanced OpenType glyph substitutions to maintain aesthetic balance across multilingual editorial layouts. When rendering Japanese text paired with Latin uppercase display typography, web designers frequently combine the jp04 (JIS X 0213:2004 Japanese forms), pkna (proportional kana), and titl (titling capitals) OpenType feature tags. Safari’s WebKit rendering engine provides dedicated typographic inspection tools within Safari Web Inspector to evaluate, isolate, and debug these complex font-variant properties.

OpenType Tag Architecture: jp04, pkna, and titl

The OpenType specification defines layout feature tags that instruct text-rendering shapers like CoreText on macOS and iOS to substitute default character forms with specialised glyphs:

• jp04 (JIS2004 Forms): Selects the 2004 JIS revision glyph variants for designated kanji characters, ensuring compliance with modern Japanese orthographic standards.
• pkna (Proportional Kana): Replaces full-width, monospace kana characters with proportionally spaced glyphs designed to nest naturally against adjacent kanji.
• titl (Titling): Replaces standard uppercase Latin glyphs with custom-designed titling variants engineered specifically for large display headings without over-bearing stroke weights.

While developers often configure these settings using low-level font-feature-settings, modern CSS guidelines recommend standard properties such as font-variant-east-asian and font-variant-caps where applicable. Safari Web Inspector exposes both paradigms simultaneously.

Configuring the Multi-Feature CSS Declaration

To author a resilient typography stack supporting proportional kana, JIS04 glyphs, and titling capitals simultaneously, apply the following modern CSS declaration:

/* Advanced Editorial Typography Rule */
.editorial-display-heading {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Biaodian Pro Sans", system-ui, sans-serif;
  font-size: 2.25rem;
  line-height: 1.35;
  text-rendering: optimizeLegibility;

  /* Modern High-Level Font Variant Properties */
  font-variant-east-asian: jis04 proportional-width;
  font-variant-caps: titling-caps;

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

Inspecting OpenType Features in Safari Web Inspector

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

1. Ensure Developer features are active: Open Safari > Settings > Advanced and check Show features for web developers.
2. Right-click your heading on the webpage and choose Inspect Element.
3. In the right-hand inspection sidebar, select the Styles panel and scroll to the bottom to locate the Font section.
4. Click the typographic details expansion icon (the small font options indicator) adjacent to the active font-family entry.
5. Under the Feature Settings subsection, inspect active flags:
   • Verify that JIS2004 Forms indicates an enabled state.
   • Confirm that Proportional Kana is highlighted under East Asian Spacing.
   • Check the Titling Capitals checkbox under the Capitals group to toggle glyph shapes dynamically.
6. Observe the CoreText glyph metrics in the rendered viewport to verify that spacing and ascender ratios align precisely with your typographic grid.

Diagnosing Glyph Missing and Fallback Anomalies

If Safari displays standard Latin uppercase or full-width kana despite the presence of CSS feature tags, consult the Fonts Used section in Safari Web Inspector. If the selected font file does not contain OpenType layout tables for titl or pkna, CoreText silently falls back to standard glyph variants without throwing console warnings.

By utilising Safari Web Inspector’s visual font panel, developers can immediately distinguish between CSS syntax issues and font table limitations, ensuring flawless typographic fidelity across Apple platforms.