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.
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.