Damit ein durch ein Leerzeichen abgesetztes Satzzeichen auf einer Webseite mit dem vorangehenden Wort zusammenbleibt, ersetzen Sie das gewöhnliche Leerzeichen durch ein geschütztes Leerzeichen oder schließen Sie die beiden Zeichen in ein kleines CSS-Span-Element ohne Zeilenumbruch ein. Testen Sie das Ergebnis auf Ihrem Mac in einer lokalen HTML-Datei bei verschiedenen Breiten.

Diese Anleitung richtet sich an alle, die auf einem Mac den Text oder HTML-Code einer Seite bearbeiten – zum Beispiel eine abstrakte Kachelbeschriftung wie Beta : in einer schmalen Karte. Die sichtbare Lücke soll erhalten bleiben, gleichzeitig soll der Doppelpunkt nicht allein in die nächste Zeile umbrechen. Die Beispiele behalten diesen Abstand bewusst bei.

Welche Lösung sollten Sie wählen?

Entscheiden Sie zuerst, ob die Abstandsregel im Text selbst oder in der Darstellung der Seite verankert sein soll. Unicode definiert U+00A0 NO-BREAK SPACE als geschütztes Gegenstück zum gewöhnlichen Leerzeichen und U+202F NARROW NO-BREAK SPACE als dessen schmalere Variante. Damit stehen Ihnen zwei unterschiedliche sichtbare Abstände zur Wahl. Unicode-Standard, Kapitel 6

Ihre Bearbeitungssituation Empfohlener Ausgangspunkt Was zu überprüfen ist
Sie können den Text ändern und möchten einen Abstand in normaler Breite Ersetzen Sie das gewöhnliche Leerzeichen durch U+00A0 Der gespeicherte Text enthält weiterhin das geschützte Zeichen
Sie möchten bewusst einen schmaleren Abstand Verwenden Sie U+202F Das Ergebnis sieht in der tatsächlich verwendeten Seitenschrift passend aus
Sie möchten im Text ein gewöhnliches Leerzeichen beibehalten Wenden Sie white-space: nowrap auf ein Span-Element an, das das gesamte Zeichenpaar enthält Das Span-Element umfasst Wort, Leerzeichen und Satzzeichen
Sie können die Seite nur ansehen Nehmen Sie die Korrektur in der bearbeitbaren Quelle vor oder bitten Sie die zuständige Person darum Ein lokaler Versuch ändert die Originalseite nicht

Schreiben Sie im HTML-Quellcode Beta :. In der Tabelle der Zeichenreferenzen des WHATWG wird   U+00A0 zugeordnet. Ersetzen Sie das vorhandene Leerzeichen; lassen Sie kein gewöhnliches Leerzeichen vor der Referenz stehen. HTML-Standard: Benannte Zeichenreferenzen

Für eine Darstellungsregel setzen Sie Beta : in ein Inline-Span-Element und wenden white-space: nowrap auf dieses Element an. Der umgebende Absatz soll weiterhin normal umbrechen können. Laut MDN steuert white-space sowohl die Behandlung von Leerraum als auch den Zeilenumbruch. MDN: white-space

Entscheidend ist, wie viel Text zusammenbleiben muss. Schützen Sie in diesem Beispiel nur Beta :. Tile Alpha Beta : Next tile zu schützen würde den gesamten Text der Beschriftung unnötig einschränken. Beginnen Sie mit der kleinsten Einheit, die die gewünschte Beziehung ausdrückt.

So erstellen Sie mit TextEdit einen lokalen Test

Erstellen Sie eine separate Testdatei, bevor Sie eine vorhandene Seite ändern. Apple erklärt, wie Sie in TextEdit im Nur-Text-Modus HTML-Dateien erstellen, sie mit der Erweiterung .html speichern und bei entsprechender Aufforderung Use .html auswählen. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

  1. Öffnen Sie TextEdit und wählen Sie File > New.
  2. Wählen Sie Format > Make Plain Text.
  3. Fügen Sie das vollständige Beispiel unten ein.
  4. Wählen Sie File > Save und nennen Sie die Datei punctuation-test.html.
  5. Wählen Sie bei entsprechender Aufforderung Use .html.
  6. Öffnen Sie die gespeicherte Datei in Safari über File > Open File.

Dies ist ein vollständiges, eigenständiges HTML-Dokument. Es benötigt weder eine Bibliothek noch eine Installation oder Netzwerkverbindung. Die drei Karten verwenden denselben Beispielsatz, wobei in jeder Karte das Leerzeichen vor dem Doppelpunkt anders behandelt wird.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

Die Umwandlung der Zeichenreferenz im Beispiel wurde mit einem Parser überprüft: &nbsp; wird zu U+00A0. Während der Vorbereitung wurde die Darstellung im Browser nicht ausgeführt. Prüfen Sie das Layout in Ihrem Mac-Browser anhand des folgenden Vergleichs.

Vergleichen Sie die Umbruchstelle, nicht nur einen Screenshot

Die beispielhafte Breite von 14ch ist ein Ausgangspunkt, kein garantierter Umbruchpunkt. Ändern Sie den Wert in 10ch, speichern Sie und laden Sie die Seite neu. Probieren Sie anschließend 18ch aus. Suchen Sie eine Breite, bei der sich in der Karte mit gewöhnlichem Leerzeichen der Doppelpunkt von Beta trennt. Bei den beiden geschützten Varianten sollten Beta und der Doppelpunkt zusammenbleiben, während andere Wörter umgebrochen werden können.

Wenn alle drei Karten zunächst gleich aussehen, beweist das nicht, dass die Leerzeichen gleich behandelt werden. Möglicherweise ist einfach genug Platz für die beiden Zeichen vorhanden. Variieren Sie die Breite, bis die betreffende Stelle das Zeilenende erreicht, und vergrößern Sie anschließend den Text und wiederholen Sie den Test.

Wenn Sie die Datei erneut in TextEdit öffnen, wählen Sie File > Open, wählen Sie die Datei aus, klicken Sie auf Show Options und wählen Sie bei Bedarf Ignore rich text commands. Apple dokumentiert auch die Einstellung Display HTML files as HTML code instead of formatted text. Mit diesen Optionen können Sie den Quellcode direkt bearbeiten. Apples Anleitung zu HTML in TextEdit

Warum kann ein geschütztes Leerzeichen trotzdem versagen?

Ein geschütztes Zeichen wirkt innerhalb der Regeln des Browsers für den Textfluss. Bevor Sie weitere unsichtbare Zeichen hinzufügen, prüfen Sie, ob die Ursache beim Inhalt, einer überschreibenden CSS-Regel oder einer Layoutgrenze liegt.

Die Seite zeigt die Referenz wörtlich an

Wenn auf der Seite die Zeichen &nbsp; erscheinen, wurde Ihre Eingabe als Text behandelt und nicht als HTML-Zeichenreferenz interpretiert. Verwenden Sie in einem HTML-Quellcodefeld Beta&nbsp;:. Fügen Sie in einem normalen Textfeld stattdessen das tatsächliche geschützte Zeichen ein.

Dasselbe gilt für JavaScript. Wenn Sie über textContent eine Zeichenfolge zuweisen, wird Text erstellt; HTML-Referenzen werden dadurch nicht interpretiert. Eine JavaScript-Zeichenfolge kann das Zeichen als "Beta\u00A0:" enthalten. Weisen Sie außerdem nicht textContent einem ganzen formatierten Absatz zu, nur um eine einzelne Lücke zu korrigieren: Dadurch werden seine vorhandenen Kindelemente ersetzt. MDN: Node.textContent

Eine CSS-Regel erlaubt besonders aggressive Umbrüche

Prüfen Sie, ob line-break: anywhere gesetzt ist. Laut MDN erlaubt dieser Wert Umbrüche an typografischen Zeichen-Einheiten und ignoriert dabei Umbruchverbote, die mit den Klassen für Klebung und Wortverbinder verknüpft sind. Ein zusätzliches geschütztes Zeichen kann daher nicht als uneingeschränkte Vorrangregel gegenüber dieser Einstellung behandelt werden. MDN: line-break

Prüfen Sie außerdem overflow-wrap. Der Wert anywhere ermöglicht es, eine ansonsten untrennbare Zeichenfolge bei Bedarf aufzuteilen, um einen Überlauf zu verhindern. Dieses Notfallverhalten unterscheidet sich von einem gewöhnlichen Umbruch an einem Leerzeichen. MDN: overflow-wrap

Verwenden Sie ein lokales Span-Element ohne Zeilenumbruch, wenn die Darstellung verlangt, dass das gesamte kurze Zeichenpaar zusammenbleibt. Prüfen Sie die tatsächlich auf dieses Element angewendete Regel, insbesondere wenn das Stylesheet der Seite spezifischere Selektoren enthält. Beschränken Sie die Korrektur auf diesen Bereich, damit längere, nicht betroffene Texte weiterhin wie bisher umbrechen.

Das Satzzeichen befindet sich in einer eigenen Layoutbox

Prüfen Sie, ob der Doppelpunkt gewöhnlicher Inline-Text ist oder sich in einem inline-block oder einem anderen atomaren Inline-Element befindet. Das W3C legt besondere Umbruchmöglichkeiten um atomare Inline-Elemente fest, darunter eine Ausnahme im Zusammenhang mit benachbarten geschützten Leerzeichen. Ein Leerzeichen neben einer solchen Box entspricht nicht einem Leerzeichen innerhalb eines zusammenhängenden Textlaufs. CSS Text Module Level 3: Details zu Zeilenumbrüchen

Halten Sie bei dieser einfachen Beschriftung Wort, Lücke und Satzzeichen in einem gewöhnlichen Inline-Span-Element. Entfernen Sie ein explizites <br> dazwischen, wenn automatische Umbrüche gewünscht sind; nowrap verhindert weiche Zeilenumbrüche, entfernt aber keine erzwungenen Umbrüche. CSS Text Module Level 3: Leerraum und Umbrüche

Wie erhalten Sie die Schriftgestaltung des Browsers und gehen mit engen Layouts um?

Halten Sie jedes Wort zusammen, statt seine einzelnen Buchstaben umzubrechen. Das W3C legt fest, wann die Schriftgestaltung über Inline-Grenzen hinweg fortgesetzt werden muss und wann Änderungen wie dazwischenliegender Innenabstand, Rahmen oder Ausrichtung einen Bruch erfordern. Ein einfaches Inline-Span-Element vermeidet unnötige Formatierungsgrenzen. CSS Text Module Level 3: Schriftgestaltung über Elementgrenzen hinweg

Eine physische Einschränkung bleibt bestehen: Das geschützte Zeichenpaar braucht ausreichend Platz in der Breite. Wird der Container schmaler als Beta :, kann das Zusammenhalten des Paars zu einem Überlauf führen. Testen Sie diesen Fall gezielt. Wählen Sie dann eine passende Layoutlösung, etwa die Karte zu verbreitern oder ihre Beschriftung zu kürzen, statt den betroffenen Text auszublenden. Das Verhalten von Elementen ohne Zeilenumbruch ist in der Definition von white-space des W3C dokumentiert.

Benötigen Sie eine Bibliothek für Zeilenumbrüche?

Für eine gewöhnliche Browserseite ist das nicht erforderlich. Die benannte Bibliothek linebreak berechnet mögliche Umbruchstellen nach Unicode. In der Dokumentation steht ausdrücklich, dass die tatsächliche Zeilenauswahl der Software überlassen bleibt, die die verfügbare Breite und die angezeigte Textgröße kennt. In der README wird derzeit Unicode-Version 13 als unterstützt angegeben. Dokumentation zu foliojs/linebreak

Diese Abgrenzung ist wichtig, wenn ein anderes Tool die Bibliothek bereits verwendet. Eine Liste möglicher Umbruchstellen zeigt nicht, wo ein Browser formatierten Text umbrechen wird. Überlassen Sie bei dieser Bearbeitung einer Seite die Schriftgestaltung und den endgültigen Zeilenumbruch dem Browser. Drücken Sie die gewünschte Einschränkung über das Zeichen oder lokales CSS aus.

Bevor Sie die Korrektur übernehmen, prüfen Sie drei Dinge: Die Lücke bleibt sichtbar, Wort und Satzzeichen bleiben nahe dem Zeilenende zusammen, und der umgebende Text kann weiterhin umbrechen. Verwenden Sie ein geschütztes Leerzeichen, wenn die Beziehung im Text verankert ist, oder ein eng begrenztes Span-Element ohne Zeilenumbruch, wenn sie zur Darstellung gehört. Prüfen Sie die tatsächliche Seite erneut bei der schmalsten sinnvollen Breite.

Quellen