MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ruby-align

Esta tradução está incompleta. Por favor, ajude a traduzir 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 valuespace-around
Aplica-se aruby bases, ruby annotations, ruby base containers, ruby annotation containers
Inheritedyes
Midiavisual
Computed valueas specified
Animatablenão
Canonical orderthe 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

Etiquetas do documento e colaboradores

 Colaboradores desta página: maximozsec
 Última atualização por: maximozsec,