HTML CSS Reference/CSS Attributes and Javascript Style Properties/ruby overhang

Материал из Web эксперт
Перейти к: навигация, поиск

"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>



"ruby-overhang" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |currentStyle                    <ruby>                        |
|                |runtimeStyle                    style                         |
+----------------+--------------------------------------------------------------+



"ruby-overhang" Possible Values

Possible Values
auto            The default; ruby text is positioned over text
whitespace      positioned over white-space characters
none            positioned over text adjacent to its base text



"ruby-overhang" Syntax and Note

Note:
Whether the ruby text overhangs the base text only or adjacent text. 
Syntax:
    
element { ruby-overhang: value }
elementID.style.rubyOverhang = "value"
document.all.elementID.style.rubyOverhang = "value"