Theruby-overhangCSS property specifies whether or not a<ruby> annotation overhangs any surrounding text.

Try it

ruby-overhang: auto;

ruby-overhang: none;

<section>  <p>    あの<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

auto

When a ruby annotation container is longer than its corresponding base container, the annotation may partially overlap adjacent text.Whether, and how much to overhang are determined by the user agent.

none

A keyword indicating that the ruby is never allowed to extend past adjacent containers.

Description

Theruby-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 — whenruby-overhang: none is set on the<ruby> element — that element behaves like an inline box, as if itsdisplay property were set toinline 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.Withauto, the default, content may overhang, but it will not overhang if doing so would overlap adjacent<rt> elements or elements with adisplay value resolving toruby-base orruby-text.

Formal definition

Formal syntax

ruby-overhang =
auto|
none

Examples

Ruby overhanging base text

This examples demonstrates both values of theruby-overhang property.

HTML

We include two paragraphs with identical<ruby> content and structures, other than their class names.

<p>  あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby  ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。</p><p>  あの<ruby>表<rp>(</rp><rt>ひょう</rt><rp>)</rp></ruby  ><ruby>現<rp>(</rp><rt>げん</rt><rp>)</rp></ruby>は面白い。</p>

CSS

A redoutline of1px helps highlight the text annotation of<rt> elements.The first paragraph hasruby-overhang: auto and the second hasruby-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

Whenruby-overhang is set tonone, 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 thenone example in supporting browsers, there is no overlap between ruby content and not-associated ruby text.

Specifications

Browser compatibility

See also

• ruby-align
• text-transform: full-size-kana
• <ruby>
• <rt>
• <rp>