Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content