css3 ruby : ほぼ全てのブラウザに対応したようです
css3 の rubyプロパティ ruby-align: center; は
Firefox では以下のように意図するように表示されるのですが
unweit der ukrainischen Grenze
********************
Chrome, Edge に関しては 以下のように意図するように表示されてませんでした。
unweit der ukrainischen Grenze
* * * * * * * * * * * * * * * * *
このように ruby 機能に関してはブラウザによりまちまちであったのが、ほぼ一致したようです。
ただし Edge に関しては
ruby-align: center; の箇所を text-align: center;
としないと意図するように表示されないようです。
同時に行間が重なる場合は css の先頭部分を以下のように "メイリオ" に変更し
body {
font: normal 13px arial, helvetica, hirakakupro-w3, osaka, "メイリオ", sans-serif;
}
css: line-height: を
line-height: 1.5 or 2; としてやれば解消できます
ruby-alignプロパティ の詳細は、こちらを参照してください
♦ --参考までに CSS と HTML--
* CSS
.ruby {
ruby-position:under;
}
.ruby rt {
font-family:Times New Roman;
font-size: 60%;
ruby-align: center;
text-align: center;
}
* HTML
<ruby class="ruby">unweit der ukrainischen Grenze<rt>ウクライナ国境からそれほど遠くない</ruby>
以上です。