Cómo marcar contenido en varios idiomas en TanStack Start v1

Problema

Cuando una página contiene texto en varios idiomas, los navegadores y las tecnologías de asistencia asumen que todo el contenido utiliza el idioma declarado de la página. Un lector de pantalla configurado para inglés intentará pronunciar frases en francés, títulos de libros en español o nombres de empresas en alemán utilizando la fonética inglesa, produciendo una salida ininteligible para los usuarios que dependen del audio. Los navegadores aplican reglas de corrección ortográfica incorrectas, marcando como errores palabras extranjeras correctamente escritas. Los motores de tipografía manejan incorrectamente las convenciones de puntuación y espaciado que difieren entre idiomas.

Estos problemas crean barreras para usuarios con discapacidades visuales y dificultan la comprensión del contenido para cualquiera que utilice tecnología de asistencia. El problema se agrava cuando los términos extranjeros aparecen con frecuencia o cuando el contenido incluye pasajes más largos en otro idioma.

Solución

Marca cada fragmento de texto en idioma extranjero con un atributo HTML lang que identifique su idioma correcto, instruyendo a las tecnologías de asistencia a cambiar temporalmente los motores de pronunciación. Añade un atributo de idioma a un elemento que rodee el contenido extranjero para aplicarle un estilo o procesarlo de manera diferente. Esta separación permite a los lectores de pantalla pronunciar cada idioma correctamente y permite a los navegadores aplicar reglas de tipografía y corrección ortográfica apropiadas a cada segmento.

Pasos

1. Crea un componente para marcar texto extranjero

Envuelve el texto en idioma extranjero en un elemento con el atributo lang, utilizando un elemento de texto idiomático en lugar de un span porque algunos lectores de pantalla ignoran el atributo lang en los spans.

interface ForeignTextProps {
  lang: string;
  children: React.ReactNode;
}

export function ForeignText({ lang, children }: ForeignTextProps) {
  return <i lang={lang}>{children}</i>;
}

El elemento i representa texto en una voz o estado de ánimo alternativo, incluyendo términos de otros idiomas, y garantiza que los lectores de pantalla respeten el atributo de idioma.

2. Usa el componente para marcar frases extranjeras en línea

Aplica el componente a palabras o frases extranjeras dentro de tu contenido, especificando el código de idioma apropiado.

import { ForeignText } from "~/components/ForeignText";

export default function ArticlePage() {
  return (
    <article>
      <p>
        The book <ForeignText lang="es">Cien años de soledad</ForeignText> is
        considered a masterpiece of magical realism.
      </p>
      <p>
        She said <ForeignText lang="fr">c'est la vie</ForeignText> and walked
        away.
      </p>
    </article>
  );
}

El atributo lang en el elemento apropiado indica a las tecnologías de asistencia que cambien de idioma temporalmente, asegurando una pronunciación precisa.

3. Marca pasajes más largos en idioma extranjero

Para contenido extranjero de varias oraciones, aplica el atributo lang directamente a elementos de nivel de bloque.

export default function QuotePage() {
  return (
    <article>
      <p>The original German text reads:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        This translates to: The limits of my language mean the limits of my
        world.
      </p>
    </article>
  );
}

El atributo lang se puede usar con casi cualquier elemento HTML, lo que facilita cambiar de idioma dentro de una página agregando el atributo a elementos como blockquote.

4. Busca los códigos de idioma para tu contenido

Usa etiquetas de idioma del registro IANA Language Subtag Registry, que puedes encontrar usando la herramienta no oficial Language Subtag Lookup.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Common examples: <ForeignText lang="fr">bonjour</ForeignText> (French),
        <ForeignText lang="de">Gesundheit</ForeignText> (German),
        <ForeignText lang="ja">ありがとう</ForeignText> (Japanese),
        <ForeignText lang="ar">شكرا</ForeignText> (Arabic)
      </p>
    </div>
  );
}

Para cualquier idioma, usa el código de dos letras si existe, y solo usa un código de tres letras si no hay otro código disponible.