Internationalization
Course 3 · Ch 11
Internationalization
lang attributes done properly, right-to-left text direction, and the character encoding edge cases that actually bite
Fundamentals Chapter 1 introduced lang="en" on <html> as a quick rule. This chapter covers why it matters beyond a checkbox, how to mark mixed-language content correctly, and the encoding details that explain real, occasionally baffling text-rendering bugs.
lang — More Than One Attribute, More Than Once
<html lang="en"> // the document's overall, dominant language
// A specific phrase in a different language, within otherwise-English content
<p>The French phrase <span lang="fr">je ne sais quoi</span> has no direct English equivalent.</p>
- Screen readers switch pronunciation for the inner
lang-tagged span, reading the French phrase with French phonetics rather than mispronouncing it as English text. - Browser spell-check stops flagging the foreign phrase as a misspelling within an otherwise English document.
- CSS can target language via the
:lang()pseudo-class, for language-specific typography rules (quotation mark styles genuinely differ between languages).
A missing or wrong lang attribute has real, compounding consequences
Beyond the immediate screen reader mispronunciation, search engines use the lang attribute to serve the right version of a page to the right regional audience, and translation tools use it to decide whether (and how) to offer a translation prompt at all. A small, easily-forgotten attribute with surprisingly wide-reaching downstream effects.
Hreflang — Multiple Language Versions of the Same Content
<link rel="alternate" hreflang="en" href="https://osztromok.com/en/linux">
<link rel="alternate" hreflang="hu" href="https://osztromok.com/hu/linux">
For a site genuinely offering the same content in multiple languages at different URLs, hreflang link tags (in <head>) tell search engines which version to show users searching in each specific language — directly relevant should osztromok.com ever offer translated versions of its Hungarian-language-learning content, for instance.
Right-to-Left Text — the dir Attribute
<p dir="rtl"lang="ar">مرحبا بالعالم</p>
مرحبا بالعالم — Arabic text, rendered right-to-left, demonstrating how dir="rtl" reverses the natural reading and layout direction.
Languages like Arabic and Hebrew read right-to-left — dir="rtl" doesn't just reverse the text itself (the browser already handles that based on the actual characters), it reverses the entire layout flow: where padding/margins effectively apply, which side elements align to, the direction lists indent.
dir="auto" lets the browser detect direction from the actual content
For genuinely mixed or user-generated content where the language isn't known in advance (a comment box that might receive English or Arabic text), dir="auto" inspects the first strongly-directional character actually typed and sets direction automatically — useful specifically for that unpredictable-content case, though an explicit dir value is preferable whenever the language is actually known ahead of time.
Character Encoding — Where Real Bugs Actually Come From
Fundamentals Chapter 1 established <meta charset="UTF-8"> as the modern standard. The edge cases worth understanding: what actually goes wrong, and why, when encoding is mismatched.
| Symptom | Likely cause |
|---|---|
| Garbled characters (mojibake), e.g. "’" instead of an apostrophe | A file saved/read in a different encoding than declared — classic mismatch between actual bytes and the declared charset |
| Question marks or boxes (□) replacing some characters | The character genuinely doesn't exist in the encoding/font being used to render it |
| Correct in the editor, garbled in the browser | charset meta tag missing or declared after too much content, or the actual file saved in a different encoding than the meta tag claims |
The charset meta tag must be among the very first bytes of the document — a rule worth restating from Fundamentals Chapter 1
Browsers read a limited number of initial bytes looking for the encoding declaration before they start interpreting the rest of the content — if the charset declaration comes too late (after a large comment block, for instance), the browser may have already started parsing with a guessed, potentially wrong encoding.
The kanji course's "kanji_父.html" style filenames are a real, practical UTF-8 success story
Using actual Unicode characters directly as filenames (rather than transliterated or romanised names) works correctly specifically because the whole stack — filesystem, server, browser — consistently treats everything as UTF-8 throughout. The same consistency that prevents the garbling symptoms above is exactly what makes a filename like that work reliably at all.
Chapter 11 Quick Reference
- lang — set on <html> for the document, and on individual elements for foreign-language phrases within otherwise different-language content
- lang affects: screen reader pronunciation, spell-check, CSS :lang() targeting, search engine regional serving
- hreflang link tags — declare alternate-language versions of the same content at different URLs
- dir="rtl" — reverses entire layout flow, not just text direction, for right-to-left languages
- dir="auto" — detects direction from actual content; useful for unpredictable user-generated text
- Mojibake/garbled text — almost always an encoding mismatch between actual bytes and declared/assumed charset
- charset meta tag must be among the very first bytes — browsers guess encoding from early content if it's declared too late
- Next chapter (final, capstone): building an accessible, performant, semantic multi-feature page