HTML and CSS Reference
In-Depth Information
The visual presentation of how elements should be resized is not set, but so far it appears
that supporting browsers present a bottom-right resize corner indication.
Compatibility
CSS3
Chrome 3+, Safari 3+
Notes
• The property applies only to elements that do not have an
overflow
value of
visible
. In general, this means that often you may set
overflow: auto
on
elements you wish to resize, as
visible
is the common value. Form fields, of
course, do not have that value and require no extra property.
• This property is commonly used on
<textarea>
tags.
ruby-align
This property defines the alignment of Ruby text as defined by a
<rt>
tag, in relation to
base text defined by a
<ruby>
tag.
Syntax
ruby-align: auto | center | distribute-letter | distribute-space | left |
line-edge | right
The default value of
auto
leaves it to the browser to align the Ruby text. A value of
center
centers the Ruby text in the center of the text below if smaller or centers the reading guide
text above if larger. The
distribute-letter
and
distribute-space
values distribute the
reading guide text evenly across the text below, adding space in the case of
distribute-
space
. Values of
left
and
right
align the reading guide text above to the left or right when
it is smaller than the base text. A value of
line-edge
normally centers the reading guide text
unless the text is at the end of line where in that case it lines it up to the edge instead.
Examples
<p>
123
<ruby style="ruby-align: left;">
日本語
<rp>
(
</rp><rt>
にほんご
</rt><rp>
)
</rp></ruby>
456
</p>
<p>
123
<ruby style="ruby-align: right;">
日本語
<rp>
(
</rp><rt>
にほんご
</
rt><rp>
)
</rp></ruby>
456
</p>
<p>
123
<ruby style="ruby-align: center;">
日本語
<rp>
(
</rp><rt>
にほんご
</
rt><rp>
)
</rp></ruby>
456
</p>
<p>
123
<ruby style="ruby-align: distribute;">
日本語
<rp>
(
</rp><rt>
にほんご
</
rt><rp>
)
</rp></ruby>
456
</p>
