>
>
> 最後に、村田さんご指摘の親文字とルビの間を空ける機能についてですが、Chromiumのルビ関連issue
> <https://bugs.chromium.org/p/chromium/issues/list?q=component%3ABlink%3ELayout%3ERuby&can=2>
> で探すと、おそらくこれ
> <https://bugs.chromium.org/p/chromium/issues/detail?id=1233420>
> が該当するかと思います。ここではline-heightを使いたいと書いてありますが、line-heightはFirefox含めどのブラウザーでも動作しませんでした。
>
>
> 現状の回避策としては、Firefoxはpaddingあるいはmarginが使えて、Chrome/Safariではtransformが使えるようです。逆にFirefoxはtransformを無視して、Chrome/Safariをpadding/marginを無視するようなので、両方指定すれば全部のブラウザーで動作するようです。
> サンプルはこちら
> <https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0Abody%20%7B%20font-size%3A%2020px%3B%20margin-top%3A%2030px%3B%20%7D%0Aruby%20%3E%20ruby%20%7B%0A%20%20ruby-position%3A%20under%3B%0A%20%20-webkit-ruby-position%3A%20after%3B%0A%7D%0Aruby%20%3E%20rt%20%7B%0A%20%20padding-bottom%3A%2010px%3B%0A%20%20transform%3A%20translate(0%2C%20-10px)%3B%0A%7D%0Aruby%20%3E%20ruby%20%3E%20rt%20%7B%0A%20%20padding-top%3A%2010px%3B%0A%20%20transform%3A%20translate(0%2C%2010px)%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Cruby%3E%0A%20%20%3Cruby%3E%0A%20%20%20%20%E4%BA%94%E7%B5%8C%0A%20%20%20%20%3Crt%3E%E3%81%94%E3%81%8D%E3%82%87%E3%81%86%3C%2Frt%3E%0A%20%20%3C%2Fruby%3E%0A%20%20%3Crt%3E%E3%81%94%E3%81%91%E3%81%84%3C%2Frt%3E%0A%3C%2Fruby%3E>
> 。Chrome/Safariは、WebKit実装当時のW3Cでの議論に基づき、ブロック扱い(DIVやPと同様)になっていますが、Firefoxはインライン扱い(SPANと同様)になっているようです。transformはインラインには適用されないので、このような違いが生まれているのではないかと推測されます。
>
transformで動かすのを試してみましたが、前の行に思いっきり
重なってしまうようです。回避策はありますか?行間を最初か
ら思いっきり空けておく?
村田 真