How to Inspect CSS font-feature-settings Proportional Kana (pkna) in Safari Web Inspector

Standard Japanese typography traditionally sets full-width (monospaced) kana alongside square ideographs. However, contemporary editorial layouts and branding designs increasingly employ proportional kana to eliminate excessive whitespace around naturally narrow phonetic characters (such as っ, ィ, or り). The OpenType pkna (Proportional Kana) feature substitutes fixed-width kana with proportionally proportioned glyphs. Safari Web Inspector provides native tools to preview and audit proportional kana on macOS.

Typographical Role of Proportional Kana

In full-width CJK typesetting, every glyph occupies a rigid 1em em-box. While kanji characters fill this bounding box naturally, narrow kana leave distracting white gaps. The OpenType pkna feature applies customized proportional metrics to hiragana and katakana while leaving kanji in standard full-width alignment.

Configuring Proportional Kana in CSS

Implement proportional kana in your stylesheet:

.editorial-japanese {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-feature-settings: "pkna" 1;
  letter-spacing: 0.02em;
  line-height: 1.8;
}

Inspecting Features in Safari Web Inspector

1. Open the webpage containing Japanese text in Safari.
2. Right-click the paragraph and choose Inspect Element.
3. Switch to the Font panel in Web Inspector.
4. Under Features, find Proportional Kana (pkna).
5. Toggle the switch to audit the real-time reduction in inter-character whitespace rendered by Apple’s CoreText engine.

Pairing with Contextual Alternates

Combine pkna with calt (Contextual Alternates) to ensure natural stroke connections across cursive hiragana combinations.