RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align below:

ruby-align - CSS | MDN

ruby-align

Baseline 2024

Newly available

The ruby-align CSS property defines the distribution of the different ruby elements over the base.

Syntax

/* Keyword values */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/* Global values */
ruby-align: inherit;
ruby-align: initial;
ruby-align: revert;
ruby-align: revert-layer;
ruby-align: unset;

Values

start: Is a keyword indicating that the ruby will be aligned with the start of the base text.
center: Is a keyword indicating that the ruby will be aligned at the middle of the base text.
space-between: Is a keyword indicating that the extra space will be distributed between the elements of the ruby.
space-around: Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

Formal definition Formal syntax

ruby-align = 
  start          |
  center         |
  space-between  |
  space-around

Examples Ruby aligned at the start of the base text HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>ï¼</rp><rt>short ruby</rt><rp>ï¼</rp>
</ruby>

CSS

ruby {
  ruby-align: start;
}

Result Ruby aligned at the center of the base text HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>ï¼</rp><rt>short ruby</rt><rp>ï¼</rp>
</ruby>

CSS

ruby {
  ruby-align: center;
}

Result Extra space distributed between and around ruby elements HTML

<ruby>
  <rb>This is a long text to check</rb>
  <rp>ï¼</rp><rt>short ruby</rt><rp>ï¼</rp>
</ruby>

CSS

ruby {
  ruby-align: space-around;
}

Result Specifications Browser compatibility See also

HTML Ruby elements: <ruby>, <rt>, <rp>, and <rtc>.
CSS Ruby properties: ruby-position, ruby-merge.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4