HTML-Formatierer
Ein HTML-Dokument einrücken, ohne zu ändern, wie es dargestellt wird — vollständig in Ihrem Browser.
Läuft vollständig in Ihrem Browser. Nichts wird hochgeladen, protokolliert oder gespeichert.
Fügen Sie eine minifizierte oder schlecht eingerückte Seite ein und lesen Sie sie ordentlich. Formatiert wird in Ihrem Browser, und das Dokument, das herauskommt, wird genauso dargestellt wie das, das hineinging.
Wie es funktioniert
Das Dokument wird in einen Baum eingelesen — dort werden leere Elemente, der Inhalt von script und style und die optionalen schließenden Tags von HTML erledigt — und dann mit neuer Einrückung wieder ausgegeben.
Wo die Zeilen fallen, entscheidet, wie ein Browser Leerraum liest, und nicht, was ordentlich aussieht. Jede Folge von Leerraum wird als ein einzelnes Leerzeichen dargestellt, ein Leerzeichen in einen Zeilenumbruch mit Einrückung zu verwandeln ändert also nichts. Eines zu erzeugen, wo keines war, schon: Das ist es, was aus zwei benachbarten Inline-Elementen zwei durch ein Leerzeichen getrennte macht.
Leerraum wird daher nur zwischen Blockboxen und an deren Rändern hinzugefügt oder entfernt, wo ein Browser nichts davon darstellt. Das ist die Ausnahme, die es erlaubt, eine minifizierte Seite aufzuklappen, und zugleich der Grund, warum eine Folge von Inline-Elementen auf der Zeile bleibt, auf der sie war.
Ein Tag, von dem der Formatierer noch nie gehört hat, wird als inline behandelt, denn das ist die Antwort, die keinen Leerraum hinzufügt und die Seite daher nicht ändern kann.
Beispiele
| Fall | Eingabe | Ergebnis |
|---|---|---|
| Eine Liste ohne Einrückung | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Häufige Fragen
Wird meine Seite irgendwohin gesendet?
Nein. Der Formatierer ist JavaScript, das in dieser Seite läuft. Nichts wird hochgeladen, nichts protokolliert und nichts gespeichert — Sie können Ihre Netzwerkverbindung abschalten, und das Tool arbeitet weiter.
Warum sind meine Inline-Elemente auf einer Zeile geblieben?
Weil sie zu verschieben Ihre Seite ändern würde. Leerraum zwischen zwei Inline-Boxen wird als Leerzeichen dargestellt, <span>a</span><span>b</span> auf zwei Zeilen zu setzen fügt also eine Lücke ein, die vorher nicht da war. Die meisten Formatierer tun es trotzdem; dieser nicht.
Schließt es meine offenen Tags?
Nein. Es versteht, dass ein zweites Listenelement das erste schließt, und rückt Ihre Liste daher richtig ein, aber es schreibt die Tags zurück, die Sie geschrieben haben. Ein schließendes Tag hinzuzufügen hieße, Ihr Markup zu bearbeiten statt es zu setzen, und wo genau es hingehört, ist nicht immer offensichtlich.
Prüft es das HTML?
Nein. Es hat kein Schema, keine Regeln darüber, welches Element welches enthalten darf, und keine Meinung zu Ihren Attributen. Abgelehnt werden nur ein Tag, ein Kommentar oder ein Skriptblock, die nie geschlossen werden, denn von da an kann es Markup nicht mehr von Text unterscheiden.
Was passiert mit meinen Skripten und Stylesheets?
Sie kommen Byte für Byte zurück. In einem Skript ist ein < ein Kleinerzeichen und nicht der Beginn eines Tags, und in einem <pre> oder einem <textarea> gehört jedes Leerzeichen Ihnen. Diese vier Elemente bleiben genau so, wie sie waren. Wenn Sie das Skript oder das Stylesheet selbst formatiert haben möchten, liegt der CSS-Formatierer nebenan.
Gut zu wissen
- Das Dokument, das herauskommt, wird genauso dargestellt wie das, das hineinging. Das wird von den Tests über einen Korpus behauptet und nicht der Sichtprüfung überlassen.
- Nichts wird erfunden: Kein schließendes Tag wird ergänzt, kein Attribut neu gequotet, keine Entität dekodiert und kein Tag-Name umgeschrieben. Nur der Abstand zwischen Attributen ändert sich, denn er wird nie dargestellt.
- Die Umbruchbreite entscheidet, ob ein Element mit Inline-Inhalt auf einer Zeile bleibt oder sich öffnet, ein kurzer Absatz liest sich also als eine Zeile und ein langer wird an Leerzeichen gebrochen, die er schon hatte.