Vorformatierter Text im HTML
HTML-Webseite und der vorformatierter Text
Gelegentlich ist es hilfreich, Text, der in einem HTML-Dokument notiert wurde, exakt so im Browser ausgeben zu lassen, z. B. bei Listings, Verzeichnislisten, der Darstellung von Messwerten und Ähnlichem. In einem solchen Fall sollten Sie das <pre>-Element (pre = engl. preformatted, dt. vorformatiert) verwenden. Text, der im Gültigkeitsbereich eines <pre>-Elements steht, wird außerdem mit einer nichtproportionalen Schrift dargestellt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Beispiel für vorformatierten Text im <pre>-Element -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>Vorformatierter Text im HTML</title>
</head>
<body>
<pre>
Dieser Text ist vorformatiert
Alle Zeilenumbrüche und Leerzeichen werden
exakt so, wie im HTML-Dokument
eingegeben, dargestellt.
</pre>
</body>
</html>
Die Ausrichtung vorformatierten Textes lässt sich nicht mit dem <align>-Attribut oder einer anderen Methode beeinflussen, wohl aber die optische Darstellung (Farbe, Größe, Schriftart) mittels des <font>-Elements (das aber als veraltet gilt) oder CSS.
Wenn Sie jedoch wollen, dass bei der Ausgabe des Textes alle Formatierungen mittels der Leerzeichen korrekt beibehalten werden, sollten Sie immer eine Schriftart wie Courier wählen, bei der alle Buchstaben gleich breit sind (diktengleiche Schrift) und nicht etwa Arial oder Times New Roman.
Abbildung zeigt einen Vorformatierten Text im Safari.
Die meiste Zeit wird der Text in einer HTML-Datei formatiert, ausgehend von den HTML-Kennungen, die verwendet wurden, um den Text auszuzeichnen. Wie ich schon bemerkt habe, werden alle zusätzlichen Leerräume (white space: Leerzeichen, Tabulatoren, Zeilenumbrüche), die Sie in den Text schreiben, vom Browser ignoriert.
Die einzige Ausnahme von dieser Regel ist die
<pre>-Kennung für vorformatierten (preformated) Text.
Jeder Leerraum (white space), den Sie im Text schreiben, der von <pre> und </pre> eingeschlossen ist, bleibt in der endgültigen Ausgabe enthalten, sodass Sie den Text auf eben diese Weise formatieren können, wie Sie ihn aussehen lassen möchten, und er wird auch in genau dieser Formatierung dargestellt.
Der Kniff dabei ist, dass vorformatierter Text auch mit fester Schriftweite (monospaced), wie es auch bei Courier der Fall ist, dargestellt wird. Vorformatierter Text eignet sich ausgezeichnet für Code-Beispiele, in denen Sie die Zeilen passend einrücken und formatieren wollen. Da es Ihnen auch möglich ist, den Text durch eingefügte Leerzeichen auszurichten, können Sie die <pre>-Kennung auch für Tabellen verwenden, obwohl der Umstand, dass diese Tabellen mit einer festen Schrift (monospaced) dargestellt werden, sie nicht eben ideal erscheinen lassen. Hier ist ein Beispiel für eine mit <pre> erzeugte Tabelle.
Diameter Distance Time to Time to
(miles) from Sun Orbit Rotate
(millions
of miles)
-----------------------------------------------------------------
Mercury 3100 36 88 days 59 days
Venus 7700 67 225 days 244 days
Earth 7920 93 365 days 24 hrs
Mars 4200 141 687 days 24 hrs 24 mins
Jupiter 88640 483 11.9 years 9 hrs 50 mins
Saturn 74500 886 29.5 years 10 hrs 39 mins
Uranus 32000 1782 84 years 23 hrs
Neptune 31000 2793 165 days 15 hrs 48 mins
Pluto 1500 3670 248 years 6 days 7 hrs
Wenn Sie Text für die <pre>-Kennung schreiben, können Sie Verknüpfungen und verschiedene Schriftarten verwenden, aber keine Element-Kennungen wie für Überschriften oder Absätze. Umbrechen Sie Ihre Zeilen mit einem "Return", und versuchen Sie, Ihre Zeilen 60 Zeichen oder kürzer zu halten. (Manche Browser stellen nur eine begrenzte Anzahl von Zeichen pro Zeile dar, und da Browser vorformatierten Text nicht neu formatieren, um ihn in diesen Raum einzupassen, sollten Sie darauf achten, innerhalb dieser Grenzen zu bleiben, damit Ihre Leser die Ansicht nicht hinausverschieben müssen).
Passen Sie auf, wenn Sie Tabulator-Zeichen innerhalb des vorformatierten Textes benutzen.
Die verschiedenen Browser rücken für jedes Tabulatorzeichen eine unterschiedliche Anzahl von Leerzeichen weiter. Ein Browser rückt vielleicht vier Stellen für eine Tabulatormarke vor, während ein anderer acht weiterrückt. Wenn Ihr vorformatierter Text sich an einigen Stellen auf Tabulatormarken verlässt, sollten Sie diese vielleicht besser durch Leerzeichen ersetzen.
Das <pre>-Tag eignet sich auch hervorragend dafür, Dateien, die zuvor in einer reinen Textform vorlagen, wie etwa E-Mail oder "Usenet News", schnell und einfach nach HTML zu konvertieren. Umgeben Sie einfach den gesamten Inhalt der Nachricht mit der <pre>-Kennung, so erhalten Sie "fertigen" HTML-Code:
To: lemay@lne.com From: jokes@lne.com Subject: Tales of the Move From Hell, pt. 1 Date: Fri, 26 Aug 1994 14:13:38 +0800 I spent the day on the phone today with the entire household services division of northern California, turning off services, turning on services, transferring services and other such fun things you have to do when you move. It used to be you just called these people and got put on hold for and interminable amount of time, maybe with some nice music, an then you got a customer representative who was surly and hard of hearing, but with some work you could actually get your phone turned off.
Das folgende Beispiel zeigt eine einfache ASCII-Kuh und deren Darstellung:
( ) "Moo!" (00) \/-------\ || |\ || |* ||---W-|| || ||
