„Minimal Markup“ in Mojo

Layout mit Wiki-Syntax

Mojo ist die aktuellste Evolutionsstufe der Content Management-Systeme, die bei ORF.at zum Einsatz kommen. Architektur, Funktionalität und User-Interface unterscheiden sich teilweise grundsätzlich von allen anderen unserer bisher entwickelten Applikationen. Einer der größten Unterschiede ist die Art wie die Redaktionen ihre Texte im System eingeben.

In unseren älteren Systemen wurden Stories in einzelne „Boxen“ unterteilt, z.B. Lead- und Fließtextabsätze, Link- oder Bildboxen o.ä. Jede dieser Boxen präsentiert sich im Editor als eigenes Formular mit je nach Typ unterschiedlichen Eingabgefeldern (Zwischentitel, Marginalienspalte, Fließtext o.ä.). Dieses Schema war vorteilhaft, um Redakteuren eine definierte Struktur und auch Layout bieten zu können, und relativ komfortabel beim Rendern von Stories, hatte (bzw. hat) aber weitreichende Auswirkungen auf den Prozess des Schreibens von Texten.

Zum einen behindert das Box-Schema den Schreibfluss: der Editor zwingt Redakteure schon während des Verfassens eines Textes in vorgegebenen Struktureinheiten - eben diesen „Boxen“ - zu denken. Darüber hinaus mussten Redakteure durch den Aufbau des Editors ihr Schreiben immer wieder unterbrechen, um eine weitere Box mit dem gewünschten Typ anzuhängen und in dieser fortzufahren.

Viele gingen deswegen dazu über, ihre Texte zuerst in externen Editoren zu verfassen und sie dann mit Copy&Paste in den Storyeditor zu übertragen. Weitreichendere Änderungen an bereits existierenden Stories waren ebenfalls mühsam zu bewerkstelligen, weil Boxen eingefügt, gelöscht oder bewegt werden mussten, oder weil einzelne Textabschnitte nur mit Cut&Paste zwischen Boxen verschoben werden konnten. Die Arbeit in einem der älteren Texteditoren besteht also über weite Teile hinweg aus einem ständigen Wechsel zwischen strukturellem, inhaltlichem und layout-technischem Denken - und zwischen Tastatur und Maus.

Das weiße Blatt

Schon am Anfang der Konzeptionsphase von Mojo war klar, dass sich der Storyeditor grundlegend ändern muss. Nicht nur, weil die Geschwindigkeit, in der Texte verfasst werden können, in unseren Hauptsites news.orf.at und sport.orf.at eine wesentlich größere Rolle spielt. Sondern auch weil es die Redaktion seit mehr als zehn Jahren gewohnt war, Texte in einem komfortablen Editor zu schreiben. Diese Texte wurden nach Fertigstellung in ein anderes System importiert (dem Vorläufer von Helma, das „Montage-System“) und dort in das gewünschte Layout gebracht.

Im Idealfall sollte der Storyeditor von Mojo einem „weißen Blatt“ ensprechen, ein einziges mit der Länge des Textes anwachsendes Eingabefeld. Redakteure sollten in der Schreibphase eines Textes nicht mit Layout-Aufgaben konfontiert werden, sondern ihren Text in einem Fluss verfassen können. Die Formatierung von Texten sollte zwar jederzeit möglich, aber nicht zwingend sein. Im Wesentlichen sollte der Storyeditor zunächst also einfach ein simpler Texteditor sein, ohne mit Menüleisten, Wizards o.ä. vom Inhalt abzulenken (ganz ohne Menüleisten ging es letztlich doch nicht, u.a. um System-Neulinge nicht zum Erlernen von Tastaturkürzeln zu zwingen).

Die Entscheidung gegen einen HTML-Wysiwyg-Editor lag daran, dass nur wenige wirklich sauberes, syntaktisch korrektes HTML produzieren (auch wenn sich einiges dahingehend verbessert hat) und dass wir die Layout-Möglichkeiten beschränken wollten. Die Tatsache, dass alle unsere älteren Systeme auch die Direkteingabe von HTML-Code zulassen, hatte teilweise zu einer Verlagerung der Aufmerksamkeit vom Inhalt hin zum Layout geführt (neben der „kreativen“ Zweckentfremdung von bestimmten Boxen, um aus den Layout-Vorgaben auszubrechen). Der Storyeditor von Mojo sollte also nur ein möglichst kleines Subset an einfach zu merkenden Formatierungsmöglichkeiten und trotzdem größere Freiheiten bei der Strukturierung von Texten bieten.

Die Wiki-Syntax in Mojo

Im Laufe der Diskussionen rund um den Storyeditor von Mojo stellte sich relativ rasch heraus, dass wir nur wenige Markup-Elemente benötigen würden, um Stories in ansprechendem Layout darstellen zu können. Darüberhinaus sollte es möglich sein, auch weiterhin Stories in einfachen Texteditoren, Mailclients o.ä. zu schreiben und zu formatieren, ohne zu sehr durch Markup vom Inhalt abgelenkt zu werden.

Die Wiki-Syntax in Mojo besteht aus nur wenigen Elementen:

  • !! Factbox !!
  • >> Blockquote <<
  • == Title ==
  • - List-Element
  • [[ Image ]]
  • @@ Remote Content @@
  • {{{ HTML }}}
  • __link (url)__
  • **strong**
  • //empasis//
  • Line\\feed
  • >>Inline-Quote<<
  • ((abbr Abbreviation))
  • --- (horizontal ruler)

Das Hauptziel der Wiki-Syntax, die in Mojo verwendet wird, war einerseits intuitive Erlernbarkeit und andererseits die möglichst einfache Eingabe, d.h. häufig verwendete Auszeichnungen sollten ohne Strg-, Alt- oder noch komplexere Tastenkombinationen auskommen: zwei Unterstriche, um Links zu erzeugen (weil Links meistens unterstrichen sind), eckige Klammern für Bilder (wegen des rechteckigen Formats der Bilder), zwei Schrägstriche für kursive Textstellen, ein Bindestrich am Anfang eines Listen-Elements usw..

Syntax-Definition und Parsing

Der Wiki-Parser von Mojo ist, wie alle unsere Applikationen, in Javascript geschrieben und basiert auf einem privaten Projekt, das schon einige Zeit vor Mojo entstand. Das Ziel des Projekts bestand darin, einen sowohl server- als auch clientseitig einsetzbaren Parser mit pluggable Syntax (in der Demo ist die Wiki-Creole 1.0 Syntax größtenteils umgesetzt) und beliebigem Ausgabeformat zu schreiben. Darüber hinaus sollte der Parser auch unvollständige Formatierungen (d.h. ohne abschließendem Markup) erkennen, möglichst fehlertolerant sein und in jedem Fall ein syntaktisch korrektes Ergebnis liefern.

Im Gegensatz zu vielen anderen Wiki-Parsern besteht die Syntax-Beschreibung jedes Markup-Elements aus regulären Ausdrücken für den Beginn bzw. das Ende eines Elements. Durch diese Trennung ist es für den Parser möglich, Auszeichnungen zu erkennen bevor sie korrekt geschlossen wurden, d.h. zum Beispiel Titel schon während der Eingabe in den Editor als solche darstellen zu können.

Anhand der Syntax-Beschreibung wird der Text vom Parser in eine abstrakte Objekt-Struktur umgewandelt, die an einen „Writer“ weitergegeben wird, um diesen Objektbaum in das gewünschte Zielformat umzuwandelt. Gegenwärtig verwendet Mojo solche Writer u.a. für HTML5, eine speziellen Writer für die „Light“-Version von news.orf.at und sport.orf.at und diverse (meist XML-basierte) Austauschformate. Sowohl Parser als auch die Wikisyntax-Definition werden unmodifiziert browserseitig verwendet, was die Wartung enorm vereinfacht. Clientseitig kommt nur ein spezieller Writer für die Voransicht zum Einsatz, der den Quelltext einer Story direkt in HTML DOM-Nodes umwandelt.

Die Ausgabe des Parsers als abstrakte Objekt-Struktur bietet neben der Möglichkeit, beliebige „Writer“ einzusetzen, einen weiteren Vorteil: vor der Umwandlung in ein Zielformat kann das Ergebnis mit eigenen „Sanitizern“ o.ä. korrigiert werden. In Mojo kommt zum Beispiel ein eigener „Typographer“ zum Einsatz, der einfache und doppelte Anführungszeichen in typographisch korrekte umwandelt.

Proof of Concept

Das Layout von Stories mit minimaler Wiki-Syntax auszuzeichnen hat sich schon vor dem Relaunch unserer Haupt-Websites bewährt. Schon mit der Vorgänger-Version von Mojo wurden FM4, Science und die (am 1. Oktober 2010 aufgrund des ORF-Gesetzes eingestellte und an den Kurier verkaufte) Futurezone auf Wiki-Syntax umgestellt. FM4 nimmt in der Liste dieser Projekte eine Sonderstellung ein, weil mehrere Dutzend größtenteils externe Autoren diesen Website befüllen und mit der Umstellung die Wiki-Syntax erlernen mussten. Von Anlaufschwierigkeiten abgesehen, die sich meistens auf syntaktisch falsche Auszeichnungen beschränkten (z.B. Absätze fett zu setzen, anstatt sie als Titel auszuzeichnen), haben alle Journalisten innerhalb kürzester Zeit den Umstieg bewältigt.

Robert Gaggl,