Esta tradução está incompleta. Ajude atraduzir este artigo.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
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 |
| Midia | visual |
| Computed value | as specified |
| Animatable | não |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
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
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 {
ruby-align:start;
}
Isso dará o seguinte resultado:
Ruby alinhado no centro do texto base
ruby {
ruby-align:center;
}
Isso dará o seguinte resultado:
Espaço extra distribuído entre os elementos do 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 {
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. |
Working Draft | Definição inicital |
Compatilibade de Navegador
| Aspecto | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Suporte básico | Não suportado | 38 (38) | Não suportado[1] | Não suportado | Não suportado |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte básico | Não suportado | 38.0 (38) | Não suportado[1] | Não suportado | Não suportado |
[1] Desde a versão 9 o Internet Explorer implementa um rascunho inicial do Ruby do CSS onde o ruby-align tinha os seguintes valores: auto, left, center, right, distribute-letter, distribute-space, and line-edge. Aqui está uma simples tabela de conversão:
| Sintaxe do IE | Sintaxe padrão |
|---|---|
auto |
Não usa ruby-align |
left |
Usa start (em scripts ltr) |
center |
center |
right |
Usa start (em scripts rtl) |
distribute-letter |
Nenhum equivalente direto, usa space-between ou space-around |
distribute-space |
space-around |
line-edge |
Nenhum equivalente direto. |
Veja também
- Elementos Ruby do HTML:
<ruby>,<rt>,<rp>, and<rtc>. - Propriedades Ruby do CSS:
ruby-position,ruby-merge.