Tekencodering: Unicode en UTF-8 uitgelegd

Je hebt het gezien: een naam die José zou moeten zijn verschijnt als José, of een emoji wordt een blokje met vraagtekens. Die brij heeft een naam — mojibake — en het is bijna altijd een mismatch in tekencodering. Deze gids legt uit wat tekens, Unicode en UTF-8 echt zijn, zodat die bugs ophouden een raadsel te zijn.

Computers slaan getallen op, geen letters

Op het laagste niveau slaat een computer alleen getallen (bytes) op. Om tekst op te slaan hebben we een afgesproken tabel nodig die elk teken aan een getal koppelt, en terug. Die tabel is een tekencodering. Schrijft het ene programma tekst met de ene tabel en leest een ander die met een andere, dan worden de getallen als de verkeerde tekens geïnterpreteerd — en krijg je mojibake.

ASCII: het kleine begin

De oorspronkelijke, wijdverbreide codering ASCII definieerde getallen voor 128 tekens: het Engelse alfabet, cijfers, leestekens en enkele stuurcodes. Genoeg voor Engels, maar geen plaats voor é, ü, ß, 你, 😀 of de tienduizenden tekens van de talen ter wereld. Decennialang bedacht iedereen eigen incompatibele uitbreidingen, en precies daarom brak tekst wanneer die tussen systemen overstak.

Unicode: één getal voor elk teken

Unicode is de universele oplossing: één standaard die aan elk teken van elk schriftsysteem, plus symbolen en emoji, een uniek getal toewijst — een codepunt (code point). Codepunten worden geschreven als U+ gevolgd door een hexgetal:

A   →  U+0041
é   →  U+00E9
你  →  U+4F60
😀  →  U+1F600

Cruciaal: Unicode definieert de getallen, maar niet hoe je ze als bytes opslaat. Dat is een aparte beslissing — en daar komt UTF-8 in beeld.

UTF-8: hoe Unicode bytes wordt

UTF-8 is een manier om Unicode-codepunten in bytes te coderen, en degene die het web overweldigend gebruikt. Het slimme ontwerp is dat het variabele lengte heeft:

• De 128 ASCII-tekens nemen elk 1 byte — dus UTF-8 is achterwaarts compatibel met ASCII.
• De meeste Latijnse tekens met accenten en Griekse/Cyrillische tekens nemen 2 bytes.
• De meeste andere schriften, waaronder Chinees, Japans en Koreaans, nemen 3 bytes.
• Emoji en zeldzamere tekens nemen 4 bytes.

Daarom is een „100-teken”-string niet altijd 100 bytes: één teken kan meerdere bytes zijn. Het verklaart ook de klassieke José-bug — dat zijn de UTF-8-bytes voor é, per abuis byte voor byte gelezen als een oudere westerse codering.

Tekens, codepunten en bytes

Drie verwante maar verschillende begrippen laten mensen voortdurend struikelen:

• Teken (Character) — wat een mens ziet (de letter é).
• Codepunt (Code point) — het Unicode-getal ervoor (U+00E9).
• Byte — hoe het wordt opgeslagen (in UTF-8 de twee bytes 0xC3 0xA9).

Een uitgeschreven codepunt zien is vaak de snelste manier om een tekstprobleem te diagnosticeren — bijvoorbeeld een „spatie” die een vaste spatie (U+00A0) blijkt te zijn. Onze Unicode-omzetter toont de codepunten achter elke tekst en zet om tussen tekens en escape-reeksen.

Hoe je mojibake voorkomt

• Gebruik overal UTF-8. Sla bestanden op als UTF-8 en declareer het — op webpagina's <meta charset="utf-8">; in HTTP de Content-Type-charset; in databases een UTF-8-collatie.
• Houd het van begin tot eind consistent. De meeste corruptie ontstaat op een grens waar de ene kant een andere codering aanneemt.
• Escape voor de juiste context. Om speciale tekens veilig in HTML te zetten, gebruik HTML-entiteiten; om ze in een URL te zetten, URL-codering.

De korte versie: Unicode geeft elk teken een getal, UTF-8 verandert die getallen in bytes, en als iedereen afspreekt UTF-8 te gebruiken, houdt tekst op met breken.