CSS Einstellungen für print an Bildschirmauflösung angepasst

[Torsten]

Hallo Leute,

ich habe eine HTML-Seite mit einigen Tabellen geschrieben. Diese Tabellen haben eine feste Breite von width="900". Diese Seite muß nur im Internetexplorer bzw. Firefox der beiden Desktopauflösungen 1280x1024 und 1024x768 angezeigt werden können. Das passt auch soweit alles sehr gut.

Das Problem besteht jetzt nur beim Drucken. Bei der höheren Auflösung passt die Seite mit den Tabellen wunderbar auf ein Blatt Papier. Bei der geringeren Auflösung jedoch passt nicht die ganze Tabelle von der Breite her auf das Papier.

Mit Hilfe einer CSS-Datei für den Druck, so dachte ich mir, könnte ich die für die geringere Auflösung die Schriftgröße und Tabellenbreite ändern, dass auch diese Seite vollstädnig auf das Papier past. Im Netz jedoch konnte ich bisher nichts brauchbares finden. Kennt sich hier jemand aus?

[suit]

Mit Hilfe einer CSS-Datei für den Druck, so dachte ich mir, könnte ich die für die geringere Auflösung die Schriftgröße und Tabellenbreite ändern, dass auch diese Seite vollstädnig auf das Papier past. Im Netz jedoch konnte ich bisher nichts brauchbares finden. Kennt sich hier jemand aus?

a) ich soll nicht auf bestimmte bildschirmauflösungen optmieren, da die mit der desktopauflösung, der browserfenstergröße und der viewportgröße nur sehr indirekt etwas zu tun hat
b) ich soll keine gemeinsamen stylesheets für druck und bildschirmausgabe verwenden

<link rel="stylesheet" [...] media="screen, projection" />
<link rel="stylesheet" [...] media="print" />

ins erster stylesheet kommt alles für die bildschirmausgabe rein, ins zweitere alles für die printausgabe - so kann sich nichts gegenseitig stören oder spiessen

[Torsten]

Mit Hilfe einer CSS-Datei für den Druck, so dachte ich mir, könnte ich die für die geringere Auflösung die Schriftgröße und Tabellenbreite ändern, dass auch diese Seite vollstädnig auf das Papier past. Im Netz jedoch konnte ich bisher nichts brauchbares finden. Kennt sich hier jemand aus?

a) ich soll nicht auf bestimmte bildschirmauflösungen optmieren, da die mit der desktopauflösung, der browserfenstergröße und der viewportgröße nur sehr indirekt etwas zu tun hat
b) ich soll keine gemeinsamen stylesheets für druck und bildschirmausgabe verwenden

<link rel="stylesheet" [...] media="screen, projection" />
<link rel="stylesheet" [...] media="print" />

ins erster stylesheet kommt alles für die bildschirmausgabe rein, ins zweitere alles für die printausgabe - so kann sich nichts gegenseitig stören oder spiessen

Ja, mit so einer Antwort hatte ich schon gerechnet, warum nur... . Die Anzeige ist für keine Auflösung optimiert. Das könnte ich zwar entgegengesetzt deinen Angaben machen, da die Seiten wirklich nur von wenigen Personen mit eben diesen beiden Auflösungen genutzt werden. Aber das muß ja nicht sein. Die Tabellen sind nur eben so breit, um die Lesbarkeit und Bearbeitung der Daten zu gewährleisten, und sinnlose Zeilenumbrüche werden durch nowrap abgeschalten. So schaut auch mein kleines   CSS-Dateichen aus, das sagt nur Schrift Arial und nowrap.

Nur reicht das eben für den Druck nicht aus. Und das möchte ich gern hinterfragen, und auch nicht mehr. Und zwar ob ich über ein CSS realisieren kann, das bei der geringeren Auflösung von 1024x768, und auch nur dann, dass die Schriftgröße und die Tabellenbreite geringer ist.

[EKKi]

Mahlzeit Torsten,

Nur reicht das eben für den Druck nicht aus.

Dann baue doch ein separates Druck-Stylesheet ein - wie suit es vorschlug. In diesem kannst Du dann auch <http://de.selfhtml.org/css/formate/einbinden.htm#link_media@title=für das Medium> <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=sinnvollere Breitenangaben> machen (px sind nicht unbedingt die Maßeinheit, mit der ein Drucker zurechtkommt - da würden sich pt, mm oder cm eher anbieten) ...

Und das möchte ich gern hinterfragen, und auch nicht mehr. Und zwar ob ich über ein CSS realisieren kann, das bei der geringeren Auflösung von 1024x768, und auch nur dann, dass die Schriftgröße und die Tabellenbreite geringer ist.

Nein. Wie willst Du nur mit Hilfe von CSS die aktuelle Auflösung bestimmen?

MfG,
EKKi

[suit]

Nein. Wie willst Du nur mit Hilfe von CSS die aktuelle Auflösung bestimmen?

und auch wenn, was hat die auflösung mit meinem drucker zu tun? wenn ich einen pervers großen monitor habe, aber das ganeze auf auf einem 175-mm-bondrucker ausdrucke? oder umgekehrt - ich surfe am handy mit 128px horizontaler breite, drucke aber auf einem a0-plotter aus

[Torsten]

Achso, ja, jetzt verstehe ich, was ihr 3 meint.

Ich schreibe eine CSS-Datei, die nur für den Druck gilt und das auflösungsunabhängig. Und in dieser müßte ich dann Schriftgröße und Tabellenbreite für das A4-Blatt anpassen.

Ist es das was ihr meint? Dann danke ich euch :-)

[EKKi]

Mahlzeit Torsten,

Achso, ja, jetzt verstehe ich, was ihr 3 meint.

3? Du kannst meine multiple Persönlichkeit durchs Forum hindurch erkennen? ;-)

Ich schreibe eine CSS-Datei, die nur für den Druck gilt und das auflösungsunabhängig. Und in dieser müßte ich dann Schriftgröße und Tabellenbreite für das A4-Blatt anpassen.

Ist es das was ihr meint? Dann danke ich euch :-)

Ja, das ist es. So sollte man es IMMER machen. So ist es schließlich auch gedacht. Gern geschehen ... :-)

MfG,
EKKi

[suit]

Ich schreibe eine CSS-Datei, die nur für den Druck gilt und das auflösungsunabhängig. Und in dieser müßte ich dann Schriftgröße und Tabellenbreite für das A4-Blatt anpassen.
Ist es das was ihr meint? Dann danke ich euch :-)

Ja, das ist es. So sollte man es IMMER machen. So ist es schließlich auch gedacht. Gern geschehen ... :-)

noch besser ist es, mit realtiven angaben zu arbeiten - wenn du deiner tabelle sagst, sie soll 21 cm breit sein, geht sich das randlos auf ein a4-papier aus - aber mit us-letter oder a5 schaust du schon wieder durch die finger ;)

[Torsten]

Das ist net so wild, da die Listen für das A4-Format gemacht sind.

Jedoch habe ich jetzt ein neues Problem, dessen Ursache mit schleierhaft ist.

Ich habe jetzt 2 CSS-Dateien, print und screen. Diese habe ich folgendermaßen eingebunden:

<title>Test</title>
<Link href="testscreen.css" rel="stylesheet" type="text/css" media="screen">
<link href="testprint.css" rel="stylesheet" type="text/css" media="print">

Diese befinden sich im selben Verzeichnis wie das html-Dokument.

Die print-Datei hat folgenden Inhalt:

BODY {
 font-family: Arial;
 white-space: nowrap;
}

TABLE {
 width: 24.00cm;
}

Setzte ich jetzt jedoch für die Breite 17 cm, also die wirkliche Breite des druckbaren Bereiches, druckt er die Tabellen total minimiert aus. Woran liegt das jetzt wieder? Ein A4-Blatt hat doch eine geringere Breite als 24 cm.

[suit]

Setzte ich jetzt jedoch für die Breite 17 cm, also die wirkliche Breite des druckbaren Bereiches, druckt er die Tabellen total minimiert aus. Woran liegt das jetzt wieder? Ein A4-Blatt hat doch eine geringere Breite als 24 cm.

die vom drucker bedruckbare breite ist meistens kleiner als 210 mm (a4), die seitenränder werden davon zb noch abzogen

zudem sind skalieren die meisten browser die druckausgabe unabhängig von den stylesheets runter, damit sie auf die seiten passen, weil browserentwickler schlau sind und wissen, dass 95% des internets sonst unausdruckbarer schrott wäre

aus diesem grund sind auch auf papier absolute angaben leider nicht praktikabel - aber wenn du nur einen eingeschränken benutzerkreis hast, kannst du das in deren browsereinstellungen ja ändern

[Torsten]

aus diesem grund sind auch auf papier absolute angaben leider nicht praktikabel ...

Ja, deswegen habe ich für den Druck die Breite einfach auf 100% gestellt. Ich frage mich nur gerade, warum ich das nicht gleich so gemacht habe ;-).

[suit]

Ja, deswegen habe ich für den Druck die Breite einfach auf 100% gestellt. Ich frage mich nur gerade, warum ich das nicht gleich so gemacht habe ;-).

ich erinnere mich noch dunkel, vor ein paar threads gesagt zu haben, dass man relative angaben verwenden soll ;) - die antwort war aber "ja aber das nutzen nur ein paar leute mit diesen und jenen auflösungen" :D

[suit]

Nur reicht das eben für den Druck nicht aus. Und das möchte ich gern hinterfragen, und auch nicht mehr. Und zwar ob ich über ein CSS realisieren kann, das bei der geringeren Auflösung von 1024x768, und auch nur dann, dass die Schriftgröße und die Tabellenbreite geringer ist.

nein, weil die auflösung für die druckausgabe irrelevant ist - im druck gibts keine pixel [1] mehr - hier ist das ausgabemedium nicht mehr 1024 oder 1280 pixel breit sondern meinstens 210 mm (a4)

angaben in % sind hier von vorteil - ansonsten kann so ziemlich jeder moderne browser druckausgaben skalieren

[1] natürlich wird in pixeln gedruckt, aber in einem anderen kontext

[Ingo Turski]

Hi,

b) ich soll keine gemeinsamen stylesheets für druck und bildschirmausgabe verwenden

warum nicht?
Die von mir meist verwendeten Angaben im em passen durchaus für beide Medien.
Daher ist für den Ausdruck meist ausreichend, einige wenige (oder gar keine) allgemeingültigen Angaben zu überschreiben.

freundliche Grüße
Ingo

[suit]

warum nicht?
Die von mir meist verwendeten Angaben im em passen durchaus für beide Medien.

jein - wenn du etwas in em angibst, bezieht sich der browser auf deine einstellung in pixel, dies ist für druckausgabe meistens ungeignet - ebenso wenn du alles in % angibst - es ist halt ein dilemma

Daher ist für den Ausdruck meist ausreichend, einige wenige (oder gar keine) allgemeingültigen Angaben zu überschreiben.

ja - aber ein separates file für druck und screen mit verschiedenen, voneinander isolierten medientypen ist beim komplexen layouts wesentlich zuverlässiger

es funktioniert halt nur deshalb gut, weil die browser eine sehr gute methodik haben, screen-stylesheets zu drucken ;)

[Ingo Turski]

Hi,

Die von mir meist verwendeten Angaben im em passen durchaus für beide Medien.
jein - wenn du etwas in em angibst, bezieht sich der browser auf deine einstellung in pixel, dies ist für druckausgabe meistens ungeignet - ebenso wenn du alles in % angibst - es ist halt ein dilemma

wieso?

body {font-size:100.1%}  
@media print { body {font-size:12pt} }

sollte dies ausgleichen, wenn ich für screen von 16px Grundeinstellung ausgehe.

freundliche Grüße
Ingo

[suit]

wieso?

body {font-size:100.1%}

@media print { body {font-size:12pt} }

> sollte dies ausgleichen, wenn ich für screen von 16px Grundeinstellung ausgehe.  
  
reicht natürlich auch aus - aber ich persönlich bevorzuge voneinander isolierte angaben, wenn ich formatierungen für den druck tauschen möchte, werfe ich einen blick ins file print.css und muss nicht in einem allgemeinen stylesheet irgendwo nach @media print suchen ;)  
  
das ist aber geschmackssache

[Ingo Turski]

Hi,

ich persönlich bevorzuge voneinander isolierte angaben, wenn ich formatierungen für den druck tauschen möchte, werfe ich einen blick ins file print.css und muss nicht in einem allgemeinen stylesheet irgendwo nach @media print suchen ;)

dafür erstellst Du dann den Großteil des CSS unnötig doppelt und vergrößerst über das weitgehend redundante CSS dann auch noch die Ladezeit?
Und wenn Du mal was am Layout änderst, dann musst Du das meist ja auch doppelt machen? Auch ne Form von Arbeitsbeschaffung. ;-)

Meine Druck-CSS beschränken sich meist auf wenige Regeln, da der Ausdruck ja weitgehend der Bildschirmanzeige entsprechen soll, weshalb nur Farbanpassungen oder Ausblendungen nötig werden können.

freundliche Grüße
Ingo

[suit]

dafür erstellst Du dann den Großteil des CSS unnötig doppelt und vergrößerst über das weitgehend redundante CSS dann auch noch die Ladezeit?

nein - siehe weiter unten

Und wenn Du mal was am Layout änderst, dann musst Du das meist ja auch doppelt machen? Auch ne Form von Arbeitsbeschaffung. ;-)

das liegt daran, dass ich hauptsächlich mit einem framework für ein modul eines framesworks arbeite ;) - der daraus resulierende html-code ist fast immer bis auf wenige abweichungen ziemlich ähnlich - so sind die stylesheets transportabel und modular aufgebaut

bei den druckstylesheets gibts dann einfache und komplizierte variante - die einfachen bestehen in der tat nur aus browser defaults und dem ausblenden von unnützen dingen (wie zb menüführung)

Meine Druck-CSS beschränken sich meist auf wenige Regeln, da der Ausdruck ja weitgehend der Bildschirmanzeige entsprechen soll, weshalb nur Farbanpassungen oder Ausblendungen nötig werden können.

ich sehe das so:
der ausdruck einer webseite soll NICHT weitgehend der bildschirmanzeige entsprechen, der ausdruck soll auf den medientyp angepasst sein -
ich brauche sogut wie keine informationen vom screen-stylesheet, dafür gibt es gesonderte, eigene regeln für die druckausgabe (wenn nötig)

deine argumentation hat für mich jetzt sinn: du willst, dass das ausgedruckte aussieht wie auf dem bildschirm - genau das will ich eben in den meisten fällen nicht

[Ingo Turski]

Hi,

ich sehe das so:
der ausdruck einer webseite soll NICHT weitgehend der bildschirmanzeige entsprechen, der ausdruck soll auf den medientyp angepasst sein -

das muss sich nicht widersprechen. Abgesehen davon kann ich mir vorstellen, dass ein Besucher schon gerne einen dem Gesehenen möglichst ähnlichen Ausdruck wünschen kann; abgesehen natürlich von auf Papier unnützen Dingen wie Navigation, Scrollbalken, aber auch helle Schrift auf dunklem Grund.

freundliche Grüße
Ingo