Probleme mit WYSIWYG-Editoren erklärt
Ich werde immer wieder gefragt, was ich denn an WYSIWYG-Editoren auszusetzen hätte. Nur wie erklärt man das möglichst schnell, kompakt und verständlich? Naja.... WYSIWYG-Editoren sind einfach nicht perfekt und das hat tiefgründige Probleme.
Aber hier einmal ganz von vorne...
WYSIWYG-Editoren allgemein
Was sind WYSIWYG-Editoren
WYSIWYG steht für What You See Is What You Get ("Was du siehst, bekommst du auch") und bezeichnet normalerweise ein Programm zur Erstellung von Dokumenten in der gleichen Ansicht, wie auch später die Ausgabe erfolgt. Der bekannteste WYSIWYG-Editor ist denke ich Word mit dem man Textdokumente erstellt, die im ausgedruckten Zustand gleich aussehen, wie auf dem Bildschirm.
Warum stimmt "What you get" nicht?
Jeder, der schon einmal mit Leuten zusammen gearbeitet hat, die ein anderes Betriebssystem verwenden und versucht hat seine Dokumente mit diesen auszutauschen wird festgestellt haben, dass die das Dokument ganz anders angezeigt bekommen. Das wird dann schlichtweg einfach als Inkompatibilität abgetan. Aber warum sind diese Dokumente inkompatibel?
Hinter einem Dokument steckt meistens eine Auszeichnungssprache, die die Formatierung und das Aussehen des Dokumentes angibt. Verschiedene Programme interpretieren die Auszeichnungssprache oder auch nur Teile davon anders und zeigen das Dokument dann anders an.
WYSIWYG im Internet
Besonders problematisch ist der Einsatz von WYSIWYG-Editoren beim Erstellen von Webseiten. Hier wird kein fertiges Dokument wie ein "Bild" ausgetauscht (wie z.B. zwischen Word und dem Drucker), sondern der Quellcode selbst. Dieser muss so geschrieben sein, dass er von einer Vielzahl von verschiedenen Browsern gleich interpretiert und angezeigt werden muss. Bevor man aber versteht, weshalb WYSIWYG-Editoren damit Probleme haben, muss man verstehen, wie die Auszeichnungssprache funktioniert.
HTML
HTML steht für Hypertext Markup Language und stellt die Lingua Franca des Internets dar. Die Syntax ist hierbei sehr einfach gehalten. So genannte "Tags" werden zur Auszeichnung von einzelnen Elementen verwendet. Diese Tags werden durch dreieckige Klammern eingeschlossen. Ein Absatz (paragraph) wird durch den p-Tag gekennzeichnet, ein Zeilenumbruch (break) mit dem br-Tag:
<p>Hier steht Text in einem Absatz mit einem <br /> Zeilenumbruch</p>
Ein Tag kann auch bestimmte Attribute beinhalten, wie Klasse (class), Identifier (id), Ausrichtung (align), Quelle (src).
<p class="Klasse" id="Identifier">Hier steht Text und ein Bild: <img src="quelle zum bild" alt="Text zum Bild" />.</p>
Die Formatierung des Dokumentes wird durch HTML gegeben, welches vom Browser interpretiert wird. Die Attribute eines jeden Tags geben weitere Informationen zur Formatierung an den Browser.
CSS
CSS steht für Cascading Style Sheets und ist eine Formatvorlage für z.B. HTML-Dokumente. Hier kann das Aussehen der kompletten Webseite, einer Klasse von Elemente oder einzelnen Elementen festgelegt werden. Anstatt die Formatierung für jedes Element einzeln in den Attributen festzulegen, kann die Formatierung zentral in einer CSS-Datei festgelegt werden. So kann ein einheitliches Aussehen für alle Seiten zentral in einer Datei festgelegt werden.
HTML wird zentral in einem Stylesheet formatiert. Hierbei wird auf alle Elemente (z.B. alle Absätze), Klassen (z.B. alle Einleitungstexte) oder ids (z.B. Einleitungstext 3) zurückgegriffen
Javascript / DHTML
Javascript ist eine Scriptsprache mit der unter anderem die Manipulierung von einzelnen HTML-Elementen möglich ist. So kann z.B. der Inhalt eines HTML-Elements verändert werden oder der Style (also das Aussehen) eines HTML-Elements angepasst werden. Daher wird diese Technik auch Dynamisches HTML genannt. Diese Technik wird z.B. von WYSIWYG-Editoren im Internet verwendet. Wählt man einen Textteil aus und drückt den Button für fetten Text, so werden die HTML-Tags hinzugefügt
<!-- vorher --> <p>Hier kommt der ausgewählte Text.</p> <!-- nacher --> <p>Hier kommt der <strong>ausgewählte Text</strong></p>
Mit Javascript kann man HTML-Elemente und Styles z.B. auf Usereingaben hin manipulieren.
Probleme mit WYSIWYG-Editoren im Internet
Problematisch beim Einsatz von WYSIWYG-Editoren sind oft die Editoren selbst, da sie keinen validen Quelltext schreiben. Aber auch bei sehr guten WYSIWYG-Editoren kann das Userverhalten selbst zu Problemen führen. Da der Anwender beim Einsatz eines WYSIWYG-Editors nicht sieht, was im Hintergrund passiert gibt er Anweisungen, die der Editor umsetzt, die aber in sich widersprüchlich sind.
Individuelle Formate
Anstatt den Vorteil von zentralen Style-Sheets zu nutzen ordnen die meisten WYSIWYG-Editoren jedem Element einen eigenen Style zu. Im Schlimmsten Fall wird jedes Wort extra formatiert.
<!-- ausreichend formatierter HTML-Code --> <p class="text">Wort 1, Wort 2, Wort 3</p> <!-- automatisch erstellter HTML-Code --> <p align="left" class="text" id="text1"><font face="Arial" size="10pt" color="black" class="wort" id="wort_1">Wort 1,</font> <font face="Arial" size="10pt" color="black" class="wort" id="wort_2">Wort 2</font>, <font face="Arial" size="10pt" color="black" class="wort" id="wort_3">Wort 3</font></p>
Dies sorgt dafür, dass bei einer Anpassung der Webseite jeder Text extra bearbeitet werden muss. Außerdem ist der Quellcode übermäßig aufgebläht, was zur Folge hat, dass die Webseite viel mehr Speicherplatz benötigt, als eigentlich nötig. Außerdem haben automatisierte Programme Probleme aus diesem unsauberen Quelltext die relevanten Inhalte herauszulesen, bzw. den Text richtig dazustellen.
HTML anstatt CSS
Anstatt die Formatierung z.B. aller Einleitungstexte über die CSS-Klasse zentral zu regeln, wird von Hand der Einleitungstext jedes Textes mit dem Element für fetten Text eingeschlossen
Zeilenumbrüche anstatt Absätze
Anstatt einzelne Absätze auch als einzelne Absätze zu gliedern, werden einfach viele Zeilenumbrüche dazwischen gesetzt.
Listen
Anstatt die HTML-Elemente für Listen zu verwenden, wird das ganze mit Steuerzeichen und Zeilenumbrüchen geregelt (sieht ja scheinbar gleich aus).
Formatierung anstatt Elemente
Anstatt eine Überschrift als Überschrift auszuzeichnen, wird der Text einfach größer gemacht. Das sieht dann wie eine Überschrift aus, ist aber keine Überschrift.
Was hat das für Konsequenzen? Anstatt die Formatierung von Elementen wie z.B. die Überschriften erster Ordnung zentral ändern zu können muss jedes Element einzeln im Text angepasst werden. Die Elemente werden nicht als solche erkannt und von automatischen Programmen wie z.B. Screenreadern für Blinde nicht richtig ausgegeben. Auch Programme, die aus allen Überschriften eines Textes ein Inhaltsverzeichnis erstellen, oder nach jedem Absatz ein bestimmtes Bild einfügen, funktionieren nicht mehr.
Code erklären
Verwendet man Codebeispiele in seinem Text, so muss man manche WYSIWYG-Editoren geradezu überreden diesen auch anzunehmen. Im Schlimmsten Fall aber bringt man den Editor ganz durcheinander und er wandelt die Codebeispiele im Text in richtigen HTML-Code um und den HTML-Code, der den folgenden Text formatiert komplett in Codebeispiele, was den Text unbrauchbar macht.
Inline-Styles
Beim Einsatz von so genannten CMS ist die Trennung von Text und Design sehr wichtig. Der Text wird hierbei in einer Datenbank abgespeichert und von einem serverseitigen Script ausgelesen und in ein Template eingebaut. Mit Hilfe von WYSIWYG-Editoren ist es auch für den unbedarften User möglich mit Hilfe von Inline-Styles den Text individuell zu formatieren. Dies hat dann zur Folge, dass sich der Text vom Template abhebt und nicht mehr in das Design der Seite passt.
Formatierung des Codes
Schreibt ein erfahrener Webmaster seinen HTML-Code, so formatiert er ihn so, dass er von Menschen gut zu lesen ist. Er ist dann aber nicht nur für Menschen, sondern auch für automatische Programme gut zu lesen.
<p>Hier kommt eine Liste</p> <ul> <li>erstes-Element</li> <li>zweites-Element</li> <li>drittes-Element</li> </ul>
Manche WYSIWYG-Editoren schreiben aber sämtlichen Code in eine einzige Zeile:
<p>Hier kommt eine Liste</p><ul><li>erstes Element</li><li>zweites Element</li><li>drittes Element</li></ul>
Je nach Länge des Textes ist diese Zeile dann mehrere tausend Zeichen lang. Da sehr viele automatische Programme den Text Zeile für Zeile abarbeiten kann das zu Laufzeitproblemen führen. Außerdem freut sich jeder Profi, wenn er einen vom Editor erzeugten Fehler in einer einzigen, dafür ewig langen Zeile suchen darf.
spezielle Attribute
Manche Webfeatures benötigen etwas seltener verwendete Attribute z.B. das rel-Attribut zur Identifikation der Bilder auf die ein Javascript-Framework zugreifen soll. Im Zuge der Codeaufreinigung werden die vom WYSIWYG-Editor aber ganz gerne wieder entfernt.
CMS-bedingte Formatierungselemente
Manche CMS-Systeme verwenden diverse Steuersequenzen um z.B. den Einleitungstext vom Haupttext zu trennen. Bei einem von Hand geschriebenen Text ist es kein Problem, diese Steuersequenzen mit einzubringen. Aber ein WYSIWYG-Editor kommt z.B. auf die Idee diese Steuersequenzen in einen div-Container oder p-tags einzupacken. Wird der Text der Einleitungstext dann für eine Übersicht extrahiert, dann wird also der schließende Tag entfernt und man kommt zu einem nicht geschlossenen Tag am Ende eines jeden Einleitungstextes. Abgesehen davon, dass dieser Text dann nicht mehr valide ist, zerschießt so ein Fehler auch das komplette Design der Webseite.
Fazit
Mit modernen WYSIWYG-Editoren ist es durchaus möglich validen und sinnvollen Quelltext zu schreiben. Dieser ist manchmal sogar qualitativ hochwertiger als manche schlampig formatierte Webseite. Jedoch gibt es viele Probleme, die diese Editoren teilweise von Hause aus mitbringen und manche Probleme, die der ungebildete User verursacht, da er die Möglichkeiten der vorhandenen Techniken nicht kennt und daher versucht gleiche Effekte von Hand zu erzielen.
Ich persönlich ziehe es vor meine Artikel sinnvoll und strukturiert von Hand zu schreiben, da kein WYSIWYG-Editor den Quelltext so klar strukturiert, elegant und schlichtweg effizient erstellen kann.
Richte ich WYSIWYG-Editoren für andere User innerhalb eines CMS ein, so passe ich die Funktionen an, so dass eigentlich unnötige Funktionen wie Schriftgröße, Schriftart... dem User gar nicht erst zur Verfügung stehen.