In order to access this site you need to enable JavaScript!

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>