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

You are here: Reference > JavaScript > client-side > style handling > properties > rubyOverhang

rubyOverhang style property

Browser support:

Specifies or returns the Ruby text position, relative to the base text defined by the ruby tag.

Syntax:

object.rubyOverhang;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: ruby-overhang

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the rubyOverhang property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeRubyOverhang (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var rubyValue = selectTag.options[whichSelected].text;

            var ruby = document.getElementById ("myRuby");

            if ('rubyOverhang' in ruby.style) {
                ruby.style.rubyOverhang = rubyValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <ruby id="myRuby">
        Ruby base.
        <rt>Ruby text.</rt>
    </ruby>

    <br /><br />
    Change rubyOverhang property:
    <br />
    <select onchange="ChangeRubyOverhang (this)" size="3">
        <option selected="selected" />auto
        <option />whitespace
        <option />none
    </select>
</body>