ruby-align

Experimental: Esta é uma tecnologia experimental (en-US)
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 value	`space-around`
Aplica-se a	ruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inherited	yes
Computed value	as specified
Animation type	by 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          | (en-US)
  center         | (en-US)
  space-between  | (en-US)
  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

Especificação	Status	Comentário
CSS Ruby Layout Module Level 1 The definition of 'ruby-align' in that specification.	Rascunho atual	Definição inicital

Compatilibade de Navegador

BCD tables only load in the browser

Veja também

Elementos Ruby do HTML: <ruby>, <rt> (en-US), <rp> (en-US), and <rtc> (en-US).
Propriedades Ruby do CSS: ruby-position (en-US), ruby-merge.