Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

HTML/Textstrukturierung/pre

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Element pre repräsentiert einen vorformatierten (engl.: preformatted) Textblock, in dem die Strukturen durch typographische Konventionen und nicht durch seinen Inhalt oder semantische Elemente gekennzeichnet ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Beispielsweise ist es für Programmlistings wichtig, dass sie in dicktengleicher Schrift dargestellt werden, und dass Whitespace wie Zeilenumbrüche und Einrückungen durch mehrere Leerzeichen oder Tabs so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

Allgemeines[Bearbeiten]

Präformatierter Text eignet sich in vielen Fällen zur Ausgabe von Debug-Meldungen beim Entwickeln mit serverseitigen Programmiersprachen wie PHP.

Beispiel ansehen …
<h1>„Hallo, Welt!“ in PHP</h1> <pre> <code class="language-php"> <?php echo "Hallo, Welt\n"; ?> </code> </pre>
<pre> leitet einen Textabschnitt mit präformatiertem Text ein. </pre> beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde. Das gilt insbesondere für Leerzeichen.

pre-Elemente werden häufig eingesetzt, um Quelltext darzustellen. In diesem Fall ist es semantisch korrekt, den Inhalt mit einem code-Element zu umfassen:<pre><code>...</code></pre>

Gestaltung[Bearbeiten]

Browser wenden in der Regel ein Standardformat auf das pre-Element an, insbesondere wird eine monospace-Schriftart verwendet. Verwenden Sie CSS, um vorformatierte Textblöcke nach Ihren Vorstellungen zu formatieren.

Beispiel ansehen …
pre {
  background-color: darkblue; 
  color: yellow; 
  font-family: Fixedsys,Courier,monospace; 
  padding: 10px;
}
Das pre-Element im Beispiel erhält einen blauen Hintergrund, gelbe Schriftfarbe, und als Schriftart wird "Fixedsys" gewünscht, oder, falls nicht verfügbar, eine Courier-Schrift. Damit der Text nicht so am Rand klebt, wird außerdem ein Innenabstand von 10 Pixeln definiert.

ASCII-Art[Bearbeiten]

Mit dem pre-Element ist es auch möglich ASCII-Art in seinen richtigen Proportionen darzustellen:

Beispiel ansehen …
<pre>
   .
   |
   |   
   |
   #         +------------------------------+
  (=)        |           ACHTUNG!           |
   H         |      PRÄFORMATIERTER TEXT!   |            =o=
   H         |                           __;                 ~^
   H         +------------TT-----------°            _               _ _  
   H                      ||    ________________   | |             | (_)   
   H                      ||    | SELF-Treffen >   | |__   ___ _ __| |_ _ __ 
   M       oÖo            ||    |°°°°°°°°°°°°°°°   | '_ \ / _ \ '__| | | '_ \ 
   M        |  ö          ||    |                  | |_) |  __/ |  | | | | | |  
  / \~"""~"""~"""~"""~"""~"""~"""~~"""~"""~"""~""""|_.__/ \___|_|  |_|_|_| |_|
</pre>
Das pre-Element enthält ein Bild, dass aus einzelnen Zeichen „gemalt“ wurde. Hierbei sind die einzelnen Positionen innerhalb des Rasters aus Zeilen und Spalten wichtig.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]