How to mark mixed-language content in TanStack Start v1

Problem

When a page contains text in multiple languages, browsers and assistive technologies assume all content uses the page's declared language. A screen reader configured for English will attempt to pronounce French phrases, Spanish book titles, or German company names using English phonetics, producing unintelligible output for users who rely on audio. Browsers apply incorrect spell-checking rules, flagging properly spelled foreign words as errors. Typography engines mishandle punctuation and spacing conventions that differ between languages.

These issues create barriers for users with visual impairments and make content harder to understand for anyone using assistive technology. The problem compounds when foreign terms appear frequently or when the content includes longer passages in another language.

Solution

Mark each piece of foreign-language text with an HTML lang attribute that identifies its correct language, instructing assistive technologies to switch pronunciation engines temporarily. Add a language attribute to an element surrounding the foreign content to style or process it differently. This separation allows screen readers to pronounce each language correctly and enables browsers to apply appropriate typography and spell-checking rules to each segment.

Steps

1. Create a component for marking foreign text

Wrap foreign-language text in an element with the lang attribute, using an idiomatic text element rather than a span because some screen readers ignore the lang attribute on spans.

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

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

The i element represents text in an alternate voice or mood, including terms from other languages, and ensures screen readers respect the language attribute.

2. Use the component to mark inline foreign phrases

Apply the component to foreign words or phrases within your content, specifying the appropriate language code.

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>
  );
}

The lang attribute on the appropriate element instructs assistive technologies to switch languages temporarily, ensuring accurate pronunciation.

3. Mark longer foreign-language passages

For multi-sentence foreign content, apply the lang attribute directly to block-level elements.

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>
  );
}

The lang attribute can be used with almost every HTML element, making it easy to change languages within a page by adding the attribute to elements like blockquote.

4. Look up language codes for your content

Use language tags from the IANA Language Subtag Registry, which you can find using the unofficial Language Subtag Lookup tool.

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>
  );
}

For any language, use the two-letter code if it exists, and only use a three-letter code if no other code is available.