MadCap Flare und die Bilder: Size matters

Aus­zeich­nungs­spra­chen wie HTML und XML haben die Beson­der­heit, dass man in ihnen nicht malen kann wie in einem Lay­out­pro­gramm oder einer Prä­sen­ta­ti­ons­soft­ware. Statt­des­sen wer­den Bil­der refe­ren­ziert. Sie lie­gen fix in fer­tig in einem Ord­ner – und an der Stel­le im Text, an der das Bild gezeigt wer­den soll, liegt ein Link (<img…>).

Das bedeu­tet aber auch, dass die Bil­der, bevor sie in den Text ver­linkt wer­den kön­nen, bereits fix und fer­tig vor­han­den sein müs­sen, und man ein wei­te­res Pro­gramm benö­tigt, um die Bil­der zu erstel­len und zu bear­bei­ten. Aller­dings heißt das auch, dass im Text der Aus­zeich­nungs­spra­che kein Hin­weis dar­auf zu fin­den ist, wie groß das Bild denn ange­zeigt wer­den soll. Das Pro­gramm (und auch ein Brow­ser) gehen daher immer von der Grö­ße aus, die das Bild lie­fert: ein Bild mit den Maßen 2000 x 2000 Pixel wird halt genau so groß dar­ge­stellt.

Das ist aller­dings häu­fig nicht gewollt. Zum einen, weil damit Bil­der teil­wei­se über den Rand hin­aus­ra­gen und nicht mehr voll­stän­dig sicht­bar sind, zum ande­ren, weil der Bild­in­halt mit der Bild­grö­ße oft wenig gemein hat, wie bei­spiels­wei­se bei Icons oder Sym­bo­len: War­um soll­te man ein Hin­wei­spik­to­gramm sei­ten­fül­lend dar­stel­len, nur weil es 2000 x 2000 Pixel groß ist?

Frü­her gab es dazu zwei Mög­lich­kei­ten, das Pro­blem zu lösen:

• Man hat die Bild­grö­ße vor­ge­ge­ben, indem man die Bil­der mit einem ent­spre­chen­den Pro­gramm zurecht­ge­schnit­ten oder ska­liert hat. Das funk­tio­niert pri­ma, wenn die Sei­ten­grö­ße fest­steht, wie im Druck oder in einer PDF, geht aber völ­lig dane­ben, wenn das Bild auf einem Tablet oder Smart­phone betrach­tet wer­den soll und sich dazu auto­ma­tisch an die Bild­schirm­brei­te anpas­sen soll.
• Man hat jedes Bild im Edi­tor nach­be­han­delt und dazu bei­spiels­wei­se im HTML die Wer­te für Höhe und Brei­te zum Ele­ment <img..> dazu geschrie­ben. Das mag für ein ein­zi­ges Bild noch funk­tio­nie­ren, für eine gro­ße Anzahl Bil­der ist das Unfug – und auch dann pas­sen sich die Bil­der nicht an die unter­schied­li­chen Gerä­te an.

Bei­de Metho­den stam­men noch aus der Zeit vor dem „respon­si­ve Design“, als man auch Inter­net­sei­ten nicht anders behan­delt hat­te als gedruck­te Sei­ten.

Glück­li­cher­wei­se ist das aber längst vor­bei.

Moder­ne Edi­to­ren wie Mad­Cap Fla­re nut­zen dazu HTML5 mit CSS, um dar­in für bestimm­te Bild­grö­ßen eine fle­xi­ble Anpas­sung vor­zu­se­hen. Damit ist es mög­lich, für jede gewünsch­te Bild­grö­ße von vorn­her­ein eine bestimm­te Höhe und/​oder Brei­te vor­zu­se­hen und die­se unter­schied­li­chen Maße als „Klas­sen“ (Eigen­schafts­grup­pen) zusam­men­zu­fas­sen und den Bil­dern zuzu­wei­sen. Dadurch erhal­ten bei­spiels­wei­se alle Bil­der eine ein­heit­li­che Brei­te (z.B. 50% der Text­brei­te). Klas­sen die­ser Art las­sen sich für jede Bild­grö­ße in belie­bi­ger Kom­ple­xi­tät anle­gen (mit Schat­ten, Rand, gerun­de­ten Ecken, Rah­men­far­be oder Abstand und Posi­ti­on).

Sobald man dem Bild eine ande­re Klas­sen zuweist oder die Wer­te in der Klas­sen ändert, wer­den auto­ma­tisch alle wei­te­ren Eigen­schaf­ten auf das Bild ange­wen­det. Ein Bild mit der Klas­se „.inline“ wird unab­hän­gig von der Aus­ga­be immer die hal­be Text­brei­te ein­neh­men und den Abstand zu den umlie­gen­den Objek­ten (pad­ding) ein­hal­ten:

<img src="../../.." class="inline" />

Hin­ter der Anga­be zum Ort des Bilds (src=“…“) folgt die Klas­se „inline“, die abhän­gig von der Aus­ga­be (HTML oder PDF) die fol­gen­den Eigen­schaf­ten besitzt:

Im Text sieht das dann bei­spiels­wei­se so aus:

Bei Icons, die im Text ver­wen­det wer­den, bedeu­tet das einen gro­ßen Effi­zi­enz­ge­winn, denn ein ein­zi­ges Pik­to­gramm lässt sich dadurch sowohl als gro­ßes Icon wie auch als klei­nes Icon im Text ver­wen­den, ohne dass dafür jedes­mal im Text eine gan­ze Grup­pe von Eigen­schaf­ten wie Höhe und Grund­li­ni­en­ab­stand ein­ge­stellt wer­den muss – und das unab­hän­gig vom Aus­ga­be­for­mat.

Oder kurz: bevor man Zeit in die pas­sen­de Ska­lie­rung von Bil­dern inves­tiert, soll­te man sich in Fla­re einen Satz unter­schied­li­cher Bild­klas­sen anle­gen, die man glo­bal mit einer ein­zi­gen Ein­stel­lung anpas­sen kann.

Brain mat­ters.