Definición destacada
¿Como funciona el comando en HTML5: 'rt'?
Última modificación: 2024-06-17
Descripción del Elemento <rt> en HTML5
El elemento <rt> es una característica específica del lenguaje HTML5 que se emplea dentro de otros elementos de Ruby Annotation, particularmente dentro del elemento <ruby>. 'Ruby' es un sistema de tipografía que permite anotar caracteres o palabras en lenguajes asiáticos como el japonés y el chino con su pronunciación o significado.
El <rt> se utiliza para definir el texto de anotación que proporciona una guía de pronunciación (o un glifo auxiliar) para un carácter o una cadena de caracteres dentro de un marco de Ruby. Estos son algunos detalles sobre el elemento <rt>:
Atributos del <rt>
- Globales: El
<rt>acepta todos los atributos globales que pueden utilizarse con elementos HTML5, comoclass,id,style,title, ylang, entre otros.
Nota: El elemento <rt> no tiene atributos específicos adicionales más allá de los atributos globales.
Atributos Globales:
- id: Define un identificador único para el elemento.
- class: Permite asignar una o más clases de estilos CSS al elemento.
- style: Incluye declaraciones de estilo en línea.
- title: Proporciona un texto explicativo adicional que aparece como una breve descripción emergente.
- lang: Especifica el idioma del contenido del elemento.
- dir: Define la dirección del texto (
ltrpara "left to right" o "de izquierda a derecha" yrtlpara "right to left" o "de derecha a izquierda"). - *data- attributes**: Permite añadir atributos personalizados.
Uso del <rt> en HTML5
El elemento <rt> se usa dentro de un <ruby> para proporcionar una anotación auxiliar para uno o más caracteres. A continuación, se presentan ejemplos sencillos de su uso:
Ejemplo 1: Uso Básico del <ruby> y <rt>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo RT</title>
</head>
<body>
<p>
Aquí hay un ejemplo en japonés: <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>.
</p>
</body>
</html>En este ejemplo:
- El
<ruby>encierra el término "漢字". - Los elementos
<rt>correspondientes proporcionan las anotaciones de pronunciación "かん" para "漢" y "じ" para "字".
Ejemplo 2: Rubio Compuesto
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Complejo RT</title>
</head>
<body>
<p>
Aquí hay una frase con anotaciones: <ruby>学校<rt>がっこう</rt>へ行く<rt>いく</rt></ruby>.
</p>
</body>
</html>En este ejemplo más complejo:
- El
<ruby>envuelve la frase "学校へ行く". - Los
<rt>proporcionan las lecturas "がっこう" para "学校" y "いく" para "行く".
Ejemplo 3: Usar <rt> con Atributos Globales
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo RT con Atributos Globales</title>
</head>
<body>
<p>
Aquí está un término con estilo personalizado: <ruby>本<rt class="pronunciacion">ほん</rt></ruby>.
</p>
</body>
</html>En este caso:
- Se añade una clase CSS al
<rt>para estilo personalizado, que podría estar definida en el archivo CSS asociado como:
.pronunciacion {
color: red;
font-weight: bold;
}El atributo class puede ser útil para aplicar estilos específicos a las anotaciones de Ruby mediante CSS.
Estos ejemplos muestran cómo se usa el <rt> en HTML5 para proporcionar anotaciones de pronunciación o explicación en scripts asiáticos, facilitando la lectura y el aprendizaje de estos caracteres.