Rich Text

Was ist Rich-Text?

Rich-Text ist Text, der neben den Zeichen auch Formatierung enthält: Fett, Kursiv, Überschriften, Listen, Links, Farben und manchmal Bilder oder Tabellen. Reiner Text enthält nur Zeichen. Rich-Text braucht ein Format, um die Formatierung zu speichern, im Web meist HTML, in Textverarbeitungen das Rich Text Format (RTF). Editoren, in denen man ihn visuell schreibt, heißen Rich-Text-Editoren oder WYSIWYG-Editoren.

So funktioniert Rich-Text

Hinter der Symbolleiste speichert ein Rich-Text-Editor Ihre Formatierung als Markup oder als strukturiertes Dokument. Im Web kann der Browser ein Element mit dem Attribut contenteditable editierbar machen. Laut MDN behält der Wert true die Formatierung beim Einfügen, plaintext-only entfernt sie. Die meisten produktiven Editoren bauen darauf ein eigenes Dokumentmodell auf und exportieren daraus HTML.

Als HTML gespeichert wird der Text Teil der Seitenstruktur, die Browser als DOM bereitstellen. In einem CMS ist ein Rich-Text-Feld oft ein Inhaltsblock unter mehreren.

Beispiel

Ein Blog-Editor bietet Fett, ein Überschriftenmenü, einen Link-Button und Aufzählungen. Eine Autorin schreibt eine Überschrift, einen fett gesetzten Satz und eine Liste. Der Editor speichert die Elemente <h2>, <strong> und <ul><li>. Ein Screenreader kann Überschrift und Liste dann korrekt ansagen. Hätte sie eine Zeile stattdessen mit Schrifteinstellungen groß und fett gemacht, sähe sie gleich aus, hätte aber keine Überschriftenbedeutung.

Häufige Fehler

• Falsche Überschriften: große fette Schrift statt einer echten Überschriftenebene. Screenreader-Nutzer verlieren dadurch die Navigation.
• Einfügen aus Word oder dem Web: bringt Inline-Styles und überflüssiges Markup mit. Als reinen Text einfügen oder das HTML beim Speichern bereinigen.
• Unbereinigtes HTML speichern: von Nutzern geschriebener Rich-Text muss serverseitig bereinigt werden, sonst kann er Skripte enthalten (Cross-Site-Scripting).
• Zu viele Stile: mehrere Schriften, Farben und Größen wirken uneinheitlich. Beschränken Sie die Symbolleiste auf das, was das Design-System erlaubt.
• Farbe oder Unterstreichung als einziges Signal: unterstrichener Text, der kein Link ist, verwirrt, und roter Text allein vermittelt keine Warnung.

Rich-Text, Barrierefreiheit und Tests

Formatierung sollte Bedeutung tragen, die assistive Technologien lesen können: echte Überschriften, echte Listen, aussagekräftige Linktexte und Alternativtexte für Bilder (siehe barrierefreie Bilder und WCAG). Prüfen Sie auch den Textkontrast, siehe barrierefreie Farbpaletten. Unser Vergleich der Tools für Barrierefreiheitstests zeigt Wege, gerenderte Inhalte zu prüfen, und das Page Speed Monitoring verfolgt den Lighthouse-Accessibility-Score der Seiten, die Ihren Rich-Text anzeigen, sodass eine Template-Änderung, die Überschriftenstruktur oder Kontrast beschädigt, leichter auffällt.

Häufige Fragen

Was ist der Unterschied zwischen Rich-Text und reinem Text?

Reiner Text enthält nur Zeichen. Rich-Text fügt Formatierung wie Fett, Überschriften, Listen und Links hinzu, gespeichert in einem Format wie HTML oder RTF.

Ist HTML Rich-Text?

HTML ist ein Auszeichnungsformat, das Rich-Text-Editoren häufig zum Speichern der Formatierung nutzen. Der Rich-Text ist das, was der Leser sieht. HTML ist die Schreibweise dahinter.

Ist Markdown Rich-Text?

Nicht für sich genommen. Markdown ist Klartext mit einfachen Zeichen, die ein Renderer in formatierte Ausgabe umwandelt, meist HTML.

Was ist ein WYSIWYG-Editor?

Ein WYSIWYG-Editor („What you see is what you get“) zeigt die Formatierung schon beim Tippen, statt Markup anzuzeigen. Rich-Text-Editoren sind meist WYSIWYG.

Ist es sicher, Rich-Text von Nutzern anzunehmen?

Nur wenn Sie ihn serverseitig bereinigen und nur eine feste Liste von Tags und Attributen erlauben. Vertrauen Sie nie dem HTML, das ein Browser-Editor sendet.