Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
You are here: Reference > CSS > properties > ruby-overhang

ruby-overhang property

Browser support:
Specifies the Ruby text position, relative to the base text defined by the ruby tag.
JavaScript page for this property: rubyOverhang. You can find other example(s) there.

Possible values:

 One of the following values: 
auto
Default. If the Ruby text (rt) is wider than the width of the base ruby's content, then the Ruby text (rt) hangs above other text content outside the base ruby's content.
none
If the Ruby text (rt) is wider than the width of the base ruby's content, then the Ruby text (rt) hangs above only text adjacent to its base ruby.
whitespace
If the Ruby text (rt) is wider than the width of the base ruby's content, then the Ruby text (rt) hangs above only whitespace characters.
Default: auto.

Example HTML code 1:

This example illustrates the use of the ruby-overhang property:
<head>
    <style>
        ruby.example {
            ruby-overhang: whitespace;
            background-color: #EAE9E6;
        }
        rt.example {
            font-size: 12px;
            color: red;
        }
    </style>
</head>
<body>
    <ruby class="example">
        Ruby base.
        <rt class="example">Ruby text.</rt>
    </ruby>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content