Cómo marcar contenido en varios idiomas en Next.js (Pages Router) v16

Problema

Cuando una página contiene texto en varios idiomas, los navegadores y las tecnologías de asistencia tratan todo el contenido como si perteneciera al idioma principal 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 usando fonética inglesa, produciendo una salida ininteligible para los usuarios que dependen del audio. Los navegadores aplican reglas de corrección ortográfica y tipografía basadas en el idioma incorrecto, marcando como errores palabras extranjeras correctamente escritas y manejando incorrectamente la puntuación y las convenciones de formato específicas del idioma.

Esto crea barreras para los usuarios con discapacidades visuales que dependen de una pronunciación precisa, y degrada la experiencia para todos los usuarios al introducir ruido visual de advertencias de corrección ortográfica incorrectas y renderizado de texto inadecuado.

Solución

Aplica el atributo HTML lang a los elementos que contienen texto en idioma extranjero, declarando explícitamente el idioma de ese contenido. Este atributo señala a los navegadores y tecnologías de asistencia que el texto marcado debe procesarse usando las reglas de su idioma declarado en lugar del idioma principal de la página. Los lectores de pantalla cambian al motor de pronunciación apropiado, los navegadores aplican los diccionarios de corrección ortográfica correctos y los motores de tipografía usan reglas de formato específicas del idioma.

Al envolver texto extranjero en elementos con el atributo lang correcto, creas límites de idioma claros dentro de tu contenido que preservan la integridad del texto multilingüe.

Pasos

1. Crea un componente de texto marcado por idioma

Construye un componente React que envuelva contenido en idioma extranjero en un elemento span con el atributo lang apropiado.

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

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

Este componente acepta un código de idioma y envuelve sus hijos en un span con el atributo lang establecido, creando un límite de idioma que las tecnologías de asistencia y los navegadores pueden reconocer.

2. Usa el componente para marcar frases en idioma extranjero

Envuelve el texto en idioma extranjero dentro de tu contenido usando el componente, especificando el código de idioma ISO 639-1 apropiado.

export default function ArticlePage() {
  return (
    <article>
      <h1>Understanding French Cuisine</h1>
      <p>
        The concept of <ForeignText lang="fr">mise en place</ForeignText> is
        fundamental to professional cooking. It means having all ingredients
        prepared and organized before you begin.
      </p>
      <p>
        The restaurant <ForeignText lang="fr">Le Bernardin</ForeignText> in New
        York has maintained three Michelin stars for decades.
      </p>
    </article>
  );
}

Cada frase en idioma extranjero se envuelve en el componente con su código de idioma, asegurando que los lectores de pantalla la pronuncien correctamente y que los navegadores apliquen las reglas de idioma apropiadas.

3. Maneja pasajes más largos en idioma extranjero

Para contenido extranjero de varias oraciones, envuelve el pasaje completo en un único elemento marcado con idioma para evitar fragmentar el contexto lingüístico.

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 1</h2>
      <blockquote lang="es">
        <p>
          Todos los seres humanos nacen libres e iguales en dignidad y derechos
          y, dotados como están de razón y conciencia, deben comportarse
          fraternalmente los unos con los otros.
        </p>
      </blockquote>
    </article>
  );
}

Aplicar lang directamente a elementos de nivel de bloque como blockquote o p marca el pasaje completo, permitiendo que los lectores de pantalla mantengan una pronunciación consistente en todo momento y que los navegadores apliquen las reglas de idioma al contexto completo.

4. Marca texto extranjero en mensajes formateados

Cuando el contenido en idioma extranjero aparece dentro de mensajes traducidos, usa el componente dentro del formato de texto enriquecido del mensaje.

import { FormattedMessage } from "react-intl";

export default function RecipePage() {
  return (
    <div>
      <FormattedMessage
        id="recipe.description"
        defaultMessage="This dish is called {dishName} in French cuisine."
        values={{
          dishName: <ForeignText lang="fr">coq au vin</ForeignText>,
        }}
      />
    </div>
  );
}

El componente se integra con el formato de texto enriquecido de react-intl, permitiéndote marcar términos extranjeros dentro del contenido traducido mientras preservas el límite de idioma para las tecnologías de asistencia.

5. Crea variantes para énfasis semántico

Extiende el patrón para usar elementos HTML semánticos cuando el texto extranjero también requiera énfasis o estilo idiomático.

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

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

El elemento i representa semánticamente texto en una voz o tono alternativo, haciéndolo apropiado para términos extranjeros que también se distinguen del texto circundante. El atributo lang asegura la pronunciación correcta mientras que el elemento proporciona significado semántico.

6. Documenta los códigos de idioma soportados

Crea un tipo o constante que defina los códigos de idioma que tu aplicación admite para garantizar la coherencia y detectar errores durante el desarrollo.

export const SUPPORTED_LANGUAGES = {
  FRENCH: "fr",
  SPANISH: "es",
  GERMAN: "de",
  ITALIAN: "it",
  JAPANESE: "ja",
  CHINESE: "zh",
} as const;

type LanguageCode =
  (typeof SUPPORTED_LANGUAGES)[keyof typeof SUPPORTED_LANGUAGES];

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

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

Definir los idiomas admitidos como constantes proporciona autocompletado en tu editor y documenta qué códigos de idioma se utilizan en toda tu aplicación, mientras permite códigos de idioma arbitrarios cuando sea necesario.