CSS mit Flare: Sieht gut aus

Weitab von Produktivitätsdruck und Produktionseffizienz beschäftigen wir uns heute mit einer Sache, die dann „von alleine“ laufen muss, wenn der Stresspegel steigt: Layout mit MadCap Flare.

Zum Rekapitulieren: Layout ist wichtig (siehe hier) und eine sinnvolle Strukturierung und Wiederverwendbarkeit des Inhalt sind ebenso wichtig (siehe hier). Falls Sie nochmals nachlesen möchten, ich warte solange …

Im Gegensatz zu vielen papierzentrierten Layoutprogrammen benutzt Flare auch zur Steuerung der gedruckten Ausgabe Stilmittel, die normalerweise nur in der web-basierten Publikation (Onlinehilfen, eBooks) zum Einsatz kommen: CSS, cascading stylesheets. Normalerweise sind CSS nämlich eine Domäne der Weblayouter und teilweise XML-Experten, denn CSS sind eine Sammlung von Eigenschaften, die einem Text oder Element einer Internetseite mitgegeben werden, um sie meist optisch von anderen Elementen zu unterscheiden: Überschriften sehen anders aus als einfacher Text. Das liegt nicht nur an Ihrem jeweiligen Strukturelement (z.B. „h1“ und „p“), sondern auch daran, dass jedes Strukturelement einer Webseite eine Vielzahl an zusätzlichen Eigenschaften erhalten kann, die sein Aussehen festlegen (Textgröße, Schriftart, Farbe, Abstand, Ausrichtung, …).

Kaskadierende Formatlisten

Damit nun diese Eigenschaften nicht jedem einzelnen Element einer Seite zugeordnet werden müssen, hat man eigene Formatierungslisten, die diese Anweisungen enthalten, die „Styleheets“. Kaskadierend sind sie deswegen, weil sich die Eigenschaften eines Elements auf alle Elemente auswirken, die in dieses Element eingegliedert sind. Klassisch ist das Containerelement einer Internetseite („body“), in das alle Elemente hineingesetzt werden müssen, um überhaupt angezeigt zu werden (am Ende muss dann jedes Element wieder „geschlossen“ werden):

<body>
<h1>Überschrift</h1>
<p>Text</p>
</body>

Wenn man nun dem Element „body“ eine Eigenschaft zuweist (beispielsweise eine bestimmte Farbe), dann wirkt sich dies auf alle Elemente innerhalb des Elements aus, hier also auf die Elemente „h1“ und „p“.

Das klingt zunächst restriktiv, ist es aber nicht, denn die eingerückten Elemente können durchaus eigene abweichende Eigsenchaften besitzen. Eine Überschrift „h1“ darf also durchaus eine andere Farbe haben wie der Rest der Seite – sie muss nur in der CSS dem Element zugewiesen werden.

OK. OK. Das reicht. – Fast.

Im Internet wird auf der Seite, die angezeigt werden soll, ein Link auf die CSS-Datei gelegt (dort, wo man es nicht sieht), so dass der Browser beim Öffnen der Seite zunächst die Anweisung bekommt, eine HTML-Datei anzuzeigen und dann sofort auf die CSS verwiesen wird. Diese durchforstet er nach Eigenschaften für die Elemente, die auf der Seite verwendet werden und stellt die Darstellung entsprechend um. Das macht der Browser automatisch, denn er versteht sich auf das Lesen und Anwenden von CSS.

Wie aber ist das mit dem Druck?

CSS zum Drucken

Zusätzlich zu den Eigenschaften für die Bildschirmanzeige verfügen CSS auch über Selektoren für das Ausgabemedium, also beispielswese „screen“ für die Bildschirmausgabe und „print“ für die – richtig – Druckausgabe.

Stolpert der Browser in der CSS nun über eine Stelle, die ihm sagt, dass die folgenden Eigenschaften nur für den Druck bestimmt sind, wird er dies für die Bildschirmausgabe ignorieren. Das bedeutet aber auch, dass man Eigenschaften in der CSS festlegen kann, die ausgabeunabhängig sind, mit den geeigneten Selektoren aber auch Eigenschaften, die nur unter bestimmten Bedingungen zum Zug kommen – beispielsweise für die Darstellung auf kleinen Bildschirmen oder für den Druck.

Das kann dann bedeuten, dass beispielseise das Element „h1“ auf allen Ausgabemedien die selbe Farbe hat, aber jeweils unterschiedliche Größen. ((Dieser Effekt lässt sich auf manchen Internetseiten gut beobachten, die das so genannte „responsive Design“ nutzen: Wenn man auf dem Computermonitor das Fenster schmaler zieht, verschieben sich nicht nur manche Elemente, sondern sie verändern auch ihre Größe oder den Zeilenabstand. Dies ist der Berücksichtigung des Nutzungskontexts geschuldet.))

Nun gibt es aber für die Druckausgabe zusätzliche Eigenschaften, die der Browser nicht anzeigen kann, die er aber an die Druckausgabe weiterleitet: Seitenränder beispielsweise, oder Anweisungen für das Zusammenhalten von Texten (um beispielsweise eine Überschrift und den nachfolgenden Text nicht zu trennen – so genannte „Schusterjungen“).

Auch Flare

nutzt diese Anweisungen, wenn es darum geht, Dokumente zu drucken statt als Onlinehilfe auszugeben. Während Konkurrenzprodukte wie Adobe Robohelp für die Druckausgabe nach einem Word-Template verlangen ((Wer schon einmal Word-Templates vorbereitet hat, kennt die damit verbundenen Qualen.)), lässt Flare die Formatierung über die CSS zu.

Screenshot 2016-12-29 21.36.31 — Die Überschrift „h1“ für die Darstellung im Browser und für die Darstellung im Druck: Textfarbe und Hintergrund sind für den Druck als PDF) vertauscht, um Farbe zu sparen.

Das hat erhebliche Vorteile:

CSS sind einfache Textdateien, die sich von Puristen auch mit einem externen Editor bearbeiten lassen (auf dem Mac nehme ich gerne den TextWrangler von BareBones Software) – obwohl der Editor in Flare sehr gut ist und fast schon WYSIWYG bietet.
Die Einstellungen für den Bildschirm sind übertragbar und leicht zu ergänzen, denn man muss nicht die gesamte Formatierung mit einem zusätzlichen Werkzeug für jedes Ausgabemedium getrennt vornehmen.
Darüber hinaus lassen sich mehrere CSS miteinander verknüpfen, so dass man beispielsweise sprachabhängige Formatierungen vornehmen kann (kyrillische Texte „laufen“ beispielsweise länger, benötigen aber aufgrund fehlender Versalien nicht so viel Durchschuss) und diese dann per @-Zeichen in die CSS „einhängt“.

Ohne Flare zu verlassen, lassen sich dadurch nur mit CSS alle unterschiedlichen Ausgabeformate und Medien berücksichtigen.

Ergo: Auch wenn es mal wieder ganz schnell gehen soll, steigt der Stresspegel nicht.

Kaskadierende Formatlisten

CSS zum Drucken

Auch Flare

Teilen mit:

Gefällt mir:

Related Posts

Teilen mit:

Gefällt mir:

Teilen mit:

Gefällt mir:

Teilen mit:

Gefällt mir: