HTML でふりがなを付ける（ruby）
<ruby>タグを使ってふりがなをつけます：
html
<ruby>
<rb>台湾</rb>
<rp>（</rp>
<rt>たいわん</rt>
<rp>）</rp>
</ruby><ruby>
<rb>台湾</rb>
<rp>（</rp>
<rt>たいわん</rt>
<rp>）</rp>
</ruby><ruby>：親要素<rb>：対象テキスト<rt>：ふりがな<rp>：未対応のブラウザで表示されます
未対応のブラウザではこのように表示されます：
台湾（たいわん）
CSSを使ってデザインを調整する
バランスが悪かったので、CSSを使って調整します。
rt は非表示にして、擬似要素でふりがなを表示させます：
html
<ruby data-ruby="たいわん">
<rb>台湾</rb>
<rt>たいわん</rt>
</ruby><ruby data-ruby="たいわん">
<rb>台湾</rb>
<rt>たいわん</rt>
</ruby>css
[data-ruby] {
position: relative;
}
[data-ruby]::before {
content: attr(data-ruby);
position: absolute;
top: -2em;
left: 0;
right: 0;
margin: auto;
font-size: 0.5em;
}
rt {
display: none;
}[data-ruby] {
position: relative;
}
[data-ruby]::before {
content: attr(data-ruby);
position: absolute;
top: -2em;
left: 0;
right: 0;
margin: auto;
font-size: 0.5em;
}
rt {
display: none;
}