ruby-align
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 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
/* 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
:
<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
Specification |
---|
CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |
Compatilibade de Navegador
BCD tables only load in the browser
Veja também
- Elementos Ruby do HTML:
<ruby>
,<rt>
,<rp>
, and<rtc>
. - Propriedades Ruby do CSS:
ruby-position
,ruby-merge
.