HTML formatieren oder komprimieren

Ein Feld, zwei Schaltflächen. „HTML formatieren“ schreibt das Markup um: jedes Tag auf eine eigene Zeile, verschachtelte Elemente eingerückt, mit der Breite aus der Liste daneben — Tabulator, 2, 4 (Vorgabe) oder 8 Leerzeichen. „HTML komprimieren“ gibt dasselbe Markup mit zusammengeschobenem Leerraum zurück.

Beide Schaltflächen arbeiten nur mit dem Text im Feld: Beim Drücken ging keine einzige Anfrage hinaus. Ein Dokument mit 716 KB braucht rund 2,4 Sekunden zum Formatieren und 2,1 Sekunden zum Komprimieren, und Markup, das schon ohne überflüssigen Leerraum geschrieben ist, kommt gleich groß zurück — der Minifier entfernt ausschließlich Leerraum.

Markup in das Feld einfügen und die Einrückbreite wählen, falls die Vorgabe von 4 Leerzeichen nicht passt.
„HTML formatieren“ drücken. Jedes Tag landet auf einer eigenen Zeile, Kindelemente werden eine Ebene tiefer eingerückt, und Folgen aus Leerzeichen, Tabulatoren und Zeilenumbrüchen im Text werden zu einem einzigen Leerzeichen.
„HTML komprimieren“ drückt die auslieferbare Fassung aus: Leerraumfolgen werden zu einzelnen Leerzeichen, die Einrückung verschwindet, während Tags, Attribute, Kommentare, Entities und Doctype unverändert bleiben.
„Kopieren“ übernimmt das sichtbare Ergebnis, „Leeren“ räumt Feld und Ergebnisbereich.

Was die beiden Schaltflächen mit Leerraum machen

Lesen oder ausliefern

Formatieren dient dem Lesen. Jedes Tag kommt auf eine eigene Zeile, die Einrückung folgt der Verschachtelungstiefe, und die Abstände im Text werden vereinheitlicht. Da die Einrückung Leerraum einfügt, wo vorher keiner war, kann eine formatierte Seite anders rendern als das Original: <div><span>a</span><span>b</span></div> rendert als "ab", die formatierte Fassung als "a b".

Komprimieren dient dem Ausliefern. Eine Leerraumfolge wird zu einem Leerzeichen — so, wie der Browser sie liest —, der Zeilenumbruch zwischen zwei Inline-Elementen bleibt also als einzelnes Leerzeichen erhalten statt gelöscht zu werden. In allen sechs Sprachen rendert die komprimierte Fassung bei Inline-Folgen, Listen, Tabellen und verschachtelten Blöcken identisch zum Ausgangstext.

Was die Komprimierung nicht anfasst

Die Inhalte von pre und textarea werden Byte für Byte übernommen, denn ihr Leerraum gehört zum Dokument und nicht zum Layout. Dasselbe gilt für script- und style-Inhalte, die in anderen Sprachen geschrieben sind: Ein zusammengeschobener Zeilenumbruch würde den Rest eines //-Kommentars zu Code machen oder den Inhalt eines Template-Literals verändern.

Werte in Anführungszeichen bleiben exakt erhalten, Leerzeichenfolgen inklusive, egal ob in value, title oder einem data-Attribut. Kommentartext, Entities wie   und ©, selbstschließende Tags und der Doctype gehen ebenfalls unverändert durch. Verschwunden ist nur der Leerraum zwischen den Dingen.

Wiederholung und der Umbruch bei 80 Zeichen

Ein zweiter Klick ändert nichts mehr: Ein formatiertes Dokument formatiert sich zu sich selbst, ein komprimiertes komprimiert sich zu sich selbst. Der Ergebnisbereich ist eine hervorgehobene Vorschau, deshalb ist die Schaltfläche „Kopieren“ und nicht eine manuelle Auswahl der verlässliche Weg nach draußen.

Ein Tag, dessen Attribute die Zeile über 80 Zeichen schieben, wird in der formatierten Ausgabe auf die nächste Zeile umbrochen, und der Umbruch liegt zwischen Attributen, nie in einem Wert in Anführungszeichen. Textinhalt wird nicht umbrochen, und die komprimierte Ausgabe enthält außerhalb der geschützten Bereiche überhaupt keine Zeilenumbrüche.

Wo es läuft und was es kostet

Formatieren und Komprimieren laufen in der Seite: Beim Drücken der Schaltflächen verließ keine Anfrage den Browser, das eingefügte Markup wird also nie hochgeladen, und ohne Netz arbeitet das Werkzeug weiter.

Der Aufwand wächst mit der Eingabe. 176 KB wurden in rund 0,6 Sekunden formatiert und in 0,5 Sekunden komprimiert; eine Seite mit 716 KB brauchte 2,4 und 2,1 Sekunden. Der Minifier ist ein Leerraum-Durchlauf und kein vollständiger HTML-Parser — er schreibt keine Anführungszeichen um und lässt keine optionalen Schluss-Tags weg —, und dieselbe Engine treibt den JavaScript-Formatierer an, ein script-Block im Markup wird also als JavaScript formatiert.