Texto enriquecido (Rich Text)

¿Qué es el texto enriquecido?

El texto enriquecido (rich text) es texto que lleva formato junto con los caracteres: negrita, cursiva, títulos, listas, enlaces, colores y a veces imágenes o tablas. El texto plano solo contiene caracteres. El texto enriquecido necesita un formato para guardar el formato visual, casi siempre HTML en la web o Rich Text Format (RTF) en los procesadores de texto. Los editores que permiten escribirlo de forma visual se llaman editores de texto enriquecido o editores WYSIWYG.

Cómo funciona el texto enriquecido

Detrás de la barra de herramientas, un editor guarda el formato como marcado o como documento estructurado. En la web, el navegador puede hacer editable un elemento con el atributo contenteditable. Según MDN, el valor true conserva el formato al pegar, mientras que plaintext-only lo elimina. La mayoría de los editores en producción construyen sobre esto su propio modelo de documento y luego exportan HTML.

Una vez guardado como HTML, el texto pasa a formar parte de la estructura de la página, que los navegadores exponen como DOM. En un CMS, un campo de texto enriquecido suele ser un bloque de contenido entre otros.

Ejemplo

Un editor de blog ofrece negrita, un menú de títulos, un botón de enlace y listas con viñetas. Una autora escribe un título, una frase en negrita y una lista. El editor guarda los elementos <h2>, <strong> y <ul><li>. Un lector de pantalla puede anunciar entonces el título y la lista correctamente. Si ella hubiera puesto una línea grande y en negrita con ajustes de fuente, se vería igual pero no tendría significado de título.

Errores comunes

• Títulos falsos: texto grande en negrita en lugar de un nivel de título real, lo que quita la navegación a quien usa un lector de pantalla.
• Pegar desde Word o la web: arrastra estilos en línea y marcado sobrante. Pega como texto plano o limpia el HTML al guardar.
• Guardar HTML sin sanear: el texto enriquecido escrito por usuarios debe sanearse en el servidor, o puede llevar scripts (cross-site scripting).
• Demasiados estilos: varias fuentes, colores y tamaños hacen que el contenido parezca incoherente. Limita la barra de herramientas a lo que permite el sistema de diseño.
• Color o subrayado como única señal: un texto subrayado que no es un enlace confunde, y el texto en rojo por sí solo no transmite una advertencia.

Texto enriquecido, accesibilidad y pruebas

El formato debe aportar significado que la tecnología de asistencia pueda leer: títulos reales, listas reales, textos de enlace descriptivos y texto alternativo en las imágenes (véase imágenes accesibles y WCAG). Comprueba también el contraste del texto, tratado en paletas de colores accesibles. Nuestra guía de herramientas de pruebas de accesibilidad web recoge formas de revisar el contenido renderizado, y la monitorización de velocidad de página sigue la puntuación de accesibilidad de Lighthouse de las páginas que muestran tu texto enriquecido, así que un cambio de plantilla que rompa la estructura de títulos o el contraste se detecta antes.

Preguntas frecuentes

¿Qué diferencia hay entre texto enriquecido y texto plano?

El texto plano solo contiene caracteres. El texto enriquecido añade formato como negrita, títulos, listas y enlaces, guardado en un formato como HTML o RTF.

¿HTML es texto enriquecido?

HTML es un formato de marcado que los editores de texto enriquecido suelen usar para guardar el formato. El texto enriquecido es lo que ve el lector. HTML es cómo se escribe por dentro.

¿Markdown es texto enriquecido?

No por sí mismo. Markdown es texto plano con marcas sencillas que un renderizador convierte en salida con formato, normalmente HTML.

¿Qué es un editor WYSIWYG?

Un editor WYSIWYG («lo que ves es lo que obtienes») muestra el formato mientras escribes, en lugar de mostrar el marcado. Los editores de texto enriquecido suelen ser WYSIWYG.

¿Es seguro aceptar texto enriquecido de los usuarios?

Solo si lo sanas en el servidor y permites una lista fija de etiquetas y atributos. Nunca confíes en el HTML que envía un editor del navegador.