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

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

rubyAlign style property

Browser support:

Specifies or returns the horizontal alignment of the Ruby text defined by the rt tag, relative to the base text defined by the ruby tag.

Syntax:

object.rubyAlign;

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

This property is read/write.

CSS page for this property: ruby-align

Possible values:

The type of this property is string.

One of the following values:

auto

Default. Browser determines how the Ruby text (rt) is to be aligned.

center

The Ruby text rt is centered within the width of the base ruby's content.

distribute-letter

If the width of the Ruby text (rt) is smaller than the width of the base ruby's content, then the Ruby text (rt) is evenly distributed across the width of the base content ruby.

distribute-space

If the width of the Ruby text (rt) is smaller than the width of the base ruby's content, then the Ruby text (rt) is centered and the left/right margin is filled up with whitespaces.

left

The Ruby text rt is aligned to the left of the contents of the base ruby.

line-edge

If it is not adjacent to a line edge, the Ruby text is centered.

right

The Ruby text rt is aligned to the right of the contents of the base ruby.

Default: auto.

Example HTML code 1:

This example illustrates the use of the ruby-align property:

<head>
    <style>
        ruby.example {
            ruby-align: right;
            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 rubyAlign property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeRubyAlign (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 ('rubyAlign' in ruby.style) {
                ruby.style.rubyAlign = 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 rubyAlign property:
    <br />
    <select onchange="ChangeRubyAlign (this)" size="7">
        <option />auto
        <option />left
        <option selected="selected" />center
        <option />right
        <option />distribute-letter
        <option />distribute-space
        <option />line-edge
    </select>
</body>