Etiqueta rp en HTML: paréntesis de alternativa para ruby
La etiqueta <rp> aporta delimitadores de texto, normalmente paréntesis, para separar una anotación <ruby> cuando el navegador no la presenta con ese formato. Úsala junto a <rt> si, por ejemplo, añades la lectura de un nombre japonés y quieres que una presentación lineal distinga el nombre de su pronunciación.
Ejemplo mínimo de rp
<ruby lang="ja">東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>東京 es el texto base y とうきょう es su lectura. Con la presentación ruby habitual, la lectura aparece pequeña junto al texto base, normalmente encima, y los paréntesis de <rp> no se ven. En una presentación sin ruby, la secuencia prevista es 東京(とうきょう).
Para probar este fragmento, sustituye los tres párrafos del documento completo de la siguiente sección por un párrafo que lo contenga.
Sintaxis y contexto válido
Escribe un <rp> antes de <rt> y otro después, como hijos directos del mismo <ruby>. El primero contiene el delimitador de apertura; el segundo, el de cierre. El contenido permitido de <rp> es texto: no insertes un <span>, una imagen ni otro elemento dentro.
Los ejemplos muestran </rp> explícitamente. En HTML puedes omitir ese cierre cuando lo sigue inmediatamente un <rt> u otro <rp>, o cuando ya no queda contenido en el padre. Mantenerlo escrito facilita reconocer qué delimitador pertenece a cada anotación. Estas reglas proceden de la definición normativa de <rp>.
Caso práctico: comparar ruby y texto lineal
Una ficha de viaje puede mostrar el nombre de Kioto con su lectura. Guarda este documento como comparar-rp.html, con codificación UTF-8, y ábrelo en el navegador. Incluye tres tratamientos identificados: ruby normal, transcripción lineal explícita y simulación por CSS.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comparar los delimitadores de rp</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
max-width: 38rem;
margin: 2rem auto;
padding: 0 1rem;
}
.simulacion ruby,
.simulacion rt,
.simulacion rp {
display: inline;
}
.simulacion rt {
font-size: inherit;
}
</style>
</head>
<body>
<h1>Nombre de la ciudad y su lectura</h1>
<p>Con ruby: <ruby lang="ja">京都<rp>(</rp><rt>きょうと</rt><rp>)</rp></ruby>.</p>
<p>Transcripción lineal: <span lang="ja">京都(きょうと)</span>.</p>
<p class="simulacion">Simulación CSS: <ruby lang="ja">京都<rp>(</rp><rt>きょうと</rt><rp>)</rp></ruby>.</p>
<p>La tercera línea modifica la presentación; no demuestra un navegador sin soporte.</p>
</body>
</html>La primera línea conserva la presentación ruby del navegador. La segunda siempre escribe 京都(きょうと) como texto corriente: sus paréntesis no dependen de <rp>. La tercera muestra esa misma secuencia porque las reglas hacen que <ruby>, <rt> y <rp> se presenten en línea y que la lectura tenga el tamaño del texto circundante.
Haz estas comprobaciones, una por vez, y recarga el archivo después de cada cambio:
- Cambia los paréntesis de los dos
<rp>de la tercera línea por[y]. La simulación mostrará京都[きょうと]; la transcripción explícita conservará sus paréntesis. - Elimina ambos
<rp>completos de esa línea. Verás京都きょうと, sin delimitadores. Si haces lo mismo en la primera, la anotación ruby sigue existiendo. - Recupera los delimitadores y retira el atributo
class="simulacion". La tercera línea recuperará la presentación ruby habitual, con los delimitadores ocultos.
Esta prueba permite examinar la lectura alternativa en un navegador moderno. Cambiar display mediante CSS es una simulación; no cambia el soporte real del navegador. Deshabilitar JavaScript tampoco provoca ese fallback: el documento funciona igual porque no tiene scripts.
Rp no sustituye a rt
Cada elemento tiene una tarea: <ruby> agrupa la base y su anotación, <rt> contiene la lectura y <rp> aporta sus delimitadores alternativos. Si colocas きょうと dentro de <rp> en lugar de <rt>, la pronunciación puede quedar oculta en la presentación ruby.
Elige ruby para relacionar visualmente una anotación con su base. Si necesitas mostrar siempre una lectura entre paréntesis, escribe una transcripción lineal como la segunda línea del ejemplo. rp no genera esa transcripción para otros formatos ni garantiza que un exportador conserve todo el texto.
Atributos y accesibilidad
<rp> admite atributos globales, pero no tiene atributos propios. En los ejemplos, lang="ja" en <ruby> declara el idioma del conjunto. La clase simulacion permite cambiar su presentación con CSS para observar los delimitadores.
No supongas que todos los lectores de pantalla anuncian la base, la anotación o los paréntesis de la misma manera. Cuando la lectura sea esencial, ofrece una explicación o transcripción explícita, como en el caso práctico, y comprueba el resultado con las tecnologías de asistencia de tu audiencia. Los mapeos de accesibilidad de HTML separan la exposición accesible de los elementos de su apariencia.
Errores frecuentes y preguntas
¿Rp debe contener la pronunciación? No. Escríbela en <rt> y reserva <rp> para los delimitadores.
¿Por qué no veo los paréntesis? La presentación ruby suele ocultarlos. Comprueba primero que existan en el código, que rodeen a <rt> dentro de <ruby> y que tus estilos no cambien su presentación. Usa después la comparación CSS para observarlos; su ausencia visual en la primera línea es el resultado esperado.
¿Puedo usar rp fuera de ruby? Su contexto válido es <ruby>. Para escribir una aclaración entre paréntesis en una frase corriente, basta el texto normal.
Compatibilidad y fuentes
Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <rp> como ampliamente disponible. Distingue el soporte visual de ruby de la lectura mediante tecnologías de asistencia; la compatibilidad del elemento no garantiza anuncios idénticos.
Consulta el HTML Living Standard sobre <rp> para contexto, contenido y cierres, y la referencia de MDN para su uso y compatibilidad. El papel de <ruby> y <rt> se limita aquí a entender dónde colocar los delimitadores.