We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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
Animation typediscrete
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.
Rascunho atual Definição inicital

Compatilibade de Navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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: ygormaximo
Última atualização por: ygormaximo,