< twhirl unter Ubuntu | Der Dank des Tages geht an: Fiona >

14 Jan 2009 WYSIWYG: Best practice

WYSIWYG-Editoren sind eigentlich ein Albtraum für Netzgestalter und Templateautoren. Natürlich sind solche Editoren für Benutzer – spezielle solche, die des (X)HTML nicht mächtig sind – eine feine Sache. Sieht aus wie Word, produziert aber einen Blogeintrag. Der Haken aus Gestaltersicht ist leider oft der (X)HTML-Code, der dabei herauskommt.

WYSIWYG-Editoren wie etwa Xinha, welcher seit Version 1.4 in Serendipity der Standard-WYSIWYG-Editor ist, erlauben dem Benutzer im Grunde alles, was man in so einen Eintrag einfügen können wollte – und damit beginnt das Dilemma auch schon. Kein Templateautor kann erahnen, was Benutzer möglicherweise in Einträge einfügen könnten, geschweige denn, wie, und das alles in einem Template abdecken. Und schon sind wir wieder bei Sokrates

Müssen nun also alle Blogger (X)HTML lernen? Nein. Mit ein paar einfachen Grundregeln und etwas Disziplin ist es durchaus möglich, mit Xinha (wie auch vergleichbaren Editoren) »vernünftig« Einträge zu erstellen. Ich gehe mal der Reihe nach die Buttons in Xinha durch, überspringe aber diejenigen, welche den generierten Code nicht beeinflussen:

  1. font und size: Finger weg! Die Schriftart und -größe regelt das Template. Abgesehen davon verwenden WYSIWYG-Editoren hier veraltete HTML-Elemente. Xinha setzt die Schriftgröße zudem in der ungünstigen Maßeinheit pt.
  2. Format: Superwichtig! Hier sollte man bevor man irgendetwas tippt stets die korrekte Auszeichnung (Überschrift, Absatz, Adresse, Formatiert) für ein Stück Text wählen. Das sorgt dafür, dass die entsprechenden Textbausteine in halbwegs korrektem (X)HTML ausgezeichnet werden.
  3. Physische Auszeichnungen wie fett, kursiv etc. bis hin zu tiefgestellt kann man gerne verwenden (mit Ausnahme von unterstrichen, was Links vorbehalten sein sollte). Hier benutzt Xinha im Übrigen sogar z.B.<strong> statt <b>. Sehr gut.
  4. Ausrichtung: Linksbündig & Co. – auch das sollte dem Template überlassen werden. Speziell Blocksatz kann zudem durchaus Darstellungsprobleme im Browser auslösen. Lieber nicht verwenden.
  5. Listen sind eine Ausnahme, bei der vorher keine Formatierung gewählt werden sollte. Eine Liste muss nicht in einen Absatz verpackt werden.
  6. Einzug vergrößern/-kleinern ist fast schon gefährlich – damit setzt Xinha blockquotes um. Im Grunde braucht man nur »Einzug vergrößern«, wobei man auch hier vorher keinen Absatz setzt, dann aber innerhalb des eingerückten Bereiches einen Absatz setzt. Aufheben des Einzuges nicht vergessen.
  7. Farben: Finger weg! Auch das regelt das Template. Schriftfarbe sollte ebenfalls Links vorbehalten sein.

Natürlich schadet es nie, den erzeugten Code hinterher zu kontrollieren – vorausgesetzt, man kennt sich ein wenig mit (X)HTML aus. Ganz wichtig ist dabei vor allem, auf unnötige <br />-Elemente zu achten. Aus demselben Grund ist es auch unbedingt wichtig, nur dann einen Zeilenvorschub mittels Enter zu erzeugen, wenn es erwünscht ist, sprich: Wenn auf einen Textbereich ein weiterer folgt. Ansonsten erzeugt Xinha nämlich u.U. so etwas hier: <p><br /><p>. Pfui!

Generell empfiehl es sich, Xinha nicht zusammen mit dem NL2BR-Plugin für s9y zu verwenden, da Xinha ansonsten auch den Code zum Einfügen von Bildern aus der Mediendatenbank mit <br />-Elementen dekoriert, was die Darstellung von Bildern in Einträgen ziemlich entstellt.

1 Trackback

Trackback-URL

  1. YellowLeds Weblog: Eine Alternative: Textile (03.02.09, 14:28)

4 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. * falk (14.01.09, 13:44):

    Den ersten Satz drücke ich immer etwas kürzer aus: WYSIWYG-Editoren sind böse. Das ist der Grund, warum ich diese immer abschalte und meide wo es nur geht. Es sind ja nicht nur Blogs, auch in Webmail und Co sind diese Dinger zu finden. Natürlich sollte man sich auch überlegen, welches Problem schneller am Telefon gelöst ist: Die Erklärung wie man einen Link (ohne Editor) setzt oder wie man eine durch den Editor versaute Webseite wieder gerade gerichtet bekommt. Da letzteres nie unter fünf Minuten funktioniert, müssen meine Blogger ohne WYSIWYG-Editor arbeiten.

  2. * YellowLed (14.01.09, 14:14):

    Man sollte nicht verschweigen, dass es mit dem Textile-Plugin eine meines Erachtens hervorragende, aber leider extrem selten genutzte Alternative zu allen WYSIWYG-Editoren gibt. Leider habe ich selbst das Textile-Plugin in s9y noch nie wirklich ausgiebig getestet, ich kenne es nur aus Textpattern – da allerdings funktioniert es hervorragend.

  3. * Konrad Bauckmeier (16.01.09, 11:11):

    Danke für die Zusammenfassung! Auch ich stehe gerade an der Stelle, wo für ein neues Projekt die breitere Mitarbeit notwendig wird und ich gerne einen HTML-Editor für die Nutzer einrichten würde. (Man selbst verwendet soetwas ja eh nicht :-)

    Eins ist schon mal klar: man handelt sich einen Haufen neue Probleme damit ein.

    Für einen Teil der Probleme könnte es helfen, wenn man in S9Y die Buttons konfigurieren könnte, welche die Nutzer sehen dürfen. Z.B. die gefährlichen Buttons ausblenden und neue hinzufügen Was mir fehlt ist z.B. eine Möglichkeit, Float aufzuheben.
    Ebenso ist das Tabellenthema m.E. optimal gelöst.
    Letztendlich würde ich auch gern dem Nutzer die Möglichkeit geben, ganzen Absätzen eine CSS-Klasse zuzuweisen.

  4. * YellowLed (16.01.09, 11:25):

    Die Konfiguration der Buttons hängt – soweit ich da durchblicke – nicht von Serendipity, sondern jeweils vom Editor ab. In irgendeinem™ der WYSIWYG-Editoren, die als Plugins verfügbar sind, geht das sogar (ich meine, es sei TinyMCE gewesen, aber ich kann mich täuschen). Und im Grunde hast Du natürlich Recht: Das wäre in jedem Fall eine gute Lösung – einfach die heiklen Buttons abklemmen.

    Floats clearen und Klassen zuweisen hingegen sind Dinge, die ich von einem WYSIWYG-Nutzer nur bedingt erwarten würde. Dafür sollte meines Erachtens die Codeansicht benutzt werden.

Kommentar schreiben

Bitte die Hinweise beachten.

Hinweise

Textile-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Gravatar, Twitter, Identica, Favatar Autoren Bilder werden unterstützt.

Pflichtfelder sind mit * markiert.

Kommentare, die mindestens einen Link enthalten, werden moderiert. Kommentare, die mindestens 3 Links enthalten, werden abgewiesen. Sorry – Spamschutz.

Bei Emoticons, die mitten in Sätzen stehen, möglichst keine Nasen einsetzen [ :), ;) usw. ], da es ansonsten im Zusammenspiel mit Textile zu Merkwürdigkeiten kommen kann.