How to Inspect CSS font-feature-settings JIS04 Proportional Alternate Kana in Safari Web Inspector

In Japanese editorial design and digital publishing, text density and proportional glyph spacing dictate visual legibility. When formatting headlines, banner text, or editorial callouts, combining JIS2004 standard kanji forms (jp04) with proportional alternate glyph widths (palt) allows designers to achieve visually unified typographic rhythm. Apple Safari provides full inspection capabilities within its Web Inspector, facilitating fine-grained testing and validation of OpenType layout features.

The Typographic Mechanics of the palt Feature

While the standard pkna feature applies proportional metrics strictly to kana characters (hiragana and katakana), the palt (Proportional Alternate Widths) feature applies proportional optical spacing across both kana and full-width punctuation marks. This eliminates unnatural gaps around quotation marks, brackets, and full stops without distorting glyph contours. Combining palt with jp04 guarantees modern glyph standardization alongside optical character spacing.

Declare these features in CSS using standard properties with robust fallbacks:

.proportional-editorial-lead {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-variant-east-asian: jis04;
  font-feature-settings: "jp04" 1, "palt" 1;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

Inspecting and Testing in Safari Web Inspector

To inspect and audit OpenType glyph substitution inside Apple Safari:

1. Open Apple Safari and load your web application.
2. Right-click the Japanese text segment and choose Inspect Element.
3. In the Web Inspector drawer, navigate to the Elements tab and open the Font sidebar on the right.
4. Scroll down to the Font Features accordion.
5. Verify that JIS2004 Forms (jp04) and Proportional Alternates (palt) are checked and highlighted in blue.
6. Toggle the palt control to observe optical kerning adjustments on Japanese commas (ten) and periods (maru).

Common Implementation Issues and Pitfalls

When proportional alternates fail to render correctly in Safari, investigate the following factors:

• Font Table Support: Ensure the selected web font contains valid palt definitions inside its OpenType GPOS table. Subsetted fonts often omit alternate metrics.
• Kerning Collisions: Avoid applying negative letter spacing (e.g. letter-spacing: -0.04em) simultaneously, as this can cause character glyphs to overlap awkwardly.
• CSS Priority Hierarchy: Verify that no utility classes higher up the cascade apply font-variant: normal or reset font-feature-settings to default values.