HTML pre • Formatierter Text

HTML pre Tag für die korrekte Anzeige von Computer-Code oder Markup

pre wird eingesetzt, wenn die typografische Formatierung des Textes eine Rolle spielt – in Gedichten, Transcript oder Mitschriften, am häufigsten sicher um Computer-Code, HTML-Quelltext, Javascript oder CSS anzuzeigen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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:

1. Sprecher: Zeilen werden umgebrochen. 2. Sprecher: Mehrere Leerzeichen nacheinander bleiben erhalten.

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.

  • &lt; für die öffnende spitze Klammer oder Kleiner-als-Zeichen,
  • &gt; für die schließende spitze Klammer oder Größer-als-Zeichen,
  • &amp; für das Ampersand (Kaufmanns-Und).
&lt;body&gt;
   &lt;h2&gt;So sieht HTML aus&lt;/h2&gt;
   &lt;p&gt;Spitze Klammern und &amp; (und-Zeichen) müssen "encodiert" werden.&lt;/p&gt;
&lt;/body&gt;
<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 &lt; und &gt; und dem kaufmännischen & in &amp; 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?
F. Schiller Die Räuber (abgehört zu werden, ist also nichts Neues)
<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>var</dfn> maxheight = <var>0</var>;

<dfn>for</dfn> (<dfn>var</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>

var maxheight = 0;

for (var 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.
F. Schiller Die Räuber

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.