ruby-align

Baseline 2024
Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Summary

A propriedade ruby-align do CSS define a distribuição dos direfentes elementos do ruby sobre a base.

Initial valuespace-around
Aplica-se aruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inheritedyes
Computed valueas specified
Animation typeby computed value type

Sintaxe

css
/* Valores chave */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/* Valores globais */
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;

Values

start

É uma palavra-chave indicando que o ruby será alinhado com o início do texto base.

center

É uma palavra-chave indicando que o ruby será alinhado no meio do texto base.

space-between

É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby.

space-around

É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby e em torno deles.

Sintaxe formal

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

Exemplos

Esse HTML irá renderizar diferentemente com cada valor do ruby-align:

html
<ruby>
  <rb>Esse é um grande texto para verificar</rb>
  <rp>（</rp><rt>ruby curto</rt><rp>）</rp>
</ruby>

Ruby alinhado no ínicio do texto base

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;
}

Isso dará o seguinte resultado:

Ruby alinhado no centro do texto base

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;
}

Isso dará o seguinte resultado:

Espaço extra distribuído entre os elementos do ruby

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-between;
}

Isso dará o seguinte resultado:

Espaço extra distribuído entre os elementos do ruby e em torno deles

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;
}

Isso dará o seguinte resultado:

Especificações

Specification
CSS Ruby Annotation Layout Module Level 1
# ruby-align-property

Compatilibade de Navegador

Veja também