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

Typography across macOS and iOS requires specialised glyph positioning when rendering mixed CJK text, proportional Latin numerals, and mathematical formulas. Modern Japanese typefaces conforming to the JIS X 0213:2004 (JIS04) standard include OpenType features for proportional kana alternates (pkna), revised 2004 ideographs (jp04), and contextual mathematical alternates (calt) designed to balance symbols such as the equals sign (=). In Safari, Apple’s CoreText layout engine renders these glyph substitutions based on active CSS rules. Developing pixel-perfect international interfaces requires inspecting and verifying these typography features directly within Safari Web Inspector. This guide outlines how to configure, inspect, and validate JIS04 proportional kana and contextual equals sign alternates.

OpenType Layout Features for Japanese Typography

Full-width Japanese punctuation and mathematical symbols often create awkward visual spacing when placed next to proportional kana and Latin numerals. OpenType feature tags solve this by substituting purpose-built alternate glyphs:

• "jp04" 1: Enforces JIS X 0213:2004 character forms for 168 kanji glyphs, aligning with modern Japanese orthography.
• "pkna" 1: Activates proportional kana (Hiragana and Katakana) glyphs, replacing standard monospaced 1-em boxes with natural variable widths.
• "calt" 1: Enables contextual alternates, prompting symbols like the equals sign (=) to shift its vertical optical centre to align with proportional numeral x-heights rather than full-width em boxes.

Configuring Strict Typography Rules in CSS

To configure these features across WebKit, declare both standard high-level CSS font variant properties and low-level font-feature-settings declarations:

/* JIS04 Proportional Kana and Contextual Equals Sign Alternates */
.japanese-typographic-display {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-variant-east-asian: jis04 proportional-width;
  font-feature-settings: "jp04" 1, "pkna" 1, "calt" 1;
  font-size: 1.125rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-rendering: optimizeLegibility;
}

/* Contextual equals sign alignment container */
.japanese-typographic-display .math-expression {
  font-feature-settings: "jp04" 1, "pkna" 1, "calt" 1, "pnum" 1;
}

Inspecting Glyph Substitution in Safari Web Inspector

Safari Web Inspector includes dedicated typography tooling to isolate and verify OpenType features:

1. Launch Safari and navigate to your staging or development page.
2. Ensure Developer features are enabled via Safari > Settings > Advanced > Show features for web developers.
3. Right-click the Japanese typography segment and select Inspect Element.
4. In the Styles sidebar on the right pane, switch to the Fonts tab (marked by an ‘A’ icon or expandable drawer).
5. Locate the Feature Settings section. Safari displays a comprehensive list of all OpenType feature tags supported by the rendered font.
6. Confirm that jp04, pkna, and calt toggle switches are highlighted and active.

Measuring Glyph Optical Alignment

To verify that the contextual equals sign alternate adjusts its vertical centre to align with proportional numerals rather than traditional full-width baselines, apply a temporary diagnostic overlay:

/* Diagnostic overlay for glyph measurement */
.debug-equals-alignment {
  display: inline-block;
  outline: 1px dashed rgba(65, 105, 225, 0.7);
  background-color: rgba(240, 248, 255, 0.3);
}

Using Safari Web Inspector’s Box Model metrics, confirm that the bounding box and baseline offset for = match the adjacent proportional kana and numeral bounds.

Comparison of OpenType Typography Settings

Adhering to this inspection technique ensures clean, professional, and readable typography across all Japanese web applications on Apple devices.