ruby-align

Summary

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

Sintaxe

/* 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:

<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

<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby { ruby-align: start; } 

Isso dará o seguinte resultado:

Ruby alinhado no centro do texto base

<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby { ruby-align: center; } 

Isso dará o seguinte resultado:

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

<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby { ruby-align: space-between; } 

Isso dará o seguinte resultado:

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

<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby { ruby-align: space-around; } 

Isso dará o seguinte resultado:

Especificações

Compatilibade de Navegador

Veja também

• Elementos Ruby do HTML: <ruby>, <rt>, <rp>, and <rtc>.
• Propriedades Ruby do CSS: ruby-position, ruby-merge.