Alle inspiratie en nieuwtjes

Strong, stronger, strongest

Als webdeveloper kom je regelmatig dingen tegen waarvan je denkt: Huh!? Soms is het een bug in een externe library, soms is het je editor die vreemd doet, soms de webserver, en niet zelden heb je zelf gewoon iets raars gedaan of over het hoofd gezien. Hier bij Zicht troffen collega Paul en ik -onafhankelijk van elkaar- iets wat in eerste instantie een op een bug in de fontrendering van Internet Explorer leek.

Symptomen

Internet Explorer 9 en Firefox 4 tonen allebei in sommige gevallen stukken tekst vetter dan dat zou moeten. Zie onderstaande afbeelding voor hoe een stuk tekst in Arial eruit ziet in achtereenvolgens Internet Explorer 9, Firefox 4 en Google Chrome:

Waar gaat het mis?

Het probleem zit hem in het stukje tekst met een stukje extra bold. Deze tekst is in de HTML-code gemarkeerd met <strong>-tags. Zo'n strong-tag geeft aan dat ergens de nadruk op moet komen te liggen (zoals bijv. ook de <em>-tag doet), en default vertaalt de browser dat door die tekst bold cq. vet weer te geven.

In bovenstaand voorbeeld is de tekst al in Arial Bold opgemaakt, en al zolang als HTML en CSS bestaan, kon tekst nooit "dubbel bold" worden weergegeven. Maar nu blijkt dus dat FireFox 4 en Internet Explorer 9 (en ik meen ook 8) dat wel doen. De font-kenners onder ons zullen de te vet weergegeven tekst overigens herkennen als Arial Black, maar dat was toch echt een ander font dan Arial. Oftewel, de genoemde browsers pakken de stukken tekst die dubbel bold moeten zijn, en kennen daar gewoon een ander font aan toe, waarmee ze de gedefinieerde fonts uit het stylesheet gewoon negeren.

Het wordt nog gekker

Het blijkt echter dat FireFox 4 dit gedrag op een Apple en onder Linux niet vertoont. Het ligt voor de hand om de schuld dan niet bij de browser te zoeken, maar bij het operating system, in mijn geval Windows 7. Daarnaast treed het probleem in z'n geheel niet op als ik een willekeurig ander font probeer, zoals bijvoorbeeld Times New Roman:

Het probleem lijkt zich dus alleen voor te doen, als het betreffende font nog een variant heeft die nog bolder dan bold is, en blijkbaar is Arial Black in Windows 7 een variant geworden van het Arial font. In Vista was dat meen ik ook al het geval, maar dat weet ik niet zeker. In XP zijn Arial en Arial Black in ieder geval twee verschillende fonts, en hebben ze geen relatie tot elkaar. Die relatie lijkt later dus wel aangebracht te zijn.

Semantiek

Collega Gerard reageerde nog met de volgende opmerking: Het is geen bug, het is eigenlijk een hele logische gedachtengang. Iets wat al bold is, en binnen die context <strong> wordt gemaakt, krijgt nog meer nadruk dan dat het al had. Dat is styling versus semantische waarde. Het geeft juist goed aan hoe je strong niet moet misbruiken voor styling :-).
Daar zit natuurlijk wel wat in, en het zou een plausibele verklaring kunnen zijn van dit gedrag. Het zou in dat geval samenhangen met de mogelijkheid in CSS om het font-weight niet alleen de waardes normal of bold te kunnen geven, maar ook lighter, bolder of een waarde in de range van 100, 200, ... 900.

Als ik kijk wat daar de output van is (bijv. via deze site), dan zie ik dit:

Oftewel, het plaatsen van een strong-tag binnen een stuk tekst dat al vet wordt weergegeven, levert blijkbaar een font-weight op van 800 of 900. En blijkbaar is Arial onder Windows 7 het enige font dat in staat is om zichzelf in een dergelijke font-weight te presenteren. Het feit dat Arial Black na XP een variant is geworden van Arial (in plaats van een geheel op zichzelf staand font), zou verklaren waarom IE en FireFox op eerdere Windows-versies en andere platformen dit gedrag niet vertonen.
De vraag is nu: zitten wij met deze theorie op het juiste spoor? Of is er nog iets anders aan de hand? Oftewel: is het een bug of een (in mijn ogen slecht uitgevoerde) feature? Gek genoeg is er hierover op internet vrijwel niks te vinden, terwijl je zou verwachten dat er toch wel meer mensen geweest zouden zijn die dit opgemerkt moeten hebben.

Oh, en als je zelf wilt testen: Arial als font, Times New Roman als font.

Update: Op de FireFox Help site vond ik een vraag die hier nauw aan verwant is. Zie Arial Black is the specified font for headers on my website; however, FF4 doesn't render out Arial Black whereas FF3.6 rendered it out perfectly along with other browsers. What's the deal?.