28914


HTMLで`<ruby>`を追加すると、行間が非常に広がる事があります。下記の例のように、行間があまり大きくなったことなく`<ruby>`何とか設定できますでしょうか。

[![画像の説明をここに入力](https://i.stack.imgur.com/PYPd9.png)](https://i.stack.imgur.com/PYPd9.png)


CC BY-SA 3.0
2016-09-15T23:55:17.883
28912
2016-09-16T01:10:28.237
16876
question
html css
HTML： ふりがな（ruby）を追加するときに行間拡大を少なくする


テキストの行間が、ルビの高さより大きければ、ルビのある行間だけ大きくなる事はありません。  
地の文の`line-height`とルビの文字の`font-size`を適切なバランスで設定すればよいです。

質問の画像のテキストは、`line-height`が`1.8em`くらいはありそうです。  
行間は`1.8em - 1em`で`0.8em`程度になります。  
ルビの文字(`<rt>`)の`font-size`は`0.5em`(日本語組版でのデフォルトのようです)くらいでしょうか。  
`0.8em - 0.5em = 0.3em` で、`0.3em`程度の余裕がある事になります。

[code]

    h1{ font-size: 1em; }
    
    #low{ line-height: 1em; }
    
    #just{ line-height: 1.5em; }
    
    #high{ line-height: 2.25em; }
    
    [id] rt{ font-size: 0.5em; }
[/code]

[code]

    <h1>ルビ無し(ブラウザデフォルト)</h1>
    <p>
    一行目。あいうえお。かきくけこ。<br />
    二行目。アイウエオ。カキクケコ。
    <br />
    三行目。あいうえお。かきくけこ。
    </p>
                                                                                          
    <h1>ブラウザデフォルト</h1>
    <p>
    一行目。 あいうえお。かきくけこ。<br />
    <ruby>二行目<rp>(</rp><rt>にぎょうめ</rt><rp>)</rp></ruby>。アイウエオ。カキクケコ。
    <br />
    三行目。あいうえお。かきくけこ。
    </p>
                                                                                          
    <h1>行間せまめ</h1>
    <p id="low">
    一行目。 あいうえお。かきくけこ。<br />
    <ruby>二行目<rp>(</rp><rt>にぎょうめ</rt><rp>)</rp></ruby>。アイウエオ。カキクケコ。
    <br />
    三行目。あいうえお。かきくけこ。
    </p>
                                                                                          
    <h1>ぴったり</h1>
    <p id="just">
    一行目。 あいうえお。かきくけこ。<br />
    <ruby>二行目<rp>(</rp><rt>にぎょうめ</rt><rp>)</rp></ruby>。アイウエオ。カキクケコ。
    <br />
    三行目。あいうえお。かきくけこ。
    </p>
                                                                                          
    <h1>行間ひろめ</h1>
    <p id="high">
    一行目。 あいうえお。かきくけこ。<br />
    <ruby>二行目<rp>(</rp><rt>にぎょうめ</rt><rp>)</rp></ruby>。アイウエオ。カキクケコ。
    <br />
    三行目。あいうえお。かきくけこ。
    </p>
[/code]


CC BY-SA 3.0
2016-09-16T01:10:28.237
28914
2016-09-16T01:10:28.237
3054
28912
answer