9. August 2010, 12:02 Uhr
Das <wbr>-Element ist, soweit ich feststellen konnte, eine Erfindung aus Netscape 4. Was es in HTML5 zu suchen hat weiß ich nicht (es ist nicht nur archaisch, sondern auch recht nutzfrei), aber der Chronistenpflicht wegen habe ich es letzte Woche mal erforscht. Das <wbr>-Element repräsentiert eine Möglichkeit zum Zeilenumbruch, d.h. da wo es steht, kann der Browser einen Zeilenumbruch einfügen, wenn er das brauchen sollte.
Beispiel:
<h1>Mit <code><wbr></code></h1>
<p style="width:100px; border:1px solid red;">
Donau<wbr>dampf<wbr>schiff<wbr>fahrts<wbr>gesellschaft
</p>
<h1>Ohne <code><wbr></code></h1>
<p style="width:100px; border:1px solid red;">
Donaudampfschifffahrtsgesellschaft
</p>
Ergebnis:
Der Browsersupport ist recht medium, in Opera und Internet Explorer 8 funktioniert <wbr> nicht, wohl aber in allen anderen Browsern inklusive IE7 und IE6. In Opera lässt sich das Problem relativ einfach fixen, indem man per CSS hinter jedem <wbr> ein Zero-Width-Space einfügt:
wbr:after {
content: "\00200B"
}
Dieses Leerzeichen ist unsichtbar, trennt aber das Wort auf und ermöglicht so einen Zeilenumbruch wie ein normales Leerzeichen. Im IE8 kann man das gleiche mit JavaScript erreichen:
var wbrs = document.getElementsByTagName('wbr');
var num_wbrs = wbrs.length;
if(num_wbrs > 0 && HTMLTextElement && wbrs[0] instanceof HTMLTextElement){
for(var i = 0; i < num_wbrs; i++){
wbrs[i].insertAdjacentHTML('afterEnd', '​');
}
}
Hier ist vielleicht noch bemerkenswert, dass die im JS-Code verwendete insertAdjacentHTML()-Methode seit HTML5 auch erstmals Standard ist, was natürlich nicht heißt, dass sie in einer nennenswerten Anzahl Browser funktioniert.
Das <wbr>-Element ist recht nutzlos, da es zwar Wörter trennt, aber keine Trennstriche einfügt. Das Entity ­ macht genau das und ist daher vermutlich in vielen Fällen die bessere Wahl:
<h1>Wbr</h1>
<p style="width:100px">
Donau<wbr>dampf<wbr>schiff<wbr>fahrts<wbr>gesellschaft
</p>
<h1>Shy</h1>
<p style="width:100px">
Donau­dampf­schiff­fahrts­gesellschaft
</p>
Ergebnis:
Allerdings weiß ich aus dem Stand gerade nicht, wie aktuell die Browserunterstützung für ­ aussieht – was ich aber mal vor Jahren ausprobiert habe, war die Suchmaschinenfrundlichkeit. Hier gibt es keine großen Probleme zu berichten, bis auf die Produkte aus dem Hause Microsoft ignorieren alle Suchmaschinen ­ und finden auch Keywords, die im HTML entsprechend getrennt sind.
Fazit: auf jeden Fall für mögliche Zeilenumbrüche ­ verwenden und sich angesichts von <wbr> einfach nur fragen, was die HTML5-Jungs und -Mädels in ihren Pausen eigentlich so rauchen.
