Ominöse Abstände im Fließtext
Die HTML-Tags sind eine böse Falle. Jeder, der seinen Quelltext etwas
strukturiert, wird HTML-Tags auf eine eigene Zeile stellen. Im Blockmodus
(display: block
) ist dies kein Problem, weil Leerraum doch nicht zählt. Aber
im Fließtext (display: inline
) wird ein Zeilenumbruch wie ein Leerzeichen
behandelt und kann zu ominösen Abständen führen, nach denen man sich im CSS dumm
und dusselig sucht.
<div style="width: 120px;background-color: cornflowerblue;">
<p>
<em>Weinanbau</em>
<span>gebiet</span>
</p>
<p><em>Weinanbau</em><span>gebiet</span></p>
</div>
Problematisch wird das ganze dann, wenn der Platz nicht ausreicht und es zu merkwürdigen Umbrüchen zwischen Elemtenten kommt.
![Ergebnis des obigen Codes bei zu wenig Platz mit einem Umbruch mitten im
Wort](HTML-Space-Umbruch.png)
Zeilenumbrüche
Bisher glaubte ich immer, dass Trennstellen für Zeilenumbrüche nur an Stellen
mit umbrechbarem
Leerraum
(Leerzeichen (U+0020), Enter (U+000A), schmales Leerzeichen (U+2009)) auf der
HTML-Ebene passieren kann. Meine Vorstellung war, dass der Quelltext maßgeblich
für die Trennstellen ist und daher zwischen </q><span>
kein Umbruch
stattfinden kann.
Aber dem ist nicht so. Bei HTML scheint nicht die Ebene der Tokens, sondern der
entstandene Text maßgeblich für die Trennstellen zu sein, denn zwischen
</q><span>
kann ein Leerzeichen auftreten, außer es folgt danach ein
verbindender Leerraum wie ein nicht umbrechbares Leerzeichen (U+00A0). Folgendes
Beispiel illustriert die Situation[^](Einfach den Quelltext kopieren, als
Webseite data:,
aufrufen und dort einfügen):
<div style="width: 256px;background-color: cornflowerblue;">
<p><q>Weit hinter den Wortbergen</q><span>(Text)</span></p>
<p lang="en"><q>Weit hinter den Wortbergen</q><span>(Text)</span></p>
<p><q>Weit hinter den Wortbergen</q><span> (Text)</span></p>
</div>
Die Krönung des Irrsinns ist, dass dieses Verhalten in Chromium noch von der Sprache (lang-Attribut) abhängt.
Wie man dieses Verhalten in Anbetracht von ::before { content: "…"; }
in CSS
noch sinnvoll in großen Texten überblicken und kontrollieren will, ist mir
schleierhaft.