在html中移位的子文本

Question

如何簡單和任何瀏覽器兼容，而不是添加附加到正常文本的'sub'標籤文本，如照片的第一部分所示，將它添加到指定文本的下方（在第二部分中描述）。整個文本應該像第一部分一樣不間斷地運行。第二部分的子文本應該繼承子風格的風格。

Answer 1

最有前途的方法可以在this question找到。

你也可以考慮使用CSS「ruby」，但它可能不會讓你一路走到你想去的地方。

<div style="font-size: x-large; "> 
 
    establishment 
 
    <ruby style="ruby-position: under; "> 
 
    <rb>establishment</rb> 
 
    <rt style="transform: translateY(3em); ">establishment</rt> 
 
    </ruby> 
 
    establishment 
 
</div>

不幸的是，ruby-position有窮到不存在的瀏覽器支持。因此在上面的例子中使用了transform。