CSS, HTML und Javascript mit {stil}

HTML pre • Formatierter Text

HTML pre – meist für Code oder Markup

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

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).

HTML 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 werden:

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

pre und spitze Klammern

Für öffnende und schließende spitze Klammern 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. Üblicherweise stehen

  • &lt; für die öffnende spitze Klammer,
  • &gt; für die schließende spitze Klammer,
  • &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 & müssen "encodiert" werden.&lt;/p&gt;
&lt;/body&gt;
<body>
   <h2>So sieht HTML aus</h2>
   <p>Spitze Klammern und & 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).

Wenn pre-Tags im Editor vom CMS – z.B. von WordPress oder Dupal – eingesetzt werden, benutzt man am besten einen Online-Formatierer wie Freeformatter.

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.

pre für Computer-Code

Das code-Tag hingegen darf innerhalb von pre-Elementen stehen. code ist ein Inline-Tag, das nicht zu einem Zeilenumbruch führt. Es wird benutzt, wenn ein Begriff oder kurzer Text innerhalb des Fließtextes als Computertext hervorgehoben werden soll.

code-Tags 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 pre 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.

white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;

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

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 Blocks gesetzt werden.

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;-moz-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:	
	}
}

Firefox braucht noch den Browser-Präfix, Webkit-Browser gehorchen dem CSS tab-size auch ohne Browser-Präfix, IE? will nicht.