Donnerstag, 28. Januar 2016

Tabulatoren in HTML ganz einfach

Mit einem einfachen Trick können in HTML die in Textverarbeitungsprogrammen beliebten Tabulatoren verwendet werden. Dabei kann die ganz normale Tabulatortaste auf der Tastatur verwendet werden.

Die Tabulatortaste (kurz „Tab“; Tastatur-Symbol: ) wird verwendet um Texte oder Zahlen sinnvoll fluchtend untereinander anzuordnen. Die Taste befindet sich auf Standard-Tastaturen links oben neben der Taste für den Buchstaben Q@ (mit dem "at" Zeichen) bei Windows und Linux. Auf einer Apple-Tastatur wird die Taste durch ein Symbol mit einem nach rechts gerichteten Pfeil und einem Endstrich () dargestellt.

Englisch: Tab Tab key (abbreviation of tabulator key or tabular key) on a keyboard is used to advance the cursor to the next tab stop.

Nun zum Wesentlichen!

Es wird der HTML <pre> Tag verwendet.

Der HTML <pre> Tag definiert vorformatierten Text.

Text in einem <pre> Element wird in einer einheitlichen Schrift/Font (meist Courier) mit fester Breite angezeigt und es werden innerhalb des Elements zwei Leerzeichen nebeneinander und Zeilenumbrüche bewahrt.
Im Editor mit markiertem Tab für copy&paste
Ansicht im Browser mit Markierung eines Tabs.
Es kann sein, dass im HTML Quellcode weniger oder mehr Tabs benötigt werden, damit es im Ergebnis im Browser wie gewünscht aussieht. Es kann allerdings nicht allen Browsern gleich recht gemacht werden. In manchen Browsern, wie dem IE, kann die Anzeige verrutscht sein, während sie in Firefox, Opera und Chrome perfekt aussieht.

Tabulatoren mit dem <pre>-Tag funktionieren nicht in den meisten WYSIWYG-Editoren, wie bei Wordpress und Blogger. Und dort auch nicht im HTML-Modus. Die Editoren bereinigen den Quellcode und dabei auch die Tabulatoren innerhalb des <pre>-Tags. Bei Blogger bleiben die Tabs zumindest in der Vorschau erhalten. Nach dem Veröffentlichen sind sie allerdings weg.

Wenn das mit dem <pre>-Tag nicht funktioniert, dann alles zusammen zusätzlich in einen <object>-Tag. Und wenn das immer noch nicht funktioniert, dann kann der Text zusätzlich noch in einen <code>-Tag.

Der <pre>-Tag hat wie eine <div> Box schon einen Zeilenumbruch vor und nach ihm inclusive.

Der <pre>-Tag kann auch in eine white-space Style-Anweisung in einen <p>-Tag geschrieben werden.

<p style="white-space: pre;"> </p>

Mit dieser Funktion werden alle Tabulatoren innerhalb dieses <p>-Tags in HTML so angezeigt, wie in einem Texteditor.
Aber auch das funktioniert bei Google Blogger nicht, da bei Google Blogger alle Tabs beim Speichern in die Datenbank gesäubert werden.
Es gibt zwar eine HTML-Entitie für Tabulatoren ("&#09;" oder "&Tab;"), aber die Browser unterstützen diese nicht.