Druck-Probleme mit breiten Grafiken und Tabellen

Je nach Browser und Drucker werden gewisse Inhalte abgeschnitten, wenn sie zu weit rechts sind.

Problem 1: Breite Grafiken

Wenn man meine Testseite mit verschieden breiten Grafiken ausdruckt, sieht man, dass Grafiken höchstens ca. 600 Pixel breit sein dürfen, damit sie auf einem DIN-A4-Blatt Hochformat Platz haben.

Problem 2: Tabellen

Wenn man Texte und Grafiken in Tabellen zwängt, so kriegt der Browser beim Drucken Probleme.

Beispiele von problematischen Tabellen:

Linke Spalte breites Bild, rechte Spalte Text (oder umgekehrt)
Linke und rechte Spalte Bilder, deren Breiten zusammengezählt mehr als 600 Pixel betragen
Allgemein: Tabellen oder Tabellenzellen, deren Breite in HTML festgelegt wurde,
z.B. mit <table width="770" ...> oder <td width="750" ...>

Ein häufiges Problem: Breite Grafiken und der Begleittext werden mit Tabellen nebeneinander positioniert.
(Dabei spielt es keine Rolle, ob die Tabellenränder - wie hier - sichtbar sind, oder ob "blinde" Tabellen mit unsichtbaren Rändern verwendet werden.)

Auf einem grossen Bildschirm hat vielleicht alles Platz; auf einem kleinen Bildschirm dagegen muss man horizontal scrollen, und beim Ausdruck wird der Text eventuell rechts einfach abgeschnitten.

Dieser Text hat ein grosses Risiko, beim Ausdruck abgeschnitten zu werden! Er ist in einer Tabellenzelle neben ein ziemlich breites Bild (550x150px) gesetzt.
Dieser Text hat ein grosses Risiko, beim Ausdruck abgeschnitten zu werden! Er ist in einer Tabellenzelle neben ein sehr breites Bild gesetzt.

Werden gar zwei breite Grafiken nebeneinander gesetzt, so wird die zweite Grafik beim Ausdruck einfach abgeschnitten:

Dieser Text wird beim Ausdrucken auf DIN A4 Papier hochformat mit grosser Wahrscheinlichkeit nicht mehr gedruckt. Er ist in einer Tabellenzelle neben ein viel zu breites Bild (700x30px) gesetzt.

Bessere Lösung: HTML

In HTML 3.2 und 4.0 kann man Grafiken mit dem Attribut align="left" an den linken Rand setzen, so dass der Text rechts davon steht, sofern es dort Platz hat:

<p> <img src="..." ... align="left"> Text, der rechts vom Bild stehen soll. <br clear="all"> Weiterer Text unter dem Bild. </p>

Testbild, 550px breit, 150px hoch Dieser Text ist bei einem breiten Bildschirm auch rechts neben der Grafik. Allerdings kann er bei einem schmalen Bildschirm und beim Ausdruck auch einfach unter den Text rutschen. So kann man Probleme vermeiden.
Weiterer Text, der in jedem Fall unter dem Bild steht.

Das gleiche Beispiel mit der zu breiten Grafik. Hier wird beim Ausdruck zwar die Grafik beschnitten, der Text rutscht aber einfach unter die Grafik und bleibt ganz lesbar.

Das gleiche geht natürlich auch seitenverkehrt (Text links, Grafik rechts):

<p> <img src="..." ... align="right"> Text, der links vom Bild stehen soll. <br clear="all"> Weiterer Text unter dem Bild. </p>

Testbild, 550px breit, 150px hoch Dieser Text ist bei einem breiten Bildschirm auch links neben der Grafik. Allerdings kann er bei einem schmalen Bildschirm und beim Ausdruck auch einfach unter den Text rutschen. So kann man Probleme vermeiden.
Weiterer Text, der in jedem Fall unter dem Bild steht.

Wenn man gar kein align-Attribut angibt und einfach zwei <img>-Tags nacheinander hat, werden die zwei breite Bilder auf einem breiten Bildschirm nebeneinander angezeigt; sobald der Bildschirm zu schmal wird oder die Datei ausgedruckt wird, werden die Bilder aber untereinander dargestellt.

Wenn man will, dass die Oberkanten der beiden Bilder bei einem genug breiten Bildschirmfenster auf der gleichen Höhe sind, muss man beide <img>-Tags mit dem Attribut align="top" auszeichnen.

<p> <img src="bild1.gif" ... align="top"> <img src="bild2.gif" ... align="top"> <br clear="all"> Dieser Text ist auf jeden Fall unter den beiden Grafiken. </p>

Testbild, 550px breit, 150px hoch
Dieser Text ist auf jeden Fall unter den beiden Grafiken.

Kritische Lösung für Grafik-Positionierung: CSS

Eigentlich wäre es "noch besser", die Grafik mit dem CSS Level 2 Attribut float:left nach links zu rücken.

Damit hat jedoch Netscape 4.x - der schlechteste Browser aller Zeiten - massive Probleme.
Dummerweise ist gerade dieser miserable Browser in vielen Firmen und Universitäten (z.B. Uni Zürich) auf allen Rechnern als Standardbrowser installiert, ja oft sogar als einziger Browser! (Zeitpunkt: April 2002!)
Deshalb empfehle ich die folgende Lösung nicht anzuwenden.
Sie ist der Vollständigkeit halber aufgeführt.

<p> <img src="..." ... style="float:left;"> Text, der rechts vom Bild stehen soll. <br clear="all"> Weiterer Text unter dem Bild. </p>

Das gleiche Beispiel mit der zu breiten Grafik. Hier wird beim Ausdruck zwar die Grafik beschnitten, der Text rutscht aber einfach unter die Grafik und bleibt ganz lesbar.

Im obigen Beispiel steht das direkt als style-Attribut im img-Tag; es könnte aber auch in einer Klasse definiert sein

Im CSS-Bereich bzw. in der externen CSS-Datei:
img.rechtsumflossen {float:left;}

In HTML:
<img src="..." ... class="rechtsumflossen">

Möglichkeiten der Textbreiten-Beschränkung

Fest steht: es ist ermüdend, Fliesstext am Bildschirm zu lesen, wenn das Browserfenster die ganze Breite eines 19-Zoll-Bildschirms füllt und die Zeilen deshalb von ganz links bis ganz rechts gehen.

Es ist allerdings auch unter Usability-Experten umstritten, ob es sinnvoll ist, die maximale Zeilenlänge künstlich zu begrenzen. Schliesslich kann der (geübte) Benutzer ja die Breite des Browserfensters anpassen, wenn er schmalere Zeilen will.

Es gibt mehrere Möglichkeiten, die Breite von Fliesstext zu regulieren.

Am schlechtesten ist es, den ganzen Text in eine Tabelle mit fixer Breite zu zwängen:

<table width="790" ...> <tr><td>Fliesstext Fliesstext</td></tr> </table>

Dieser Text ist in einer Tabelle mit der Breite 790 Pixel "gefangen". Wenn man die Seite ausdruckt, dann wird er höchstwahrscheinlich rechts abgeschnitten, ausser der Browser ist so intelligent, dass er die Sinnlosigkeit der 790 Pixel erkennt und die Tabelle von sich aus schmaler macht.

Auch wenn der Bildschirm bzw. das Browserfenster weniger als ca. 800 Pixel breit sind, dann wird nicht alles auf einmal angezeigt, und der Benutzer muss ständig horizontal scrollen, was als sehr mühsam empfunden wird.

Viel besser ist es, wenn man mit Cascading Style Sheets (CSS) eine maximale Breite für den Fliesstext angibt:

Im CSS-Bereich:
p { max-width: 35em; ... }

In HTML braucht es dann keine weiteren Angaben:
<p>Fliesstext Fliesstext</p>

Beispiel:

Die Breite dieses Fliesstexts ist mit Cascading Style Sheets auf 35em begrenzt, wobei "em" eine relative Einheit ist (Zusammenhang mit der Schriftgrösse). Somit wird der Text nach jeweils ca. 50 Zeichen umgebrochen. Wenigstens in anständigen Browsern, d.h. in Netscape ab 6.0 und Opera ab 5.0. Leider war Microsoft beim Internet Explorer bis zur Version 6.0 nicht in der Lage, diese CSS-Eigenschaft einzubauen.

Dieser Text passt sich aber auch problemlos an kleine Bildschirme oder schmale Browserfenster an, und beim Drucken gibt es hier keine Probleme!

Sichere Breite

"Sichere Breite" für Grafiken/Webseiten beim Ausdrucken nach meinen Erfahrungen:

A4 hochformat: 600 Pixel
A4 breitformat: 950 Pixel