A pergunta é basicamente essa:
- Pra que serve o
display: ruby
em CSS? - Esse atributo é novo?
- Quando usá-lo?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadedisplay:ruby
é o display padrão ta tag <ruby>
. Assim como o display padrão da <div>
é block
e do <span>
é inline
.
O Chrome parece não usar display:ruby
para a tag <ruby>
, mas no FireFox vc já pode conferir que funciona. Apesar disso, a tag não é tão nova assim, e consta no Working Draft da W3C desde 2014 como vc pode conferir no link oficial https://www.w3.org/TR/css-ruby-1/
A anotação Ruby é uma forma de anotação interlinear, consistindo em pequenas sequências de texto ao lado do texto base. Eles são normalmente usados em documentos do Leste Asiático para indicar pronúncia ou fornecer uma anotação curta.
Ou seja a tag ruby
é usada como marcação de texto para indicar a pronuncia de algum texto em outro idioma, normalmente Asiáticos. Além disso, a tag não deve ser usada sozinha, ela deve ser usada em conjunto com as tags <rp>
e <rt>
para auxiliar na construção da marcação. Um elemento <rp>
deve incluir cada um dos parênteses de abertura e fechamento que envolvem o elemento <rt>
que contém o texto da anotação. O <rp>
é opcional e ajuda a formatar o texto quando o navegador não tem suporte ao ruby.
Junto com a tag ruby vc pode usar também outras propriedade CSS como ruby-align
e ruby-position
para controlar como quer mostrar visualmente a anotação do texto. Aqui tem mais detalhes tecnicos https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Ruby
Veja o exemplo
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
Outro exemplo, mais complexo um pouco e com duas anotações.
<ruby>
<ruby>東<rt>とう</rt>南<rt>なん</rt></ruby>
<rt lang=en>Southeast</rt>
</ruby>
Fonte: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element
Atualmente segundo o CanIuse esse é o suporte dos navegadores https://caniuse.com/#feat=ruby