'ruby-overhang' Example : ruby overhang « CSS Attributes and Javascript Style Properties « HTML CSS Reference






  1. HTML CSS Reference
  2. CSS Attributes and Javascript Style Properties
  3. ruby overhang

'ruby-overhang' Example

    
<html>
<body>
<div style="background-color:#ccffff; width:200">
    <ruby style="rubyoverhang:whitespace">
        <span style="font-size:16pt">
        base text
        </span>
        <span style="font-size: 14pt">
        this text is in the same line as the base text
        </span>
        <rt>
        <span style="font-size: 14pt; 
                     color:red">
        ruby text
        </span>
    </ruby>

    <ruby style="rubyoverhang:auto">
        <span style="font-size:16pt">
        base text
        </span>
        <span style="font-size: 14pt">
        this text is in the same line as the base text
        </span>
        <rt>
        <span style="font-size: 14pt; 
                     color:red">
        ruby text
        </span>
    </ruby>

    <ruby style="rubyoverhang:none">
        <span style="font-size:16pt">
        base text
        </span>
        <span style="font-size: 14pt">
        this text is in the same line as the base text
        </span>
        <rt>
        <span style="font-size: 14pt; 
                     color:red">
        ruby text
        </span>
    </ruby>
</div>
</body>
</html>








Related examples in the same category

1.'ruby-overhang' Syntax and Note
2.'ruby-overhang' Possible Values
3.'ruby-overhang' is applied to