CSS, HTML und Javascript mit {stil}

CSS white-space • tab-size • Leerzeichen und Tabulator

CSS white-space und tab-size Tabulatoren (tab) und Leerzeichen oder aufeinander folgende Blank

Per Vorgabe ignorieren Browser aufeinander folgenden Leerzeichen und Zeilenumbrüche – den Weißraum oder Whitespace – im Quelltext von HTML-Seiten.

Mit der CSS-Eigenschaft white-space verhält sich der Text wie HTML pre. Leerzeichen und Zeilenumbrüche so wiedergeben, wie sie im Quelltext gesetzt sind.

Für ein gleichbleibendes Vergrößern oder Verkleinern des Raums zwischen aufeinander folgenden Wörtern / Zeichen gibt es CSS word-spacing und CSS letter-spacing vorgesehen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent leo quam, ultricies ut, ultricies interdum, blandit a, ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent leo quam, ultricies ut, ultricies interdum, blandit a, ante.

<p style="white-space: pre;">Lorem       ipsum     dolor sit amet, 
consectetur      adipiscing     elit.

Praesent   leo quam,    ultricies ut, 
ultricies interdum,  blandit a, ante.</p>

CSS white-space

Erblich: Ja

white-space
steuert den Weißraum innerhalb eines Elements.
Werte
normal | pre | nowrap | pre-wrap | pre-line | inherit
normal
ist die Standardeinstellung.
pre
verhält sich wie das HTML-Tag <pre>.
pre-wrap
verhindert, dass der Browser aufeinander folgende Leerzeichen ignoriert. Zeilen werden so umgebrochen, wie sie im Quelltext umgebrochen werden.
Anders als in pre-Tags läuft eine Textzeile mit dem CSS-Stil white-space: pre-wrap nicht über die Breite hinaus, die durch width festgelegt ist.
Bei generierten Inhalten werden Zeilen durch ein \A umgebrochen und Zeilen werden so umgebrochen, dass Boxen wie gewohnt gefüllt werden.
pre-line
lässt aufeinanderfolgende Leerzeichen wie gewohnt kollabieren, aber bei generierten Inhalten erzeugt \A einen Zeilenumbruch.
nowrap
lässt den Text auf einer Zeile laufen, bis der Text beendet ist oder ein HTML-Tag <br /> entdeckt wird. <br /> erzeugt einen Zeilenumbruch auf die nächste Zeile.

CSS Tabulatoren: tab-size

Textbearbeitungsprogrammen setzen mit Hilfe von Tabularoren Text in Spalten und ersparen dem Benutzer aufwändige Tabellen. In HTML und CSS waren Tabulatoren immer wieder vorgesehen und sofort wieder unter den Teppich gekehrt.

Per Vorgabe wird der Tabulator als einzelnes Leerzeichen umgesetzt, aber in HTML pre setzten die Browser ein Tab mit 8 Leerzeichen um. Erst CSS3 tab-size steuert die Anzeige von Tabs in HTML pre.

Per Vorgabe werden Tabulatoren also durch acht Leerzeichen gesetzt. Auswirkung hat das allerdings nur in HTML pre oder HTML-Elementen mit CSS white-space:pre.

.atab { tab-size:30;-moz-tab-size:30; -ms-tab-size:30}
…
<p class="atab">
Schulte-Deliz	Martina	1480
Gördeler	Heinrich	2750
Hinrichs	Frank	3289
</p>

Schulte-Deliz Martina 480 Gördeler Heinrich 2750 Hinrichs Frank 31289

CSS3 tab-size wird ohne Browser-Präfix von Webkit-Browsern (Chrome, Opera, Safari) umgesetzt, Firefox braucht noch den Browser-Präfix.

Internet Explorer 10/11 und selbst Microsoft Edge (Tabulator – Under Consideration) erkennen tab-size immer noch nicht. Wäre auch zu schön gewesen.