Wörter, die das CSS auseinanderhielt, bleiben auseinander

Eine Zeile wie 39 words · 1 heading · 1 table besteht meist aus getrennten Elementen, deren Abstand aus dem Layout kommt und nicht aus dem Markup — konvertiert wurde sie also als 39words1heading1table. Die Erweiterung liest die Seite jetzt mit ihrem Layout in der Hand und setzt diese Leerzeichen vor der Konvertierung zurück. Kennzahlenzeilen, Tag-Listen und Brotkrumen kommen wieder als Sätze heraus.

Sehen Sie sich im Markup einer Seite die Zeile mit den Zählwerten unter einer Artikelüberschrift an. Sehr oft steht darin kein einziges Leerzeichen: <span>39</span><span>words</span> — und der Abstand, den Sie auf dem Schirm sehen, ist eine gap-Eigenschaft an einem Flex-Container. Das Leerzeichen steckt im Stylesheet, nicht im Dokument.

Jeder Konverter danach sieht die Zeichenkette und nicht die Seite, der unsere eingeschlossen; die Wörter kommen also aneinandergeklebt an. Und das ist keine exotische Form: Eine Kennzahlenzeile, eine Tag-Liste, eine Brotkrumenspur und eine Seitennummerierung sehen in jedem aktuellen Framework so aus.

Warum das nur in der Seite selbst zu beheben ist

Die einzige Stelle, die erkennen kann, ob zwei Elemente nebeneinander gesetzt sind, ist die Seite selbst, solange es dort getComputedStyle gibt. Sobald das HTML zum Konvertieren herauskopiert ist, ist das Layout mit dem Stylesheet verschwunden, und kein Raten holt es zurück: An <span>39</span><span>words</span> steht nicht, ob dort ein Leerzeichen hingehört.

Die Erweiterung klont deshalb das Dokument, geht den Klon neben dem lebenden Original durch, und wo das echte Element seine Kinder als Flex- oder Grid-Elemente setzt, bekommt die Kopie nach jedem von ihnen ein Leerzeichen. Konvertiert wird die Kopie. Ihre Seite wird nicht verändert, und das alles läuft nur in dem Moment, in dem Sie den Knopf drücken — in Ihren Tabs sitzt kein Skript.

Eine Datei, die Sie auf der Seite ablegen, bekommt davon nichts, weil es dort kein Layout zu lesen gibt. Das ist der Unterschied zwischen einer Seite und einer Kopie ihres Markups, und er ist ein guter Teil des Grundes, warum es die Erweiterung gibt.

Was nicht erfasst wird

Flex und Grid, und nichts weiter. Abstand, der von einem Margin an einem Inline-Block, von absoluter Positionierung oder von erzeugtem Inhalt in einem ::before kommt, ist im Markup weiterhin unsichtbar und kommt weiterhin zusammengeschoben heraus.

Auch eine Markierung bleibt unberührt: Ein markierter Bereich wird direkt aus dem Dokument geklont, eine als Markierung gehobene Kennzahlenzeile kann also nach wie vor als 39words ankommen. Drücken Sie den Knopf, ohne etwas zu markieren, dann geht es über den Weg für die ganze Seite — und die Leerzeichen sind da.

Weiter: eine Webseite als Markdown sichern und Turndown und die HTML-nach-Markdown-Bibliotheken.