Um einen weichen Zeilenumbruch von einem gespeicherten Zeilenumbruch zu unterscheiden, deaktivieren Sie den Zeilenumbruch in einem Texteditor und prüfen Sie den Originaltext. Dieser Mac-Leitfaden erklärt diese Prüfung, zeigt, wie Browserlayouts täuschen können, und erläutert, was kopierter Code tatsächlich belegen kann.

Was ist der Unterschied zwischen einem weichen Zeilenumbruch und einem Zeilenumbruch?

Ein weicher Zeilenumbruch entsteht, wenn ein Browser oder Editor Text in eine weitere Anzeigezeile verschiebt, damit er in die verfügbare Breite passt. Ein gespeicherter Zeilenumbruch ist Teil des Textes selbst. Das W3C unterscheidet weiche Zeilenumbrüche von erzwungenen Umbrüchen, die durch beibehaltene Zeilenumbruchzeichen oder Blockgrenzen entstehen können. Die CSS-Verarbeitung von Leerraum verändert die Darstellung, ohne die zugrunde liegenden Dokumentdaten zu ändern. CSS Text Module Level 3

Daraus ergeben sich drei Möglichkeiten, wenn Code auf mehreren Zeilen erscheint: Eine logische Zeile wurde umgebrochen; der Text enthält mehrere logische Zeilen; oder die Struktur der Seite erzwingt einen sichtbaren Umbruch. Ein Screenshot allein lässt nicht zuverlässig erkennen, welche Möglichkeit zutrifft.

Hier bezeichnet „eingefügter Zeilenumbruch“ einen Zeilenumbruch, der im untersuchten Quelltext vorhanden ist. Daraus geht nicht hervor, wer ihn eingefügt hat: Er kann durch einen Formatierer, einen Exportvorgang oder eine andere Umwandlung entstanden sein. Entscheidend ist, ob eine Grenze zum Text gehört oder nur zu seiner aktuellen Darstellung.

Wie prüfen Sie Code in einem Desktop-Editor auf dem Mac?

Verwenden Sie für diesen Ablauf Visual Studio Code. Beginnen Sie, sofern verfügbar, mit der Originaldatei. Wenn Ihnen nur eine öffentliche Seite vorliegt, kopieren Sie den betreffenden Code in ein separates Editor-Dokument. Betrachten Sie dieses Dokument jedoch zunächst als Beleg für den kopierten Text und vergleichen Sie ihn nach Möglichkeit mit dem Original.

Deaktivieren Sie den Zeilenumbruch, ohne den Text umzuformatieren

  1. Öffnen Sie die Datei oder das kopierte Beispiel in VS Code.
  2. Drücken Sie bei fokussiertem Editor Option+Z, um Toggle Word Wrap auszuführen.
  3. Prüfen Sie, ob die scheinbare Fortsetzung mit der vorherigen Anzeigezeile zusammengeführt wird und sich horizontal fortsetzt.
  4. War der Zeilenumbruch bereits deaktiviert, schalten Sie ihn einmal um, um beide Zustände zu vergleichen. Entscheidend ist der Unterschied zwischen den beiden Ansichten.

Microsoft gibt Option+Z als standardmäßigen macOS-Kurzbefehl für Toggle Word Wrap mit der Befehls-ID editor.action.toggleWordWrap an. Wenn Ihre Tastenkürzel abweichen, suchen Sie den Befehl im Editor Keyboard Shortcuts. Referenz der standardmäßigen Tastenkürzel

Ist editor.wordWrap auf on eingestellt, bricht VS Code Text an der Breite des Editorfensters um. Wenn Sie den Zeilenumbruch deaktivieren, verschwinden daher diese visuellen Fortsetzungen. Eine Grenze, die im unveränderten Text bestehen bleibt, ist eine logische Zeilengrenze und kein weicher Zeilenumbruch dieses Editors. Grundlegende Bearbeitung

Nutzen Sie beim Vergleich der Ansichten diese Entscheidungstabelle:

Beobachtung Was dafür spricht Nächster Schritt
Eine Fortsetzung wird bei deaktiviertem Zeilenumbruch mit der vorherigen Zeile zusammengeführt Im Editor handelte es sich um einen weichen Zeilenumbruch Text unverändert lassen
Bei deaktiviertem Zeilenumbruch bleiben zwei Zeilen getrennt Der untersuchte Text enthält eine Zeilengrenze Mit dem Original vergleichen, wenn Sie eine Kopie untersucht haben
Eine Seitengrenze verschwindet im kopierten Text Seite und kopierte Darstellung unterscheiden sich Text und Struktur der Seite untersuchen
Eine kopierte Grenze bleibt bestehen, aber es ist kein Original verfügbar Der kopierte Text enthält diese Grenze Ursprung ungeklärt lassen

Probieren Sie ein künstliches Beispiel aus

Fügen Sie das folgende einzeilige Beispiel in ein separates Dokument ein. Es handelt sich um illustrativen JavaScript-Text; eine Ausführung ist nicht nötig.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

Verkleinern Sie den Editor so weit, dass der Text umgebrochen wird. Bei aktiviertem Zeilenumbruch kann die Anweisung mehrere Anzeigezeilen belegen. Deaktivieren Sie den Zeilenumbruch: Die Anweisung sollte wieder eine logische Zeile bilden, auch wenn Sie horizontal scrollen müssen, um das Ende zu lesen.

Vergleichen Sie nun diese absichtlich mehrzeilige Version:

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

Diese vier logischen Zeilen bleiben bei deaktiviertem Zeilenumbruch getrennt. Bei geringer Breite kann auch jede einzelne davon umgebrochen werden. Das ist der entscheidende Unterschied: In demselben Codebeispiel können gespeicherte Zeilenumbrüche und weiche Umbrüche zugleich vorkommen.

Formatieren Sie das Dokument während des Vergleichs nicht neu. Ziel ist, die Ansicht zu ändern und dabei den untersuchten Text konstant zu halten. Andernfalls könnte eine veränderte Zeilengrenze auf eine Bearbeitung statt auf eine Anzeigeeinstellung zurückzuführen sein.

Warum ist eine Größenänderung des Browserfensters nur ein erster Test?

Stellen Sie sich eine abstrakte öffentliche Seite mit einer Navigationsspalte und einem Codebereich vor. Wenn Sie das Browserfenster verbreitern, kann der Codebereich mehr Platz erhalten. Verschiebt sich eine Grenze dadurch an eine andere Stelle im Wort, spricht das für einen Zeilenumbruch. Hat der Bereich jedoch eine feste Breite, kann eine Größenänderung des äußeren Fensters wirkungslos bleiben.

Eine unverändert bleibende Grenze ist daher nicht aussagekräftig. Der Browser kann einen Zeilenumbruch beibehalten, auf einen strukturellen Umbruch stoßen oder den Text innerhalb eines Bereichs umbrechen, dessen nutzbare Breite sich nicht geändert hat. Überprüfen Sie das Ergebnis anhand der Textdarstellung, statt die Größenänderung des Fensters als Beweis zu behandeln.

Auch CSS bestimmt, ob gespeicherte Zeilenumbrüche sichtbar sind. MDN dokumentiert die folgenden gängigen Werte: CSS-Eigenschaft white-space

CSS-Wert Behandlung von Zeilenumbrüchen im Quelltext Automatischer Zeilenumbruch
normal Wird mit anderem Leerraum zusammengefasst Zulässig
pre Bleibt erhalten Deaktiviert
pre-wrap Bleibt erhalten Zulässig
pre-line Bleibt erhalten; Leerzeichen und Tabulatoren werden zusammengefasst Zulässig

Daher kann pre-wrap beide Arten von Grenzen gleichzeitig anzeigen, während normal Zeilenumbrüche im Quelltext verbergen kann. Das Deaktivieren des Zeilenumbruchs mit nowrap reicht nicht aus, um die Beibehaltung des Quelltexts zu überprüfen, da dabei auch Leerraum zusammengefasst wird. Für einen einfachen Textblock, den Sie kontrollieren, ist pre der passende Vergleich, wenn Sie beibehaltenen Leerraum ohne automatischen Zeilenumbruch benötigen. CSS-Eigenschaft white-space

Lassen sich die ursprünglichen Zeilenumbrüche im kopierten Text erkennen?

Kopierter Text ist hilfreich, stellt aber eine eigene Darstellung dar. MDN beschreibt innerText als gerenderten Text, der annähernd dem entspricht, was beim Markieren und Kopieren eines Elements herauskommt. Er richtet sich nach dem gerenderten Erscheinungsbild, einschließlich expliziter Umbrüche wie br-Elementen. Ein Zeilenumbruch in einem eingefügten Beispiel beweist daher für sich genommen nicht, dass die ursprüngliche Codezeichenfolge einen solchen enthielt. HTMLElement: innerText-Eigenschaft

Für einen einfachen statischen Codecontainer beantwortet textContent eine andere Frage: Die Eigenschaft gibt den Text des Knotens und seiner Nachfahren zurück und fügt den Text der Nachfahren zusammen, ohne das gerenderte Erscheinungsbild zu verwenden. Sie eignet sich damit zur Untersuchung des DOM-Texts, sofern der Container tatsächlich den gewünschten Code enthält. Node: textContent-Eigenschaft

Diese Eigenschaften sind keine austauschbaren Werkzeuge zur Wiederherstellung. Ein struktureller Umbruch muss kein Zeilenumbruch in textContent sein; umgekehrt kann Leerraum im Quelltext vorhanden sein, ohne als sichtbarer Umbruch zu erscheinen. Wenn Text und Layout der Seite voneinander abweichen, beschreiben Sie das Ergebnis präzise: „Der DOM-Text enthält einen Zeilenumbruch“, „Das Layout erzwingt einen Umbruch“ oder „Die kopierte Version enthält einen Zeilenumbruch“. Behaupten Sie nicht mehr, als die untersuchte Darstellung belegt.

Was ändert sich bei einem codebasierten Editor im Browser?

Ein Browsereditor kann sein Dokument getrennt von den angezeigten Elementen verwalten. Die offizielle Quelldokumentation von CodeMirror beschreibt beispielsweise Dokumentzeilen über sein Text-Modell: lines zählt logische Zeilen und line(n) ruft eine nummerierte Zeile ab. Die Position to einer Zeile liegt vor dem folgenden Zeilenumbruch oder am Dokumentende. CodeMirror-Dokumentation zur API für Dokumenttext

CodeMirror dokumentiert außerdem, dass seine Ansicht nur den sichtbaren Code samt einem umliegenden Rand in das DOM zeichnet. Die Eigenschaft lineWrapping beschreibt den Zeilenumbruch in der Ansicht. Daher reichen weder das Zählen angezeigter Zeilen noch das Auslesen des sichtbaren Editor-DOM aus, um die Zeilen des vollständigen Dokuments festzustellen. CodeMirror-Dokumentation zur API für Editoransichten

Für eine gewöhnliche Prüfung auf dem Desktop verwenden Sie, sofern verfügbar, den dokumentierten Befehl der Hostanwendung zum Herunterladen, Exportieren oder Kopieren einer Datei und untersuchen Sie das Ergebnis anschließend bei deaktiviertem Zeilenumbruch. Wenn Sie eine CodeMirror-Integration betreuen, ermitteln Sie logische Zeilen über das Dokumentmodell. Eine Bibliotheks-API belegt nicht, dass jede Anwendung eine entsprechende Steuerung für Nutzende bereitstellt.

Kann ein Formular Zeilenumbrüche hinzufügen, die nie eingegeben wurden?

Ja. Der WHATWG-HTML-Standard unterscheidet zwischen dem aktuellen API-Wert eines Textbereichs und seiner Übermittlungsdarstellung. Bei wrap="soft" kann Text visuell umgebrochen werden, ohne dass zusätzliche Umbrüche bei der Übermittlung eingefügt werden. Bei wrap="hard" kann die Übermittlungsdarstellung Zeilenumbrüche erhalten; dieser Zustand erfordert, dass cols angegeben wird. Der API-Wert normalisiert Zeilenenden auf LF. HTML-Standard: Das textarea-Element

Das ist beim Vergleich von Text vor und nach einem formularbasierten Ablauf wichtig. Eine Grenze, die nur im übermittelten oder exportierten Ergebnis erscheint, kann in diesem Verarbeitungsschritt entstanden sein. Untersuchen Sie die für Ihre Aufgabe relevante Darstellung: den aktuellen Editortext, wenn Sie eingegebene Grenzen ermitteln wollen, oder die resultierende Datei, wenn Sie feststellen möchten, was tatsächlich exportiert wurde.

Wie bewahren Sie Grenzen von Browserdarstellung und Textgestaltung?

Überlassen Sie den visuellen Zeilenumbruch dem Browser oder Editor. Das W3C legt fest, dass overflow-wrap: anywhere Graphemcluster zusammenhält und die Textgestaltung über den eingefügten Umbruch hinweg bewahrt. Wenn Sie Zeilen neu aufbauen, indem Sie nach einer festen Zeichenanzahl Zeilenumbrüche einfügen, bilden Sie diese Layoutregeln nicht nach. CSS Text Module Level 3

Wenn Sie ein Codebeispiel wiederverwenden möchten, beschaffen Sie zuerst die bestmögliche verfügbare Quelle, vergleichen Sie die Ansicht mit aktiviertem und deaktiviertem Zeilenumbruch und behalten Sie die gespeicherten Zeilengrenzen bei, sofern Sie keine Änderung beabsichtigen. Ist nur eine gerenderte Seite verfügbar, halten Sie fest, was sich über diese Darstellung feststellen lässt, und lassen Sie unsichere Grenzen ungeklärt. So erhalten Sie eine wiederholbare Prüfung, ohne durch eine Anzeigeänderung versehentlich den Text zu verändern.

Quellen