Skip to content
readit
readit

leben, technik und kommunikation

  • werkstatt
    • appseits
    • dokumentation
    • software
    • praxistipps
    • referenzen
  • thinkware
    • Gesellschaft
    • public
    • Reisebilder
    • Lyrik
  • Nach­richt an mich
    • Datenschutz
    • Impres­sum
readit

leben, technik und kommunikation

assorted paintings

MadCap Flare und die Bilder: Size matters

03.07.202303.07.2023

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.

Tei­len mit:

  • Zum Tei­len auf Mast­o­don kli­cken (Wird in neu­em Fens­ter geöff­net) Mast­o­don
  • Kli­cken, um auf Whats­App zu tei­len (Wird in neu­em Fens­ter geöff­net) Whats­App
  • Kli­cken, um einem Freund einen Link per E‑Mail zu sen­den (Wird in neu­em Fens­ter geöff­net) E‑Mail
  • Kli­cken, um auf Blues­ky zu tei­len (Wird in neu­em Fens­ter geöff­net) Blues­ky
  • Mehr
  • Kli­cken zum Aus­dru­cken (Wird in neu­em Fens­ter geöff­net) Dru­cken
  • Klick, um auf Lin­ke­dIn zu tei­len (Wird in neu­em Fens­ter geöff­net) Lin­ke­dIn
  • Kli­cken, um auf Tele­gram zu tei­len (Wird in neu­em Fens­ter geöff­net) Tele­gram
  • Klick, um auf Pin­te­rest zu tei­len (Wird in neu­em Fens­ter geöff­net) Pin­te­rest

Gefällt mir:

Gefällt mir Wird gela­den …
praxistipps CSSFlareHTML

Beitrags-Navigation

Previous post
Next post

Related Posts

appseits

Adobe Capture: Kurz reindigitalisiert

03.08.201702.09.2017

Schon mal pro­biert, ein Stück Stoff in eine tech­ni­sche Zeich­nung zu brin­gen? Oder eine zusa­men­ge­knüll­te…

Tei­len mit:

  • Zum Tei­len auf Mast­o­don kli­cken (Wird in neu­em Fens­ter geöff­net) Mast­o­don
  • Kli­cken, um auf Whats­App zu tei­len (Wird in neu­em Fens­ter geöff­net) Whats­App
  • Kli­cken, um einem Freund einen Link per E‑Mail zu sen­den (Wird in neu­em Fens­ter geöff­net) E‑Mail
  • Kli­cken, um auf Blues­ky zu tei­len (Wird in neu­em Fens­ter geöff­net) Blues­ky
  • Mehr
  • Kli­cken zum Aus­dru­cken (Wird in neu­em Fens­ter geöff­net) Dru­cken
  • Klick, um auf Lin­ke­dIn zu tei­len (Wird in neu­em Fens­ter geöff­net) Lin­ke­dIn
  • Kli­cken, um auf Tele­gram zu tei­len (Wird in neu­em Fens­ter geöff­net) Tele­gram
  • Klick, um auf Pin­te­rest zu tei­len (Wird in neu­em Fens­ter geöff­net) Pin­te­rest

Gefällt mir:

Gefällt mir Wird gela­den …
Read More
praxistipps mugs on a wooden tray

Nisus Writer und Adobe InDesign: Das dynamische Duo

15.05.201410.10.2023

Wer mit InDe­sign gear­bei­tet hat, weiß, wie mäch­tig die­ses Lay­out-Tool mitt­ler­wei­le ist: ob Bil­der, Gra­fi­ken…

Tei­len mit:

  • Zum Tei­len auf Mast­o­don kli­cken (Wird in neu­em Fens­ter geöff­net) Mast­o­don
  • Kli­cken, um auf Whats­App zu tei­len (Wird in neu­em Fens­ter geöff­net) Whats­App
  • Kli­cken, um einem Freund einen Link per E‑Mail zu sen­den (Wird in neu­em Fens­ter geöff­net) E‑Mail
  • Kli­cken, um auf Blues­ky zu tei­len (Wird in neu­em Fens­ter geöff­net) Blues­ky
  • Mehr
  • Kli­cken zum Aus­dru­cken (Wird in neu­em Fens­ter geöff­net) Dru­cken
  • Klick, um auf Lin­ke­dIn zu tei­len (Wird in neu­em Fens­ter geöff­net) Lin­ke­dIn
  • Kli­cken, um auf Tele­gram zu tei­len (Wird in neu­em Fens­ter geöff­net) Tele­gram
  • Klick, um auf Pin­te­rest zu tei­len (Wird in neu­em Fens­ter geöff­net) Pin­te­rest

Gefällt mir:

Gefällt mir Wird gela­den …
Read More
praxistipps

Blindtext in MS Word automatisch einfügen

26.01.201521.03.2015

Mit Blind­text lässt sich das Lay­out eines Doku­men­tes her­vor­ra­gend gestal­ten oder aus­pro­bie­ren, wie eine fer­ti­ge…

Tei­len mit:

  • Zum Tei­len auf Mast­o­don kli­cken (Wird in neu­em Fens­ter geöff­net) Mast­o­don
  • Kli­cken, um auf Whats­App zu tei­len (Wird in neu­em Fens­ter geöff­net) Whats­App
  • Kli­cken, um einem Freund einen Link per E‑Mail zu sen­den (Wird in neu­em Fens­ter geöff­net) E‑Mail
  • Kli­cken, um auf Blues­ky zu tei­len (Wird in neu­em Fens­ter geöff­net) Blues­ky
  • Mehr
  • Kli­cken zum Aus­dru­cken (Wird in neu­em Fens­ter geöff­net) Dru­cken
  • Klick, um auf Lin­ke­dIn zu tei­len (Wird in neu­em Fens­ter geöff­net) Lin­ke­dIn
  • Kli­cken, um auf Tele­gram zu tei­len (Wird in neu­em Fens­ter geöff­net) Tele­gram
  • Klick, um auf Pin­te­rest zu tei­len (Wird in neu­em Fens­ter geöff­net) Pin­te­rest

Gefällt mir:

Gefällt mir Wird gela­den …
Read More

Beliebt:

  • Silbentrennung korrigieren und Sprache anpassen in InDesign
  • Rennradtouren planen
  • Kinomap richtig einstellen
  • Schematische Darstellung: Die Prinzipien sehen
  • Die richtige Schrift für die technische Dokumentation
  • Mehrere Pfade in Illustrator auf einmal verbinden

Klima und Umwelt

  • Klima vor Acht Das Ziel von KLIMA° vor acht ist es, Fernsehsender zu überzeugen, wissenschaftlich fundierte Klimaberichterstattung zu produzieren, die täglich zur besten Sendezeit ausgestrahlt wird und so viele Zuschauer wie möglich erreicht.

Blog via E-Mail abonnieren

Gib deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.

©2025 readit | WordPress Theme by SuperbThemes
%d
    Zum Ändern Ihrer Datenschutzeinstellung, z.B. Erteilung oder Widerruf von Einwilligungen, klicken Sie hier: Einstellungen