CSSでデザイン調整可能なルビ - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

[zuboriradio]

“[data-ruby] { position: relative; } [data-ruby]::before { content: attr(data-ruby); position: absolute; top: -1em; left: 0; right: 0; margin: auto; font-size: 0.5em; } /* 以下追加 */ rt { display: none; }”

[hharunaga]

<ruby>タグでは、IE/Edge、Windows版のChrome、Firefoxでは行間が変わってしまうので、それを使わない方法の例。ただし、Chromeは最小フォントサイズが10pxなので、本文が小さい場合、折り返してしまうため要注意。