CSS mit Flare: Sieht gut aus

Weit­ab von Pro­duk­ti­vi­täts­druck und Pro­duk­ti­ons­ef­fi­zi­enz beschäf­ti­gen wir uns heu­te mit einer Sache, die dann „von allei­ne“ lau­fen muss, wenn der Stress­pe­gel steigt: Lay­out mit Mad­Cap Fla­re.

Zum Reka­pi­tu­lie­ren: Lay­out ist wich­tig (sie­he hier) und eine sinn­vol­le Struk­tu­rie­rung und Wie­der­ver­wend­bar­keit des Inhalt sind eben­so wich­tig (sie­he hier). Falls Sie noch­mals nach­le­sen möch­ten, ich war­te solan­ge …

Im Gegen­satz zu vie­len papier­zen­trier­ten Lay­out­pro­gram­men benutzt Fla­re auch zur Steue­rung der gedruck­ten Aus­ga­be Stil­mit­tel, die nor­ma­ler­wei­se nur in der web-basier­ten Publi­ka­ti­on (Online­hil­fen, eBooks) zum Ein­satz kom­men: CSS, cas­ca­ding style­sheets. Nor­ma­ler­wei­se sind CSS näm­lich eine Domä­ne der Web­lay­ou­ter und teil­wei­se XML-Exper­ten, denn CSS sind eine Samm­lung von Eigen­schaf­ten, die einem Text oder Ele­ment einer Inter­net­sei­te mit­ge­ge­ben wer­den, um sie meist optisch von ande­ren Ele­men­ten zu unter­schei­den: Über­schrif­ten sehen anders aus als ein­fa­cher Text. Das liegt nicht nur an Ihrem jewei­li­gen Struk­tur­ele­ment (z.B. „h1“ und „p“), son­dern auch dar­an, dass jedes Struk­tur­ele­ment einer Web­sei­te eine Viel­zahl an zusätz­li­chen Eigen­schaf­ten erhal­ten kann, die sein Aus­se­hen fest­le­gen (Text­grö­ße, Schrift­art, Far­be, Abstand, Aus­rich­tung, …).

Kas­ka­die­ren­de For­mat­lis­ten

Damit nun die­se Eigen­schaf­ten nicht jedem ein­zel­nen Ele­ment einer Sei­te zuge­ord­net wer­den müs­sen, hat man eige­ne For­ma­tie­rungs­lis­ten, die die­se Anwei­sun­gen ent­hal­ten, die „Sty­le­heets“. Kas­ka­die­rend sind sie des­we­gen, weil sich die Eigen­schaf­ten eines Ele­ments auf alle Ele­men­te aus­wir­ken, die in die­ses Ele­ment ein­ge­glie­dert sind. Klas­sisch ist das Con­tai­ner­ele­ment einer Inter­net­sei­te („body“), in das alle Ele­men­te hin­ein­ge­setzt wer­den müs­sen, um über­haupt ange­zeigt zu wer­den (am Ende muss dann jedes Ele­ment wie­der „geschlos­sen“ wer­den):

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

Wenn man nun dem Ele­ment „body“ eine Eigen­schaft zuweist (bei­spiels­wei­se eine bestimm­te Far­be), dann wirkt sich dies auf alle Ele­men­te inner­halb des Ele­ments aus, hier also auf die Ele­men­te „h1“ und „p“.

Das klingt zunächst restrik­tiv, ist es aber nicht, denn die ein­ge­rück­ten Ele­men­te kön­nen durch­aus eige­ne abwei­chen­de Eigs­enchaf­ten besit­zen. Eine Über­schrift „h1“ darf also durch­aus eine ande­re Far­be haben wie der Rest der Sei­te – sie muss nur in der CSS dem Ele­ment zuge­wie­sen wer­den.

OK. OK. Das reicht. – Fast.

Im Inter­net wird auf der Sei­te, die ange­zeigt wer­den soll, ein Link auf die CSS-Datei gelegt (dort, wo man es nicht sieht), so dass der Brow­ser beim Öff­nen der Sei­te zunächst die Anwei­sung bekommt, eine HTML-Datei anzu­zei­gen und dann sofort auf die CSS ver­wie­sen wird. Die­se durch­fors­tet er nach Eigen­schaf­ten für die Ele­men­te, die auf der Sei­te ver­wen­det wer­den und stellt die Dar­stel­lung ent­spre­chend um. Das macht der Brow­ser auto­ma­tisch, denn er ver­steht sich auf das Lesen und Anwen­den von CSS.

Wie aber ist das mit dem Druck?

CSS zum Dru­cken

Zusätz­lich zu den Eigen­schaf­ten für die Bild­schirm­an­zei­ge ver­fü­gen CSS auch über Selek­to­ren für das Aus­ga­be­me­di­um, also bei­spiels­we­se „screen“ für die Bild­schirm­aus­ga­be und „print“ für die – rich­tig – Druck­aus­ga­be.

Stol­pert der Brow­ser in der CSS nun über eine Stel­le, die ihm sagt, dass die fol­gen­den Eigen­schaf­ten nur für den Druck bestimmt sind, wird er dies für die Bild­schirm­aus­ga­be igno­rie­ren. Das bedeu­tet aber auch, dass man Eigen­schaf­ten in der CSS fest­le­gen kann, die aus­ga­be­un­ab­hän­gig sind, mit den geeig­ne­ten Selek­to­ren aber auch Eigen­schaf­ten, die nur unter bestimm­ten Bedin­gun­gen zum Zug kom­men – bei­spiels­wei­se für die Dar­stel­lung auf klei­nen Bild­schir­men oder für den Druck.

Das kann dann bedeu­ten, dass bei­spiels­ei­se das Ele­ment „h1“ auf allen Aus­ga­be­me­di­en die sel­be Far­be hat, aber jeweils unter­schied­li­che Grö­ßen.1

Nun gibt es aber für die Druck­aus­ga­be zusätz­li­che Eigen­schaf­ten, die der Brow­ser nicht anzei­gen kann, die er aber an die Druck­aus­ga­be wei­ter­lei­tet: Sei­ten­rän­der bei­spiels­wei­se, oder Anwei­sun­gen für das Zusam­men­hal­ten von Tex­ten (um bei­spiels­wei­se eine Über­schrift und den nach­fol­gen­den Text nicht zu tren­nen – so genann­te „Schus­ter­jun­gen“).

Auch Fla­re

nutzt die­se Anwei­sun­gen, wenn es dar­um geht, Doku­men­te zu dru­cken statt als Online­hil­fe aus­zu­ge­ben. Wäh­rend Kon­kur­renz­pro­duk­te wie Ado­be Robo­help für die Druck­aus­ga­be nach einem Word-Tem­p­la­te ver­lan­gen2, lässt Fla­re die For­ma­tie­rung über die CSS zu.

Screenshot 2016-12-29 21.36.31
Die Über­schrift „h1“ für die Dar­stel­lung im Brow­ser und für die Dar­stel­lung im Druck: Text­far­be und Hin­ter­grund sind für den Druck als PDF) ver­tauscht, um Far­be zu spa­ren.

Das hat erheb­li­che Vor­tei­le:

  1. CSS sind ein­fa­che Text­da­tei­en, die sich von Puris­ten auch mit einem exter­nen Edi­tor bear­bei­ten las­sen (auf dem Mac neh­me ich ger­ne den Text­Wrang­ler von Bare­Bo­nes Soft­ware) – obwohl der Edi­tor in Fla­re sehr gut ist und fast schon WYSIWYG bie­tet.
  2. Die Ein­stel­lun­gen für den Bild­schirm sind über­trag­bar und leicht zu ergän­zen, denn man muss nicht die gesam­te For­ma­tie­rung mit einem zusätz­li­chen Werk­zeug für jedes Aus­ga­be­me­di­um getrennt vor­neh­men.
  3. Dar­über hin­aus las­sen sich meh­re­re CSS mit­ein­an­der ver­knüp­fen, so dass man bei­spiels­wei­se sprach­ab­hän­gi­ge For­ma­tie­run­gen vor­neh­men kann (kyril­li­sche Tex­te „lau­fen“ bei­spiels­wei­se län­ger, benö­ti­gen aber auf­grund feh­len­der Ver­sa­li­en nicht so viel Durch­schuss) und die­se dann per @-Zeichen in die CSS „ein­hängt“.

Ohne Fla­re zu ver­las­sen, las­sen sich dadurch nur mit CSS alle unter­schied­li­chen Aus­ga­be­for­ma­te und Medi­en berück­sich­ti­gen.

Ergo: Auch wenn es mal wie­der ganz schnell gehen soll, steigt der Stress­pe­gel nicht.

  1. Die­ser Effekt lässt sich auf man­chen Inter­net­sei­ten gut beob­ach­ten, die das so genann­te „respon­si­ve Design“ nut­zen: Wenn man auf dem Com­pu­ter­mo­ni­tor das Fens­ter schma­ler zieht, ver­schie­ben sich nicht nur man­che Ele­men­te, son­dern sie ver­än­dern auch ihre Grö­ße oder den Zei­len­ab­stand. Dies ist der Berück­sich­ti­gung des Nut­zungs­kon­texts geschul­det. ↩

  2. Wer schon ein­mal Word-Tem­pla­tes vor­be­rei­tet hat, kennt die damit ver­bun­de­nen Qua­len. ↩

dokumentation software

Related Posts