<pre>: Das vorformatierte Textelement

Probieren Sie es aus

<pre>
             S
             A
            LUT
             M
            O N
            D  E
            DONT
          JE SUIS
          LA  LAN
          G U E  É
         L O Q U E N
        TE      QUESA
       B  O  U  C  H  E
      O        P A R I S
     T I R E   ET   TIRERA
    T O U             JOURS
   AUX                  A  L
 LEM                      ANDS   - Apollinaire
</pre>

pre {
  font-size: 0.7rem;
  margin: 0;
}

Attribute

Dieses Element enthält nur die globalen Attribute.

width Veraltet Nicht standardisiert

Enthält die bevorzugte Anzahl von Zeichen, die eine Zeile haben sollte. Obwohl technisch immer noch implementiert, hat dieses Attribut keine visuelle Wirkung; um solch einen Effekt zu erzielen, verwenden Sie stattdessen CSS width.

wrap Nicht standardisiert Veraltet

Ist ein Hinweis, der angibt, wie der Überlauf erfolgen muss. In modernen Browsern wird dieser Hinweis ignoriert und es resultiert keine visuelle Wirkung; um solch einen Effekt zu erzielen, verwenden Sie stattdessen CSS white-space.

Barrierefreiheit

Es ist wichtig, eine alternative Beschreibung für Bilder oder Diagramme bereitzustellen, die mit vorformatiertem Text erstellt wurden. Die alternative Beschreibung sollte den Inhalt des Bildes oder Diagramms klar und prägnant beschreiben.

Menschen mit Sehbehinderungen, die mit Hilfe von unterstützender Technologie wie einem Screenreader browsen, können möglicherweise nicht verstehen, was die vorformatierten Textzeichen darstellen, wenn sie in Reihenfolge vorgelesen werden.

Eine Kombination der <figure>- und <figcaption>-Elemente, ergänzt durch das ARIA role und aria-label Attribute am pre-Element, erlauben es, das vorformatierte ASCII-Kunstwerk als Bild mit alternativem Text anzukündigen, wobei das figcaption als Bildunterschrift dient.

Beispiel

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  </figcaption>
</figure>

• MDN Verständnis von WCAG, Richtlinie 1.1 Erklärungen
• H86: Bereitstellung von Textalternativen für ASCII-Art, Emoticons und Leetspeak | W3C Techniken für WCAG 2.0

Beispiele

Einfaches Beispiel

HTML

<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

Ergebnis

Escaping von mehrdeutigen Zeichen

Angenommen, Sie möchten HTML-Code in einem <pre>-Element demonstrieren. Die Zeichenfolgen, die gültige HTML-Tags definieren (beginnend mit < und endend mit >), werden nicht angezeigt. Um die Tag-Zeichen als Text anzuzeigen, müssen Sie zumindest das <-Zeichen mit seiner Zeichenreferenz escapen, sodass die Sequenzen keine gültigen Tags mehr definieren.

In Wirklichkeit behandelt der HTML-Parser die meisten Zeichen als normalen Text, es sei denn, sie stehen in bestimmten Kontexten. Zum Beispiel ist < code in Ordnung, aber <code würde falsch interpretiert; &am; ist in Ordnung, aber & ist es nicht. Es ist jedoch eine gute Praxis, alle mehrdeutigen Zeichen zu escapen, um Verwirrung zu vermeiden, insbesondere wenn Sie programmgesteuert HTML generieren und den <pre>-Inhalt injizieren. In diesem Fall hier eine gute Faustregel, wie man Zeichen escapen sollte:

1. Schreiben Sie zuerst den Inhalt so auf, wie Sie ihn im HTML-Dokument erscheinen lassen möchten.
2. Ersetzen Sie alle Et-Zeichen (&) durch &. Machen Sie diesen Schritt zuerst, damit neue &-Zeichen, die im nächsten Schritt generiert wurden, nicht erneut escapet werden.
3. Ersetzen Sie alle <-Zeichen durch <.

Dies sollte dazu führen, dass der Inhalt wie beabsichtigt angezeigt wird. Das Ersetzen anderer HTML-Syntaxzeichen ist optional (wie > zu >, " zu " und ' zu '), schadet jedoch nicht.

HTML

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS: white-space, word-break
• Zeichenreferenz
• Verwandtes Element: <code>, <samp>, <kbd>