East Asian multi-column editorial publications and classified directories frequently require numerical figures and punctuation to occupy exact one-third em (0.333em) widths to balance three-digit numbers within standard em-quad bounds. The OpenType twid (Third-Width Alternates) feature tag substitutes standard characters with precisely measured one-third width glyphs. Safari Web Inspector provides native typographic tools to preview and audit third-width substitutions on macOS.
Typographical Role of Third-Width Alternates
In structured vertical and horizontal CJK layouts, packing three digits into a single ideographic em-space requires mathematically precise third-width proportions. Specifying font-feature-settings: "twid" 1; activates Apple’s CoreText layout routines, formatting numerals cleanly without artificial horizontal scaling.
Configuring Third-Width Alternates in CSS
Implement third-width typography in your stylesheet:
.cjk-trio-digits {
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
font-feature-settings: "twid" 1;
font-variant-east-asian: proportional-width;
letter-spacing: 0;
}Inspecting Features in Safari Web Inspector
- Open the document in Safari.
- Right-click the targeted numerical figures and choose Inspect Element.
- Switch to the Font tab in Web Inspector’s right pane.
- Locate Third-Width Alternates (twid) under the Features list.
- Toggle the switch to audit live glyph width compression rendered by CoreText across the character sequence.
Accessible Semantic HTML Structure
Because OpenType substitutions operate exclusively at the graphic layout layer, the accessibility tree retains standard semantic text representation, ensuring optimal search indexing and screen reader performance.