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

You are here: Reference > CSS > properties > ruby-align

ruby-align property

Browser support:

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

JavaScript page for this property: rubyAlign. You can find other example(s) there.

Possible values:

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>