Android WebView中<ruby>与<rt>文本对齐异常及回流问题

这是Android WebView的渲染兼容性Bug——WebView的Blink内核在writing-mode: vertical-rl结合多列布局（column-width）的场景下，对Ruby元素的回流计算和排版逻辑存在偏差，导致Ruby被裁剪、<rt>文本与汉字对齐错位。相同代码在Chrome中正常，是因为Chrome的移动端/桌面端内核已经修复了该类排版问题。

可以通过添加以下CSS规则强制Ruby元素作为整体参与排版，解决该问题：

ruby {
  display: inline-block;
  break-inside: avoid;
}

修改后的完整HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body {
            writing-mode: vertical-rl;
            width: 100vw;
            column-width: 100vh;
            margin: 0;
        }
        ruby {
            display: inline-block;
            break-inside: avoid;
        }
    </style>
</head>
<body>
<p>
    <ruby>漢字<rt>かんじ</rt></ruby>
    <ruby>漢字<rt>かんじ</rt></ruby>
    <ruby>漢字<rt>かんじ</rt></ruby>
    ... x 400
</p>
</body>
</html>

方案说明 #

• display: inline-block：将Ruby元素转为独立的内联块级单元，确保<rt>与汉字作为整体参与排版，避免内部结构被拆分导致对齐错位。
• break-inside: avoid：禁止Ruby元素被多列布局拆分到不同页面/列，彻底解决裁剪问题。

如果目标设备的WebView版本极低（Android 7.0及以下），可以额外给<rt>添加vertical-align: middle规则，进一步强化对齐效果。

内容的提问来源于stack exchange，提问作者Noah