Smilies à la Microsoft ☹

Vroeger was er een lettertype waarin letters werden weergegeven als symbolen. Wingdings heette dat. Je kon mensen foppen door leesbare tekst als Wingdings weer te geven; geen mensen die er niet iets van snapte. Nou ja, vroeger…

Microsoft Outlook Web Access Light

Sinds enige tijd krijg ik e-mails van collegae binnen waar op het einde van de zin soms de letter J staat. Zomaar, ineens. Maken mijn collegae zoveel typfouten? Gooit Microsoft Exchange soms halve zinnen weg? Er staat toch echt een J, niets meer en niets minder. Toch maar eens in de broncode kijken.

In de broncode van de bewuste e-mail kwam ik het volgende fragment HTML tegen.

<font size="2" color="navy" face="Wingdings">
	<span style="font-size: 11pt; font-family: Wingdings; color: navy;">
		J
	</span>
</font>

Je raadt het al, Windings representeert de letter J als een smilie. Lachen man! ☺

Op de volgende alinea staat de letter J. Ik heb met (inline) CSS aangegeven dat deze met lettertype Wingdings moet worden weergegeven. Ondersteunt jouw brower Wingdings, dan zie je een smilie. In het andere geval zie je, net als ik altijd, de letter J.

J

Waarom het fout is…

HTML is om websites mee te structureren, CSS is om websites mee vorm te geven. In de HTML staat de letter J. Het is incorrect om deze door middel van CSS een andere betekenis te geven. Het kunnen lezen van een webpagina hangt dan af van vormgeving, en dat is niet de bedoeling omdat de webpagina dan zijn betekenis verliest.

Als je een concreter voorbeeld wilt, bedenk je dan dat ik talloze e-mails vol verwondering heb gelezen, niet begrijpend waarom zoveel zinnen eindigden met de letter J.

…en hoe het wel moet

Smilies weer geven kan op verschillende manieren. Gebruik van Unicode als karakterset ligt voor de hand. In Unicode zijn smilies vastgelegd en klaar voor gebruik. Je hoeft dan niet meer de letter J te gebruiken, in Unicode hebben de smilies een eigen plaats.

Je kunt ook afbeeldingen gebruiken voor smilies. Vul dan wel het alt-attribuut in, zodat ook bij het ontbreken van afbeeldingen een smilie tevoorschijn komt.

<img src="smilie.png" alt=":-)">

Een combinatie van beide oplossingen kan ook: een afbeelding als smilie met een Unicode-smilie als alternatief!

<img src="smilie.png" alt="☺">