Um ungleichmäßige Abstände in Blocksatztexten im Browser auf einem Mac zu diagnostizieren, stellen Sie den Absatz zunächst auf linksbündige Ausrichtung um. Testen Sie dann nacheinander die Abstandsregeln, Zeilenumbrüche, Spaltenbreite und das Laden der Schriftart. Mit dieser Reihenfolge lässt sich feststellen, welche Änderung den Absatz tatsächlich verbessert.

Diese Anleitung richtet sich an Personen, die eine gewöhnliche Browserseite untersuchen, etwa einen Abstract-Katalog mit einer schmalen Beschreibungsspalte. Ziel ist es, ungewöhnlich große Wortabstände zu erklären und eine praktikable Korrektur auszuwählen. Alle Beispielbeschriftungen und Maße unten sind fiktiv.

Was ungleichmäßige Abstände verraten können

Blocksatz verteilt den verfügbaren Platz innerhalb einer Zeile, um deren Zeilenbox auszufüllen. Da die Zeilen unterschiedliche Wörter und unterschiedliche Möglichkeiten zur Erweiterung enthalten, müssen ihre Abstände nicht übereinstimmen. Das W3C lässt Browsern zudem Spielraum bei ihren Blocksatzalgorithmen; identisches CSS schreibt nicht in jedem Browser identische Abstände vor. CSS Text Module Level 3

Unterscheiden Sie zunächst zwei Beobachtungen, bevor Sie etwas ändern. Sind die meisten Abstände in einer Zeile größer als in der nächsten, untersuchen Sie die verfügbare Breite der Zeile und die Umbruchmöglichkeiten. Wirkt ein bestimmter Abstand besonders groß, prüfen Sie auch den Text und die Formatierung rund um diese Stelle. Dies sind diagnostische Ansatzpunkte, kein Beweis für eine bestimmte Ursache.

Eine einfache Berechnung erklärt, warum Zeilen mit wenigen Wörtern besondere Aufmerksamkeit verdienen. Angenommen, eine Zeile hat eine verfügbare Breite von 480 CSS-Pixeln und ihr Inhalt nimmt vor dem Blocksatz 420 Pixel ein. In einem veranschaulichenden Modell, das die verbleibenden 60 Pixel gleichmäßig auf sechs geeignete Leerzeichen verteilt, erhält jedes 10 Pixel dazu. Gibt es nur drei geeignete Leerzeichen und bleibt dieselbe Breite übrig, erhält jedes 20 Pixel dazu. Das sind berechnete Beispiele, keine Messungen eines Browsers und keine allgemeingültige Darstellungsformel.

Daraus folgt für die Praxis: Untersuchen Sie zunächst die Wörter, die in der Zeile stehen, bevor Sie versuchen, die Abstände selbst anzupassen. Eine Zeile mit wenigen Erweiterungsmöglichkeiten kann ein Umbruchproblem sichtbar machen, das sich durch eine globale Anpassung der Abstände nicht beheben lässt.

Beginnen Sie auf Ihrem Mac mit einem kontrollierten Vergleich

Wählen Sie einen betroffenen Absatz und notieren Sie die Browserversion, den Seitenzoom, die ungefähre Spaltenbreite und den genauen Text. Behalten Sie diese Bedingungen während des Vergleichs verschiedener Änderungen bei. Verwenden Sie diesen neutralen Testabsatz: „Panel Amber enthält runde Kacheln. Panel Silber enthält quadratische Kacheln. Jedes Panel umfasst eine kurze Beschriftung und eine einfache Beschreibung.“

Klicken Sie in Chrome bei gedrückter Control-Taste auf den Absatz und wählen Sie Inspect. Alternativ öffnen Sie die Entwicklertools mit Command–Option–I und wählen dann das betreffende Element aus. Mit den Entwicklertools des Browsers können Sie das aktuelle Dokument untersuchen und HTML- und CSS-Änderungen lokal in der Vorschau ansehen. Was sind Browser-Entwicklertools?

Wählen Sie den umschließenden Block des Absatzes aus und nicht nur ein Wort innerhalb eines Inline-Elements. Untersuchen Sie in Chromes Bereich Elements sowohl Styles als auch Computed. Ersterer enthält alle anwendbaren Deklarationen, auch solche, die überschrieben wurden; Letzterer hilft dabei, die tatsächlich angewendeten Werte zu ermitteln. Verwenden Sie den Eigenschaftsfilter, um die jeweilige Einstellung zu finden. Referenz zu CSS-Funktionen

Notieren Sie text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family und font-size. Halten Sie außerdem die Inhaltsbreite des Absatzes fest. So entsteht ein kleiner Vergleichsdatensatz: ursprüngliche Bedingungen, eine Änderung, beobachtetes Ergebnis.

Setzen Sie vorübergehend für den Absatz text-align: start und text-align-last: start. Verschwinden die großen Abstände, trägt der Blocksatz zum Symptom bei. Bleiben sie bestehen, fahren Sie mit der Prüfung expliziter Abstände und Leerzeichen fort. Stellen Sie die ursprüngliche Ausrichtung wieder her, bevor Sie den nächsten unabhängigen Test durchführen. In den Entwicklertools können Deklarationen ein- und ausgeschaltet und Werte für Live-Vorschauen bearbeitet werden. Was sind Browser-Entwicklertools?

Prüfen Sie explizite Abstände und erhaltene Leerzeichen

Aktivieren Sie die linksbündige Ausrichtung und testen Sie word-spacing: normal. MDN definiert dies als den normalen Abstand, den die Schriftart oder der Browser bestimmt; ein Längenwert fügt dem inhärenten Wortabstand der Schriftart zusätzlichen Abstand hinzu. Ein geerbter positiver Wert kann daher relevant sein, selbst bevor der Blocksatz angewendet wird. CSS-Eigenschaft word-spacing

Untersuchen Sie das übergeordnete Element und alle formatierten Inline-Kindelemente, falls sich nur ein Teil des Absatzes ändert. Testen Sie vorhandenes letter-spacing separat, statt alle typografischen Eigenschaften gemeinsam zurückzusetzen. Werden zwei Einstellungen gleichzeitig geändert, lässt sich aus einem verbesserten Ergebnis nicht erkennen, welche davon ausschlaggebend war.

Prüfen Sie als Nächstes white-space. Bei normal werden gewöhnliche Folgen von Leerraumzeichen zusammengefasst und der Text bei Bedarf umgebrochen. Bei pre-wrap bleiben Folgen von Leerraumzeichen und Zeilenumbrüche im Quelltext erhalten, während weiterhin umgebrochen werden kann. Bei pre-line werden Leerzeichen zusammengefasst, Zeilenumbrüche im Quelltext erzeugen jedoch weiterhin Umbrüche. Diese Unterschiede können verändern, was wie ein Abstandsfehler wirkt. CSS-Eigenschaft white-space

Testen Sie für eine gewöhnliche Fließtextbeschreibung vorübergehend white-space: normal. Verbessert sich das Ergebnis, prüfen Sie den ursprünglichen Text und die Leerraumregel, bevor Sie eine dauerhafte Änderung vornehmen. Bewahren Sie bedeutungsvolle Formatierung: Ein vorformatierter Beispieltext und eine Prosabeschreibung haben unterschiedliche Anforderungen. Der Test ermittelt einen Einflussfaktor des Layouts; er zeigt nicht, dass sämtlicher erhaltener Leerraum entfernt werden sollte.

Untersuchen Sie kurze Zeilen, erzwungene Umbrüche und die Spaltenbreite

Wird die letzte Zeile gestreckt?

Untersuchen Sie text-align-last, wenn eine kurze Schlusszeile ungewöhnlich große Abstände aufweist. Diese Eigenschaft steuert sowohl die letzte Zeile eines Blocks als auch eine Zeile direkt vor einem erzwungenen Umbruch. Bei text-align: justify richtet das Standardverhalten auto diese Zeilen am Anfang aus; ein expliziter Wert justify streckt sie. Testen Sie text-align-last: start, um diesen Fall einzugrenzen. CSS-Eigenschaft text-align-last

Suchen Sie an der betroffenen Umbruchstelle nach einem br-Element. Der WHATWG-Standard definiert es als Inhaltszeilenumbruch und besagt, dass es verwendet werden sollte, wenn der Umbruch zum Inhalt gehört. Prüfen Sie bei einer gewöhnlichen Fließtextbeschreibung einen Umbruch, der allein eingefügt wurde, um eine bestimmte Desktop-Anordnung nachzubilden; wenn das beabsichtigte Verhalten ein automatischer Umbruch ist, lassen Sie diesen das Zeilenende bestimmen. HTML-Standard: Das br-Element

Tritt das Problem bei einer schmalen Spalte auf?

Stellen Sie den Blocksatz wieder her und ändern Sie nur die verfügbare Breite des Absatzes. Probieren Sie eine etwas breitere und anschließend eine schmalere Spalte aus; Text und Schriftart bleiben unverändert. Notieren Sie, welche Wörter zwischen den Zeilen wechseln und ob die auffälligen Abstände mitwandern.

Nutzen Sie dies als Entscheidungstest. Führt eine breitere Spalte zu besseren Zeilenumbrüchen, passen Sie das Layout an, sofern der verfügbare Platz dies zulässt. Muss die Beschreibung schmal bleiben und wirken mehrere Zeilen weiterhin zu weit auseinandergezogen, ist eine linksbündige Ausrichtung eine praktikable Alternative. Wählen Sie die Breite nicht allein deshalb, weil ein einzelner Beispielabsatz dadurch zufällig sauber passt.

Würde Silbentrennung nützliche Umbruchmöglichkeiten schaffen?

Testen Sie hyphens: auto für englischen Fließtext, nachdem Sie bestätigt haben, dass der Absatz selbst oder ein übergeordnetes Element den richtigen Wert lang hat, beispielsweise en. Die automatische Silbentrennung hängt davon ab, dass die Sprache ausgezeichnet ist und ein geeignetes Wörterbuch verfügbar ist. Dass keine sichtbaren Trennstriche erscheinen, beweist allein nicht, dass die CSS-Deklaration fehlgeschlagen ist. CSS-Eigenschaft hyphens

Verwenden Sie in diesem Test gewöhnliche Wörter statt erfundener, nicht trennbarer Bezeichner. Prüfen Sie anschließend den gesamten Absatz: Das gewünschte Ergebnis sind bessere Zeilenumbrüche und nicht bloß ein sichtbarer Bindestrich. Verbessert die automatische Silbentrennung das Ergebnis im Zielbrowser nicht, behalten Sie die wirksame Lösung mit Breite oder Ausrichtung bei.

Trennen Sie Schriftänderungen vom Blocksatz des Browsers

Ändern sich die Zeilenumbrüche, nachdem die Seite zum ersten Mal angezeigt wurde, untersuchen Sie vor dem Vergleich von Screenshots das Laden der Schriftart. Die CSS Font Loading API stellt document.fonts.ready bereit, ein Promise, das aufgelöst wird, nachdem das Laden der Schriftart und das zugehörige Layout abgeschlossen sind. Es bietet einen nützlichen Synchronisationspunkt für Messungen, spätere Seitenänderungen können jedoch weiterhin einen neuen Vergleich erfordern. CSS Font Loading API

Vergleichen Sie für einen visuellen Test den ursprünglichen Absatz mit einer vorübergehenden Einstellung font-family: system-ui, während Breite und Schriftgröße unverändert bleiben. Betrachten Sie jede Verbesserung als Hinweis darauf, dass die Schriftartwahl dieses Layout beeinflusst, nicht als Beweis dafür, dass die ursprüngliche Schriftart fehlerhaft ist. In Firefox oder Safari kann die Ansicht Fonts im Inspektor helfen, die auf das ausgewählte Element angewendeten Schriftarten zu untersuchen. Was sind Browser-Entwicklertools?

Achten Sie auf die Abgrenzung der Textgestaltung. HarfBuzz gestaltet Textläufe mit gemeinsamen Eigenschaften zu positionierten Glyphen. Die Dokumentation schließt Zeilenumbrüche auf Absatzebene, Silbentrennung und Blocksatz ausdrücklich aus. Daher ist die Änderung einer HarfBuzz-Einstellung kein allgemeines Mittel in Browser-CSS gegen auseinandergezogene Wortabstände. Was HarfBuzz nicht tut

Bauen Sie aus demselben Grund kein Ersatzlayout, indem Sie jedes Zeichen einzeln vermessen und positionieren. Dieser Ansatz greift in die Textgestaltung und das Absatzlayout ein. Fahren Sie bei gewöhnlichem DOM-Text mit der Diagnose der Layouteingaben des Browsers fort und bewahren Sie dessen Textdarstellungspipeline.

Wählen Sie die durch Ihre Tests gestützte Korrektur

Verwenden Sie diese Tabelle, um aus den Beobachtungen eine gezielte nächste Maßnahme abzuleiten. Jede Zeile enthält eine diagnostische Schlussfolgerung; bestätigen Sie sie, indem Sie die ursprünglichen Bedingungen wiederherstellen und die erfolgreiche Änderung erneut vornehmen.

Beobachtung Was als Nächstes untersucht werden sollte Mögliche Korrektur
Abstände bleiben bei linksbündiger Ausrichtung bestehen Explizite Abstände und erhaltene Leerzeichen Die betreffende Deklaration oder unbeabsichtigte Textformatierung korrigieren
Nur Schlusszeilen werden gestreckt Ausrichtung der letzten Zeile und erzwungene Umbrüche Diese Zeilen linksbündig ausrichten; nur der Darstellung dienende Umbrüche überprüfen
Abstände verschieben sich, wenn Wörter neu umbrochen werden Spaltenbreite und verfügbare Umbruchmöglichkeiten Breite anpassen, Silbentrennung testen oder linksbündige Ausrichtung verwenden
Layout ändert sich während des Ladens Laden der Schriftart und die angewendete Schriftart Nach dem Laden der Schriftarten vergleichen und den schriftartbedingten Unterschied beheben
Eine Änderung der Blocksatzmethode hat keine Wirkung Browserunterstützung und angewendete Deklaration Unterstützte Ausrichtungs- und Layoutoptionen verwenden

Verlassen Sie sich nicht auf text-justify: inter-word als allgemeingültige Lösung. MDN kennzeichnet text-justify derzeit als nur eingeschränkt verfügbar. Wo unterstützt, wählt inter-word die Erweiterung an Wortgrenzen, während auto dem Browser die Wahl der Methode überlässt. Die Auswahl von Wortgrenzen garantiert keine kleinen Abstände in einer Zeile mit wenigen Erweiterungsmöglichkeiten. CSS-Eigenschaft text-justify

Wird diese Eigenschaft nicht unterstützt, verwenden Sie den unterstützten Weg, den Ihr Vergleich ergeben hat: Ausrichtung ändern, verfügbare Zeilenbreite vergrößern, unbeabsichtigte Leerzeichen korrigieren oder sprachabhängige Silbentrennung testen. Prüfen Sie die endgültige Wahl in jedem Zielbrowser bei vergleichbaren Inhaltsbreiten erneut. Browserunterschiede allein belegen keinen Fehler, da CSS keinen vollständigen Blocksatzalgorithmus vorgibt. CSS Text Module Level 3

Schließen Sie die Untersuchung ab, wenn Sie das Symptom durch einen wiederholbaren Vergleich erklären können: Der ursprüngliche Absatz weist den Abstand auf, eine bestimmte Änderung verbessert ihn, und das Ergebnis bleibt bei den benötigten Breiten brauchbar. Wenn Sie die Seite pflegen, übernehmen Sie diese kleinste wirksame Korrektur in den Seitenquelltext. Untersuchen Sie lediglich eine öffentliche Seite, halten Sie die beobachteten Werte und Reproduktionsschritte als Ergebnis fest.

Quellen