How to Inspect CSS ruby-position and East Asian Phonetic Annotations in Safari Web Inspector

In East Asian digital typography (such as Japanese Furigana, Chinese Zhuyin, and Pinyin), phonetic pronunciation guides are rendered adjacent to base ideographic characters using HTML <ruby> markup. While basic ruby elements render above text by default, complex editorial requirements—such as bilingual textbooks, vertical calligraphy, and legal terminology—frequently require positioning annotations below the base text or on alternating sides. The CSS ruby-position and ruby-align properties provide precise typographic control over annotation placement. Safari Web Inspector features dedicated WebKit rendering tools to inspect and fine-tune ruby typesetting.

Understanding HTML Ruby Markup and CSS Properties

Standard phonetic markup wraps base characters and phonetic annotations into semantic units:

<!-- Semantic Japanese furigana ruby markup -->
<ruby class="phonetic-term">
  漢<rt>かん</rt>字<rt>じ</rt>
</ruby>

Key CSS properties controlling annotation rendering include:

• ruby-position: over (Default): Renders phonetic annotations above the base text in horizontal writing modes.
• ruby-position: under: Positions annotations directly below the base text, ideal for secondary translations or footnotes.
• ruby-position: alternate: Alternates annotations across opposing sides when multiple <rt> elements are present.
• ruby-align: space-around / center: Controls horizontal justification of the phonetic characters relative to the base ideograph.

Configuring Clean Typographic Styles for Ruby Text

Author resilient styles that maintain consistent line heights when phonetic annotations appear inside body paragraphs:

/* Hardened ruby typography styles */
ruby {
    ruby-position: over;
    ruby-align: space-around;
    font-size: 1.25rem;
}

rt {
    font-size: 0.55em;
    font-weight: normal;
    color: #495057;
    user-select: none; /* Prevents annotations from corrupting text copy operations */
}

/* Vertical writing mode annotation placement */
.vertical-editorial-column ruby {
    writing-mode: vertical-rl;
    ruby-position: over; /* Automatically positions annotations to the right in vertical-rl */
}

Inspecting Ruby Annotations in Safari Web Inspector

To inspect and audit ruby layout metrics using Safari Web Inspector:

1. Open Safari on macOS and load your website.
2. Right-click the ruby-annotated phrase and select Inspect Element.
3. In the Elements tree, expand the <ruby> tag to inspect individual <rt> elements.
4. Examine the Styles sidebar. Safari displays computed properties for ruby-position and ruby-align.
5. Check the Box Model view. Verify that the line-height of the parent paragraph accommodates the height of the <rt> element without causing uneven line spacing or overlapping adjacent lines.

Preventing Line Spacing Collisions on iOS

Because phonetic annotations expand the intrinsic block size of a line box, tightly spaced paragraphs can cause annotations to collide with descenders from the preceding line:

• Ensure parent paragraphs maintain a generous line height (such as line-height: 2.2) whenever inline ruby annotations are present.
• Test mobile rendering via USB debugging in mobile Safari on iOS, confirming that touch selection highlights the base text smoothly without selecting phonetic annotations.