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

Modern international typography across macOS and iOS requires rigorous rendering precision when laying out mixed Japanese text, numerals, and range symbols. In Japanese typesetting, the tilde (~) or wave dash is universally employed to denote ranges (such as dates, times, or numerical intervals). However, standard Western ASCII tildes float near the cap-height, while traditional full-width Japanese wave dashes occupy an entire 1-em square. Typefaces conforming to the JIS X 0213:2004 standard include OpenType layout features for proportional kana (pkna), JIS2004 ideograph updates (jp04), and contextual alternates (calt) designed to balance and vertically centre the tilde symbol across proportional numerals. Safari Web Inspector provides specialized typography inspection tools to analyze and debug these substitutions. This guide explains how to configure, inspect, and validate JIS04 proportional kana and contextual tilde alternates in Safari.

OpenType Typography Architecture for Japanese Text

Traditional full-width Japanese range markers can introduce undesirable whitespace gaps in responsive web layouts. OpenType feature tags resolve this through contextual glyph substitutions:

• "jp04" 1: Enforces JIS X 0213:2004 character forms for 168 kanji ideographs.
• "pkna" 1: Enables proportional kana metrics, substituting monospaced Hiragana and Katakana glyphs with proportionally spaced variants.
• "calt" 1: Triggers contextual alternates, dynamically lowering and vertically centring the tilde (~) glyph to align with proportional numeral x-heights rather than floating at the superior ascender line.

Configuring Strict Typography Rules in CSS

To enforce these features reliably across WebKit, declare both modern CSS font variant properties and low-level font-feature-settings declarations:

/* JIS04 Proportional Kana and Contextual Tilde Alternates */
.japanese-typographic-content {
  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;
}

/* Range indicator tilde contextual alignment wrapper */
.japanese-typographic-content .range-tilde {
  font-feature-settings: "jp04" 1, "pkna" 1, "calt" 1, "pnum" 1;
}

Inspecting Glyph Substitution in Safari Web Inspector

Safari Web Inspector allows web authors to verify active OpenType feature tables on rendered DOM elements:

1. Open Safari and load the target Japanese page.
2. Ensure Developer features are enabled via Safari > Settings > Advanced > Show features for web developers.
3. Right-click the Japanese text containing the tilde and choose Inspect Element.
4. In the Styles panel on the right sidebar, click the Fonts tab (indicated by the capital ‘A’ icon).
5. Scroll to the Feature Settings subsection. Safari lists all detected OpenType features within the active font.
6. Verify that jp04, pkna, and calt toggle switches are enabled and highlighted.

Measuring Glyph Optical Alignment

To ensure that the contextual tilde alternate centres properly against adjacent numerals rather than sticking to the superior em boundary, apply a temporary diagnostic overlay:

/* Diagnostic overlay for glyph measurement */
.debug-tilde-alignment {
  display: inline-block;
  outline: 1px dashed rgba(138, 43, 226, 0.7);
  background-color: rgba(230, 230, 250, 0.3);
}

Using Web Inspector’s Box Model metrics, measure the baseline offset and optical vertical centring of the tilde compared to neighbouring kana characters.

Comparison of OpenType Typography Settings

Following this inspection technique ensures clean, professional, and balanced typography across all Japanese web applications on Apple platforms.