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 valuespace-around
Aplica-se aruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inheritedyes
Computed valueas specified
Animation typediscrete

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 | (en-US) center | (en-US) space-between | (en-US) 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.
Rascunho atual Definição inicital

Compatilibade de Navegador

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

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