ruby-overhang
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The ruby-overhang
CSS property specifies whether or not a <ruby>
annotation overhangs any surrounding text.
Try it
ruby-overhang: auto;
ruby-overhang: none;
<section id="default-example">
<p id="example-element">
あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>
</section>
#default-example {
font-size: 2em;
}
Syntax
/* Keyword values */
ruby-overhang: auto;
ruby-overhang: none;
/* Global values */
ruby-overhang: inherit;
ruby-overhang: initial;
ruby-overhang: revert;
ruby-overhang: revert-layer;
ruby-overhang: unset;
Values
Description
The ruby-overhang
property controls whether the ruby annotation text box (<rt>
) may overlap adjacent text outside the <ruby>
container box.
When ruby annotation text is not allowed to overhang — when ruby-overhang: none
is set on the <ruby>
element — that element behaves like an inline box, as if its display
property were set to inline
with only its own contents rendered within its boundaries and adjacent elements not crossing the boundary box.
By default, the content of an <rt>
element is allowed to overhang, so content may overlap the <ruby>
container box, partially rendering over or under surrounding inline-level content.
With auto
, the default, content may overhang, but it will not overhang if doing so would overlap adjacent <rt>
elements or elements with a display
value resolving to ruby-base
or ruby-text
.
Formal definition
Initial value | auto |
---|---|
Applies to | ruby annotation containers |
Inherited | yes |
Computed value | the specified keyword |
Animation type | by computed value type |
Formal syntax
ruby-overhang =
auto |
none
Examples
Ruby overhanging base text
This examples demonstrates both values of the ruby-overhang
property.
HTML
We include two paragraphs with identical <ruby>
content and structures, other than their class names.
<p class="auto">
あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>
<p class="none">
あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby
><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。
</p>
CSS
A red outline
of 1px
helps highlight the text annotation of <rt>
elements.
The first paragraph has ruby-overhang: auto
and the second has ruby-overhang: none
.
p {
font-size: 40px;
display: block;
margin: 0.5rem;
}
rt {
font-size: 28px;
outline: 1px solid red;
}
.auto {
ruby-overhang: auto;
}
.none {
ruby-overhang: none;
}
Results
When ruby-overhang
is set to none
, the annotation text is not allowed to overlap the adjacent boxes of base ruby text. If you look closely, you may notice that in the first paragraph, the red box encasing the ruby text slightly overlaps parts of non-associated <ruby>
content, whereas in the none
example in supporting browsers, there is no overlap between ruby content and not-associated ruby text.
Specifications
Specification |
---|
CSS Ruby Annotation Layout Module Level 1 # propdef-ruby-overhang |
Browser compatibility
See also
ruby-align
text-transform
: full-size-kana<ruby>
<rt>
<rp>