Marcar Ruby em HTML

Nosso objetivo neste capítulo é estudar Tag Ruby por meio de exemplos , na expectativa de satisfazer as necessidades dos alunos.

A tag <ruby> em HTML é usada para especificar uma pequena anotação de texto que aparece acima ou abaixo de um caractere, geralmente para indicar sua pronúncia, tradução ou transliteração na tipografia asiática.

O recurso de anotação Ruby é comumente usado em idiomas como chinês, japonês e coreano para fornecer informações adicionais sobre os caracteres usados ​​no texto. Ao usar a tag <ruby> , você pode fornecer essas informações de maneira visualmente clara e acessível a todos os usuários.

Aqui está uma anotação em Ruby:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<ruby>
生命<rt>shēngmìng</rt><rp>(</rp><rt>Life</rt><rp>)</rp>
</ruby>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A tag <ruby> pode ser usada para fornecer pronúncia e significado de palavras em diferentes idiomas. Aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<ruby>
<rt>amor</rt><rp>(</rp><rt>love</rt><rp>)</rp>
</ruby>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo está em um aplicativo de conversão de texto em fala, onde você pode usar a tag <ruby> para fornecer a pronúncia da palavra, assim:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<ruby>
<rt>ˈlɔv</rt>love
</ruby>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Uso de Tag Ruby

A tag <ruby> é usada para indicar uma anotação ruby.

As anotações do Ruby são textos curtos que estão vinculados ao texto principal e são usados ​​para descrever a pronúncia ou explicação dos caracteres correspondentes. É uma prática comum nas publicações japonesas incluir esse tipo de anotação.

Adicionar <rp> após <ruby> e <rt> : A tag <ruby> inclui um ou mais caracteres que precisam ser pronunciados ou esclarecidos. Um elemento <rt> fornece esclarecimentos e um elemento <rp> separado especifica qual texto deve ser exibido para navegadores que não permitem anotações ruby.

Usos Comuns

Aqui estão alguns usos específicos da tag <ruby> :

  • Em idiomas como chinês, japonês e coreano, o recurso de anotação Ruby é comumente usado para fornecer informações de pronúncia para caracteres. Ao usar a tag <ruby> com a tag <rt> para especificar a pronúncia do caractere, você pode tornar o texto mais acessível e compreensível para os leitores.
  • Além das informações de pronúncia, o recurso de anotação Ruby também pode ser usado para fornecer informações de tradução para caracteres. Ao usar a tag <ruby> com a tag <rt> para especificar a tradução do caractere, você pode ajudar os leitores a entender o significado do texto.
  • A transliteração envolve a representação de uma palavra ou frase em uma escrita ou alfabeto diferente. O recurso de anotação Ruby pode ser usado para fornecer informações de transliteração para caracteres, especialmente ao traduzir texto asiático para script latino. Ao usar a tag <ruby> com a tag <rt> para especificar a transliteração do caractere, você pode ajudar os leitores a entender a pronúncia do texto.
  • Em alguns casos, o recurso de anotação do Ruby pode ser usado para fornecer informações adicionais sobre os personagens, como seu significado histórico ou cultural. Ao usar a tag <ruby> com a tag <rt> para especificar essas informações, você pode aprimorar a compreensão e a apreciação do texto pelo leitor.

Importância da Marca HTML <ruby>

Aqui estão algumas das principais razões pelas quais a tag <ruby> é importante:

  • Ao fornecer informações de pronúncia, tradução ou transliteração para caracteres em tipografia asiática, você pode ajudar os leitores a entender melhor o texto e melhorar sua legibilidade.
  • O uso da tag <ruby> pode ajudar a melhorar a acessibilidade de seu conteúdo para usuários com deficiências, especialmente aqueles que usam leitores de tela. Ao fornecer informações de pronúncia, tradução ou transliteração dentro da tag <rt>, você pode garantir que todos os usuários possam acessar as informações fornecidas pelo texto Ruby.
  • A tag <ruby> é suportada por todos os principais navegadores da web, incluindo Internet Explorer 11 e Microsoft Edge. Isso significa que você pode usar a tag <ruby> com confiança, sabendo que ela será compatível com a maioria dos navegadores de seus usuários.
  • A tag <ruby> é semanticamente correta e fornece uma indicação clara do propósito do conteúdo dentro dela. Isso pode ajudar a melhorar a legibilidade e a manutenção do seu código.

Atributos

Global

A Tag Ruby <ruby> são compatíveis com Atributos Globais em HTML.

Evento

A tag Tag Ruby <Ruby> também acomoda atributos de evento HTML.


Compatibilidade do navegador

De acordo com a tabela, são listadas as versões do navegador da Web capazes de lidar totalmente com a tag.

Elemento
<rubi> 5,0 5.5 38,0 5,0 15,0

HTML <ruby> Benefícios

A tag <ruby> em HTML tem vários benefícios, incluindo:

  • O recurso de anotação Ruby fornecido pela tag <ruby> pode ajudar a melhorar a legibilidade do texto em idiomas asiáticos, fornecendo informações de pronúncia, tradução ou transliteração para caracteres.
  • A tag <ruby> também pode ajudar a aprimorar a acessibilidade do seu conteúdo, especialmente para usuários com deficiências que usam leitores de tela. Ao fornecer informações de pronúncia, tradução ou transliteração dentro da tag <rt> , você pode garantir que todos os usuários possam acessar as informações fornecidas pelo texto Ruby.
  • A tag <ruby> é semanticamente correta e fornece uma indicação clara do propósito do conteúdo dentro dela. Isso pode ajudar a melhorar a legibilidade e a manutenção do seu código.
  • A tag <ruby> é suportada por todos os principais navegadores da web, incluindo Internet Explorer 11 e Microsoft Edge. Isso significa que você pode usar a tag <ruby> com confiança, sabendo que ela será compatível com a maioria dos navegadores de seus usuários.
  • Usar a tag <ruby> para fornecer informações de pronúncia, tradução ou transliteração para caracteres em tipografia asiática mostra sensibilidade cultural e respeito pelos leitores de seu conteúdo.
Deixe sua reação abaixo para encorajar nossos esforços, ou para nos sugerir algumas melhorias para a melhoria deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone