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
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
.