How to Inspect CSS font-feature-settings JIS04 Alternate Half-Width Forms in Safari Web Inspector

Achieving refined typesetting in Japanese digital editorial design often requires balancing standardized glyph representations with optical spacing constraints. While full-width characters suit formal columnar formats, dense user interfaces and compact headers benefit from alternate half-width metrics. By combining the OpenType jp04 (JIS2004 standard forms) tag with halt (Alternate Half-Width Forms), designers can apply contemporary kanji glyph structures while reducing Latin glyph advances to half-em widths. Apple Safari’s Web Inspector provides native tools for inspecting these OpenType font feature tables.

The Typographic Function of the halt OpenType Feature

Unlike hwid (which substitutes full-width glyphs with their monospaced half-width counterparts), the halt feature adjusts glyph positioning metrics by trimming whitespace on the sides of characters without altering the underlying glyph design. When paired with jp04, characters conform strictly to JIS X 0213:2004 standards while benefiting from tighter, optically balanced typesetting.

Declare these features in your CSS using high-level syntax with low-level fallbacks:

.compact-japanese-nav {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-variant-east-asian: jis04;
  font-feature-settings: "jp04" 1, "halt" 1;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

Inspecting Font Properties in Safari Web Inspector

Follow these steps to inspect and confirm glyph adjustments in Safari:

1. Open Apple Safari and navigate to your web project.
2. Right-click the Japanese text block and select 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 section.
5. Locate JIS2004 Forms (jp04) and Alternate Half-Width (halt), verifying that both options are actively checked.
6. Toggle the halt checkbox dynamically to observe character advance adjustments and whitespace compaction in real time.

Debugging Typographic Pitfalls

When alternate half-width spacing does not render as expected, examine these key areas:

• Font Table Availability: Confirm that the loaded font family includes an authentic halt feature in its GPOS (Glyph Positioning) table. Some web font subsets omit positioning tables to reduce asset payloads.
• Kerning Collisions: Check if aggressive letter-spacing rules (e.g. letter-spacing: -0.05em) are overriding or corrupting the optical metrics defined by halt.
• CSS Priority: Ensure parent container resets do not inadvertently set font-variant-east-asian: normal on nested text spans.