Definición destacada
¿Como funciona el comando en HTML5: 'ruby'?
Última modificación: 2024-06-18
Instrucción HTML5: <ruby>
El elemento <ruby> en HTML5 es utilizado para representar anotaciones ruby, las cuales son convenciones tipográficas comunes en Japón, China y otras culturas asiáticas que se usan para proporcionar una pronunciación o transliteración de ideogramas. Ruby es especialmente útil para clarificar el significado o la pronunciación de caracteres complejos o menos comunes.
Atributos del elemento <ruby>
El elemento <ruby> como tal no posee atributos únicos reservados exclusivamente para él más allá de los globales que son comunes a todos los elementos HTML. Algunos de estos atributos globales incluyen:
- class: Permite asignar una o más clases CSS al elemento.
- id: Define un identificador único para el elemento.
- style: Especifica declaraciones de estilo CSS en línea.
- title: Ofrece información adicional sobre el elemento.
- lang: Indica el idioma del contenido del elemento.
- dir: Define la dirección del texto (ltr para izquierda a derecha, rtl para derecha a izquierda).
Es importante notar que <ruby> casi siempre se utiliza en combinación con otros elementos específicos para completar su funcionalidad, como <rt> (ruby text) y <rp> (ruby parenthesis text).
<rt>: Representa el texto de anotación ruby. Este elemento define la pronunciación o transliteración del texto contenido en<ruby>.<rp>: Proporciona anotaciones entre paréntesis para navegadores que no soportan rutinas ruby. Generalmente se coloca antes y después del<rt>para asegurar compatibilidad.
Uso de <ruby> en HTML5 con ejemplos
Ejemplo Básico: Anotación Ruby en Japonés
Veamos un ejemplo sencillo donde se usa <ruby> para mostrar la lectura fonética de un carácter Kanji en japonés.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Anotación Ruby</title>
<style>
ruby {
font-size: 24px;
}
rt {
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<p>Esta es una demostración de texto con anotación ruby:</p>
<p>
<ruby>
漢字 (Kanji)
<rt>かんじ</rt>
</ruby>
</p>
</body>
</html>En este ejemplo:
- El texto
漢字(Kanji) es el carácter que necesita anotación. - El elemento
<rt>se usa para mostrar la lectura fonética "かんじ" (kanji) encima o al lado del carácter basado en el estilo del navegador.
Ejemplo con <rp> para Compatibilidad
Aquí utilizamos <rp> para proporcionar paréntesis que aseguren la legibilidad en navegadores que no soportan anotaciones ruby.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Anotación Ruby</title>
</head>
<body>
<p>Esta es una demostración de texto con anotación ruby y soporte de compatibilidad:</p>
<p>
<ruby>
漢字 (Kanji)
<rp>(</rp>
<rt>かんじ</rt>
<rp>)</rp>
</ruby>
</p>
</body>
</html>En esta variación:
<rp>se coloca antes y después de<rt>. Si el navegador no soporta ruby, se mostrará el texto de<rt>entre paréntesis para mantener la claridad de la información, es decir, aparecerá como漢字 (かんじ).
Utilizando estos elementos conjuntamente, se puede garantizar que las anotaciones ruby sean accesibles y adecuadamente representadas en una variedad de contextos y navegadores.