Cómo arreglar los saltos de línea del japonés en la web

Los navegadores cortan el texto japonés casi entre cualquier par de caracteres, porque el japonés no pone espacios entre palabras. Para que los titulares no se partan en mitad de una palabra, define lang="ja" y usa word-break: auto-phrase, que Chrome admite desde la versión 119. Para Safari y Firefox, añade <wbr> a mano en titulares cortos o usa BudouX, la librería de Google, el mismo motor de frases que usa Chrome.

Diseño y construyo sitios en japonés, inglés, español y chino desde Tokio, y los saltos de línea son el detalle que le dice a un lector japonés en un segundo si un sitio se hizo con cuidado. Un titular que termina con un solo carácter perdido en la segunda línea parece roto, aunque todas las palabras estén bien.

Por qué el japonés se corta en el sitio equivocado

El inglés salta de línea en los espacios, así que una palabra queda entera salvo que sea más larga que la línea. El japonés se escribe sin espacios, y las reglas por defecto permiten un salto entre casi cualquier par de caracteres. En el texto largo eso está bien; los lectores están acostumbrados. En titulares, botones y entradillas cortas no, porque un corte dentro de una palabra como 東京 o ダウンロード cambia cómo se lee la frase y, en tamaños grandes, parece descuidado.

También existe un conjunto de reglas llamado kinsoku. Algunos caracteres nunca deberían empezar una línea, como los kana pequeños, los paréntesis de cierre y el punto 。, y otros nunca deberían terminarla, como los paréntesis de apertura. El W3C lo ha recogido todo en Requirements for Japanese Text Layout, y merece una lectura rápida aunque nunca lo leas entero. La Agencia Digital de Japón también trata la tipografía como una parte viva de su sistema de diseño; escribí sobre la frecuencia con que la revisa en el gobierno de Japón tiene mejor sistema de diseño que la mayoría de sus exportadores.

auto-phrase: la solución de una línea en Chrome

Chrome añadió a word-break un valor que solo corta entre frases naturales. El artículo de Google sobre funciones de internacionalización en CSS dice que llegó en Chrome 119, que necesita que el idioma del contenido sea japonés y que usa una versión en C++ de BudouX, un pequeño modelo de aprendizaje automático, para encontrar los límites entre frases.

<html lang="ja">

h1, h2, h3, .lede, button {
  word-break: auto-phrase;
}

Hay dos detalles que pillan a la gente. El atributo lang tiene que resolverse como japonés para ese elemento, así que un sitio multilingüe necesita el lang correcto en cada página o bloque. Y yo lo limito a titulares y textos cortos. En párrafos largos, cortar por frases deja el borde derecho muy irregular y el comportamiento por defecto se lee mejor.

Qué hacer en Safari y Firefox

Según los datos de compatibilidad de MDN, Firefox todavía no admite auto-phrase y Safari solo lo tiene en Technology Preview. En esos navegadores la propiedad se ignora y obtienes los cortes por defecto, así que es seguro publicarla, pero no arregla nada para quien usa iPhone.

Para un puñado de titulares, la solución honesta es manual. Pon <wbr> en los límites entre frases y añade word-break: keep-all, que le dice al navegador que no corte texto CJK salvo en esas oportunidades. Pruébalo a ancho de móvil, porque keep-all sin suficientes puntos de corte se desborda.

Para algo más grande, BudouX hace el mismo trabajo en código. Su README lo describe como independiente, de unos 15 KB con el modelo incluido, con modelos preentrenados para japonés, chino simplificado, chino tradicional y tailandés. Yo lo ejecuto en tiempo de compilación sobre los titulares, así el HTML sale ya con las pistas de corte y no corre ningún script en el navegador.

Espaciado y puntuación

Los saltos de línea son una parte del trabajo. Las fuentes japonesas dibujan signos como 「 y 、 dentro de una caja de ancho completo, lo que deja huecos visibles en los titulares. text-spacing-trim recorta ese espacio, y los datos de MDN lo muestran en Chrome desde la versión 123, todavía no en Safari ni en Firefox. La característica de fuente palt hace algo parecido a través de la propia fuente y funciona donde la fuente la admita:

h1 { font-feature-settings: "palt"; }

Usa palt en titulares y deja el texto largo como está. El espaciado proporcional en párrafos largos hace el japonés más difícil de leer.

text-autospace añade un pequeño hueco entre el japonés y las letras latinas o los números, el espacio que un diseñador pondría a mano alrededor de "iPhone" en una frase. Es más reciente y el soporte varía según el navegador, así que revisa la tabla actual antes de depender de él.

Y usa line-break: strict si quieres las reglas kinsoku más estrictas, por ejemplo para que kana pequeños como ょ no empiecen una línea. Funciona en las versiones actuales de Chrome, Firefox y Safari.

Una lista corta

• El lang correcto en cada página y en cualquier bloque con otro idioma.
• word-break: auto-phrase en titulares, entradillas y botones.
• <wbr> o BudouX para los titulares que importan en Safari.
• palt en texto grande, espaciado por defecto en el texto largo.
• Interlineado un poco más amplio en el texto japonés que en el inglés, y ajustado en los titulares.
• Una revisión real a 390 píxeles de ancho, en Safari, antes de publicar.

Los saltos de línea casi nunca entran en una lista de lanzamiento. En Japón deciden si una página se lee como terminada, igual que los detalles pequeños generan confianza en el resto del UX japonés. La mayoría de los arreglos de arriba se hacen en una tarde.