pre Font und der Zeilenumbruch
Der Browser stellt den Text exakt so dar, wie er innerhalb des öffnenden und schließenden pre-Tags steht. Leerzeichen, Tabulatoren, Spalten und Zeilenumbrüche bleiben erhalten. Der Text wird in einer nicht-proportionalen Schrift (Monospace oder Festbreitenschrift) gerendert, bei der alle Zeichen dieselbe Breite haben (monospace, meist Courier).
pre ist ein Block-Tag – d.h. mit dem öffnenden <pre> beginnt eine neue Zeile.
+--- Tabulartoren | 1. Sprecher: Zeilen werden umgebrochen. ------ neue Zeile ------ 2. Sprecher: Mehrere Leerzeichen nacheinander bleiben erhalten. | Leerzeichen ---+
In einem div- oder p-Tag würden Tabulatoren, Leerzeichen und Zeilenumbruch verschluckt:
Das pre-Element kommt in erster Linie bei der Darstellung von HTML Markup und Tutorials / Tipps zur Programmierung zum Einsatz. Ohne Aufbereitung durch CSS rendern die Browser Text in pre-Elementen in Courier.
Während der Font für pre früher per Vorgabe einhellig Courier war, ist die Darstellung heute aufgemischt. Menlo, Roboto Mono und Consolas sind sich ähnlich und besser lesbar als Courier. Courier hingegen zeigt deutlicher, dass hier Computer-Code im Visier ist.
- Consolas unter Windows 10,
- Courier New unter älteren Windows-Versionen
- Courier unter Mac OS Mojave
- Menlo unter iOS
- Roboto Mono unter Android.
pre und spitze Klammern
Wenn HTML-Tags auf der Seite als HTML-Tags gezeigt werden sollen, müssen sie escaped (aufgelöst) werden, sonst würde der Browser sie wörtlich als HTML-Elemente des Dokuments nehmen.
Für öffnende und schließende spitze Klammern, Kleiner- und Größer-Zeichen und ebenso für das &-Zeichen (kaufmännisches Und oder ET-Zeichen) müssen HTML-Entities benutzt werden, damit der der Browser die Zeichen nicht für HTML-Tags hält.
- < für die öffnende spitze Klammer oder Kleiner-als-Zeichen,
- > für die schließende spitze Klammer oder Größer-als-Zeichen,
- & für das Ampersand (Kaufmanns-Und).
<body> <h2>So sieht HTML aus</h2> <p>Spitze Klammern und & (und-Zeichen) müssen "encodiert" werden.</p> </body>
<body> <h2>So sieht HTML aus</h2> <p>Spitze Klammern und & (und-Zeichen) müssen "encodiert" werden.</p> </body>
Bei der Umsetzung von spitzen Klammern in < und > und dem kaufmännischen & in & helfen Programm-Editoren wie BBEdit (Markup / Utilities / Translate Text to HTML). Bei dynamisch generierten Zeichenfolgen springt Javascript encode ein.
Die Editoren von Content Management Systemen wie der Gutenberg-Editor für WordPress oder Dupal ersetzen Sonderzeichen automatisch im Block-Typ "Vorformatiert".
pre für Texte und Tabellen
Die häufigste Anwendung des pre-Tags ist die Darstellung von Computercode oder HTML-Markup auf Webseiten. Für die Ausgabe mehrzeiliger Einträge mit Leerzeichen ist HTML pre u.U. eine effiziente Alternative zum table-Tag (dabei die schmalen Monitore nicht vergessen!).
Roller. Wißt ihr auch, daß man uns auskundschaftet? Grimm. Daß wir keinen Augenblick sicher sind, aufgehoben zu werden?
<pre>
Roller. Wißt ihr auch, daß man uns
auskundschaftet?
Grimm. Daß wir keinen Augenblick
sicher sind, aufgehoben
zu werden?
</pre>
Wellenlänge +0 nm +1 nm
-------------------------------------
380 nm 0.0002000 0.0002280
385 nm 0.0003960 0.0004550
390 nm 0.0008000 0.0009160
<pre>
Wellenlänge +0 nm +1 nm
--------------------------------------
380 nm 0.0002000 0.0002280
385 nm 0.0003960 0.0004550
390 nm 0.0008000 0.0009160
</pre>
img, object, small, sub oder sup sollten nicht innerhalb des öffnenden und schließenden <pre>-Tags stehen. Bilder und Objekte können also nicht innerhalb von pre-Tags eingesetzt werden.
Aber für Ascii Art ist das HTML pre-Element genau das Richtige.
XXXddddXX
XXX XXXX
X0X lXX XX0XXXX
XXl lX XXXXXXXXXXXXXXdX
XNX XXN XXXddX XXdd0
XXXdddd;XN XlX XNXXddX XXdXX
NXdXdXXNNXXN NXXdXXXXXXXXXXXXXX XlXN
NXlX Xl0 XXXXlX0000000XXXNX XX0XXlX
X0Xl NXl0X XXX:XX NlX X0
XXX Nl X0X XXXXXN XX XX dX
XXX NdX XdXXXXXlXX XX XX X
XXX NXX XXNX0XXdN X0XXX:XdX
0XX XX X XXXXX XXXXXXX00XXdXXX
Nll XXXX X XXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXX XXX XX lXN NXdddXXX
XXX XXl XX XX XdXX
NlX XdX XXdN dXX XXl
NlX XXN XXX dXX Xl XXXXXX
XXl XXX XXX XX0 Xl 0ld X0X
XXX XXX XXX XXX XlX XXXXXlXN XdN
NXl XXXl dXXX dXX XXl XlX l dX XXl
XXl XXdX0X lXN NXldX XlXX X0 XXXXXN
NXX lXX X0XddXXXXXXXXXXXX0X XlX dXX
XXdl XlXX XX0XXXXXXXXXXdXdX XX XXXdN
XXdXd XXXN XXXl0 XlXX XXXd
XXdX N0dXdX0XXX XXXXXXXXXXXXXXX XlXX X0XX
XXX N0Xdddd ddXXXXXXN dXX NXlX
XXXldX0000000000XXXXXXX0XXXdXdXXXX XdX XXX
NXX XXXXXXXXXXXXXXXXXXXX XXXXX XlXN X0l
XXX NXddXXX XlXX NXl
XX000XXXX XXXddX0dXX Xd
XXXXXXlXX N0dXXdXX X0X
XlXXXXdlXX XX0XddXX
lXXXXl XX XXXdX
XdX0d XX0 NX0X XNXXd
dXl0XXXXdX XlXX NXdd
XXlXXlXXXX XlXX XXX
XXXXdXXXdXdX lXN NXl
dXX0XXXXXXXNXl XdX XXl
XNNXXX XdX dXX NXX
XN XXl XXl lXXX Xl
lX 0lX XX X XXX 0l
XX NXXXl X N XXdX XXl
lX XXlXlX0 X dXXX lXdX NXl
dN XlXXlXXX lXX0XlX XdX0 NXXd
lX XdX0XdX Xd X XXX XXXXXXX N0XXdd0
lX XlXXl0 XNXXX 0XNX XXX N0XXX
lXX XlXXXXN XNXXXXXXX XlX Xl
NNNNNNXXXXXX0XldN XdXX0lX XXX XdXN XX
XXXXXXXXXXXXXXXXXXXXXXXN XlXXdXX XXlX XlX XddXXXXXXXXXXXd
XXXXXXX XlXXXlXX XXXXXXXdlXX NXlXXXXXXXXXd0XXXXXXXX0lXN
XXXXXXXXXXXXXXXXXXXXXXXXlXNXXlX XXXdXX0XXXXXX N0X00XXXNN Xl0
XX0 XXXXXXXXXXXX XlXX XlXXN XdXX N0XdX
XXXXXXXXXXXXXXXXXXXNNNNXXX X0XdX NXlXXXXXXX XXXXXXXXXXXN
NXXXXXXXXXXXXXXXXXXXXXXXXXXXXXdXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXdlXXXXXNX
XXNNX00XX XXNNNXXXXXXX000XXXXXXXXXXXXXXXXXX
pre für Computer-Code und HTML Tags
HTML code hingegen darf innerhalb von pre-Elementen stehen. code ist ein Inline-Element, das nicht zu einem Zeilenumbruch führt. Es wird benutzt, wenn ein Begriff oder kurzer Text innerhalb des Fließtextes – z.B. in HTML p als Computertext hervorgehoben werden soll.
code-Elemente innerhalb von pre-Elementen verleihen dem vorformatierten Text mehr Semantik – nämlich: Hier steht Computer-Code und nicht einfach formatierter Text.
<code>
<dfn>const</dfn> maxheight = <var>0</var>;
<dfn>for</dfn> (<dfn>let</dfn> i = <var>0</var>; i < ul.length; i++) {
<dfn>if</dfn> (ul[i].clientHeight > maxheight) {
maxheight = ul[i].clientHeight;
}
ul[i].classList.add('<var>acco</var>');
}
</code>
const maxheight = 0;
for (let i = 0; i < ul.length; i++) {
if (ul[i].clientHeight > maxheight) {
maxheight = ul[i].clientHeight;
}
ul[i].classList.add('acco');
}
CSS: Zeilenumbruch in pre-Tags
Zwar ist es schön, dass HTML Text exakt so anzeigt, wie der Text im pre-Tag gesetzt ist, aber auf der anderen Seite gibt es keinen automatischen Zeilenumbruch, wenn der Text länger als der Platz im Layout ist.
Hier sitzt ein Hinterhalt. Da Text in pre nur umbricht, wenn der Text im Markup umbricht, läuft breit gesetzter Text aus dem Ruder. Auf dem Desktop-Monitor sieht alles vielleicht noch nett aus, auf dem Tablett oder Handy läuft der Text aus dem Fenster.
Schufterle. Drei und achtzig, sagt man. Der Thurm allein hat ihrer sechzig zu Staub zerschmettert. Räuber Moor Roller, du bist theuer bezahlt.
Erst durch die Kombination von CSS white-space und word-wrap gibt es dann auch innerhalb von pre-Tags einen automatischen Zeilenumbruch.
<style>
pre {
white-space: pre-wrap;
word-wrap: break-word; // für die dahingeschiedenen IE-Versionen
}
</style>
Wenn pre Computer-Code oder HTML Markup vorführt, ist der automatische Zeilenumbruch mit CSS word-wrap keine optimale Lösung. Alternativ läßt man den Text in seiner Box mit CSS scrollen.
pre { overflow: scroll; }
pre links halten – Einrücken
Wird das pre-Tag wie in strukturiertem HTML-Markup üblich eingerückt, rückt die Anzeige des Inhalts ebenfalls ein. Der Browser rendert alle Leerzeichen bzw. Tabulatoren vor dem Text.
<script>
alert("Hallo Welt!");
document.querySelector("h1").setAttribute("style", "color:green");
</script>
Das pre-Element muss im Markup immer an den linken Rand des Markups gesetzt werden. Wer gerne schön einrückt, muss bei pre nachgeben.
pre Tabulatoren
Tabulatoren in pre-Tags werden von den Browsern per Vorgabe in 8 Leerzeichen umgesetzt. Das ist ein riesiger Abstand. Code-Editoren setzen Tabs meist auf 4 Zeichen.
CSS tab-size grenzt die langen Abstände ein:
pre { tab-size:4 }
…
function refresh() {
$('#iw').text(window.innerWidth);
$('#is').text(window.screen.width);
switch (window.orientation) {
case -90:
case 90:
$('#or').text('90');
break;
case 180:
case -180:
$('#or').text('-180');
document.location.reload();
break;
default:
}
}
IE11 macht nicht mit.
