Vorformatierter Text im HTML5
Vorformatierten Text verwenden
Habe schon einen Artikel geschrieben fürs HTML: Vorformatierter Text im HTML
Normalerweise fassen die Browser alle zusätzlichen Absatzende- und Leerzeichen zusammen und nehmen den Zeilenumbruch passend zur Fenstergröße automatisch vor. Mit vorformatiertem Text können Sie die ursprünglichen Zeilenumbrüche und Leerzeichen erhalten und darstellen, die Sie in den Text eingefügt haben. Das ist ideal für Beispiele mit Computercode, kann aber auch für Text verwendet werden (z.B. bei ASCII-Kunst!).
Das pre-Element ist ideal für Text, der wichtige Leerzeichen und Zeilenumbrüche enthält wie der hier gezeigte CSS-Code. Beachten Sie ebenfalls, dass hier das code-Element vorkommt, um Code bzw. mit Code zusammenhängenden Text außerhalb von pre auszuzeichnen.
- Tippen Sie
<pre>. - Schreiben oder kopieren Sie den Text, den Sie so darstellen wollen, wie er ist, mit allen nötigen Absatzende- und Leerzeichen sowie Zeilenumbrüchen.
- Zeichnen Sie den Text nicht mit irgendwelchem HTML wie
p-Elementen aus – außer es handelt sich um Code. - Tippen Sie
</pre>.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<p>
Fügen Sie Folgendes in Ihr Stylesheet ein,
➝ wenn Sie einen gepunkteten Rahmen unterhalb ➝ des Elements <code>abbr</code> darstellen
➝ wollen, sobald dieses das Attribut <code>title ➝ </code> enthält.
</p>
<pre>
<code>
abbr[title] {
border-bottom: 1px dotted #000;
}
</code>
</pre>
</body>
</html>
Info zur Präsentation mit pre
Seien Sie sich dessen bewusst, dass Browser üblicherweise automatisch die Wörter des Inhalts in einem pre umbrechen. Falls das also zu breit wird, könnte sich das aufs Layout auswirken oder eine horizontale Scrollleiste erzwingen. Mit der folgenden CSS-Regel wird der Umbruch innerhalb von pre in vielen Browsern aktiviert, aber nicht im Internet Explorer 7 und früher.
pre {
white-space: pre-wrap;
}
In diesem Zusammenhang möchte ich anmerken, dass ich von der CSS-Deklaration whitespace: pre; für ein Element wie div als Ersatz von pre abrate, weil der Leerraum für die Semantik des eingeschlossenen Inhalts (vor allem Code) wesentlich sein kann, und nur pre bewahrt ihn immer. (Und wenn der User in seinem Browser das CSS deaktiviert hat, geht die Formatierung verloren.)
Vorformatierter Text wird normalerweise mit einem nichtproportionalen Font wie Courier oder Courier New dargestellt B. Sie können den Font auf Wunsch mit CSS ändern.
Wenn das, was Sie darstellen wollen (z.B. ein Codebeispiel in einem Tutorial) HTML-Elemente enthält, müssen Sie jedes < und > um den Elementnamen mit den entsprechenden Zeichenentitäten < bzw. > ersetzen. Anderenfalls wird der Browser womöglich diese Elemente darstellen. Achten Sie darauf, Ihre Seiten zu validieren, um zu sehen, ob Sie verkehrterweise HTML-Elemente in code verschachtelt haben.
Das
pre-Element ist keine Abkürzung, um sich das Auszeichnen des Inhalts mit passender Semantik und die Formatierung der Präsentation mit CSS zu ersparen.
Wenn Sie beispielsweise einen Nachrichten-Artikel posten wollen, den Sie mit einer Textverarbeitung geschrieben haben, sollten Sie den nicht einfach deswegen, weil die Abstände Ihnen da so gefallen, mit Copy & Paste in ein pre einfügen. Stattdessen sollten Sie Ihren Inhalt (und andere relevante Textelemente) in p einfassen und etwas CSS schreiben, um das Layout wie gewünscht zu steuern.
pre wird wie ein Absatz standardmäßig immer in einer neuen Zeile dargestellt.
Die Eigenschaft von Web-Browsern, Leerraum (Whitespace) in HTML-Quelltexten zu einem einzigen Leerzeichen zusammenzufassen, ist nicht in allen Fällen wünschenswert.
Bei Programmlistings ist es beispielsweise sinnvoll, wenn alle Zeilen mit allen Einrückungen so wiedergegeben werden wie im Editor eingegeben. Auch für viele andere Anwendungsfälle, beispielsweise für ASCII-Art oder zur Wiedergabe von Programmausgaben auf Kommandozeilenebene, sind solche präformatierten Bereiche nützlich.
Beispiel
<pre>
<code>
function f2c(f) { // Fahrenheit -> Celsius
c = (f – 32) * 5 / 9;
c = parseInt(c * 10) / 10;
return(c);
}
function c2f(c) { // Celsius -> Fahrenheit
f = ((c * 9 ) / 5 ) + 32;
f = parseInt(f * 10) / 10;
return(f);
}
</code>
</pre>
Info
Ein Bereich für präformatierten Text wird durch <pre> ... </pre> markiert (pre = preformatted = vorformatiert). Web-Browser stellen alle darin enthaltenen Inhalte, inklusive des Leerraums, wie eingegeben dar. Zur Darstellung wird bei grafischen Browsern üblicherweise eine Monospace-Schrift (Courier oder ähnliche) verwendet, da solche Schriftarten besonders bei Code-Listings für besser lesbare Ausgaben sorgen.
Zwischen
<pre>und</pre>können Sie Text und andere HTML-Elemente notieren.
Die HTML5-Spezifikation empfiehlt, den Inhalt durch geeignete Elemente zur Textauszeichnung zu präzisieren. So wird der Inhalt des pre-Elements im obigen Beispiel zusätzlich in ein code-Element eingeschlossen. Dieses Element signalisiert, dass es sich beim Inhalt um ein Code-Listing handelt. Andere präzisierende Elemente dieser Art sind beispielsweise kbd (für die Darstellung von Tastatureingaben) oder samp für die Darstellung von beispielhaften Programmausgaben.
Info
Mit CSS bzw. CSS-Eigenschaften können Sie auch proportionale Schriftarten für pre Bereiche erzwingen. Auch CSS-Eigenschaften wie Rahmen, Abstände oder Hintergrundfarben sind geeignet, um pre-Bereiche optisch zu gestalten.