CSS-Formatierung für Druck

[makaio]

Hallo zusammen!

Ich habe ein Problem bei der Druckformatierung via CSS.

Ich habe eine Tabelle mit Daten, die ich gerne auf einem A4-Blatt im Querformat ausdrucken würde.

Um dies zu erreichen verwende ich folgende CSS-Angaben [Auszug, auf wesentliche Elemente beschränkt]:

@page {
  size:landscape;
  margin-top:0cm;
  margin-bottom:0cm;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

body {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 8pt;
}

table {
 border-collapse: collapse;
 border: none;
 font-size: 10pt;
}

Allerdings druckt sowohl Opera als auch Mozilla (1.6a) im Hochformat (portrait). Opera füllt dabei nur jeweils 2/3 der Seite mit Daten, der Rest ist bist zum Seitenumbruch leer. Dabei werden auch keine Datensätze ausgelassen.

Was mache ich falsch?

Danke für eure Hilfe,

Matthias

[Maximilian Baumgart]

AfaIk sind bei @page nur Angaben zu size und margin erlaubt, keine Schriftformatangaben.
Villeicht funktioniert die Seitenformatangabe, wenn diese Angaben in den @media print {} - Bereich ausgelagert werden.

[Jeena Paradies]

Hallo,

Leider habe ich keine Lösung für dein Problem aber dafür zwei Fragen:

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

Warum verwendest du für den Druck Serifenlose Schriften?

font-size: 10pt;

Welchen vorteil bringt dir hier pt?

Grüße
Jeena Paradies

[Thomas Luethi]

Hallo,

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
Warum verwendest du für den Druck Serifenlose Schriften?

Das kann nur makaio selbst beantworten.

Moegliche Gruende:

• Gewohnheit
• Geschmackssache
• Corporate Identity

font-size: 10pt;
Welchen vorteil bringt dir hier pt?

Pt ist _die_ Einheit fuer das Medium Print.
Hier im Forum wird es immer verteufelt, wenn jemand es in einem Screen-CSS anwendet.
Fuer Druck ist es allerdings IMHO geeignet.
Lies z.B.
http://www.netandmore.de/faq/fom-serve/cache/414.html

Gruesse,

Thomas

[makaio]

Pt ist _die_ Einheit fuer das Medium Print.
Hier im Forum wird es immer verteufelt, wenn jemand es in einem Screen-CSS anwendet.
Fuer Druck ist es allerdings IMHO geeignet.

Mensch, ein Gedankenleser... ;-)

[Jeena Paradies]

Hallo,

http://www.netandmore.de/faq/fom-serve/cache/414.html

Danke ich habe nämlich schon seit ein paar Monaten so nebenher nachgedacht welche einheit ich für mein Druck CSS denn für die Schriftgröße nehmen soll. Deshalb habe ich auch geftagt.

Grüße
Jeena Paradies

[Uschi Renziehausen]

gugugg Thomas,

die Leute, die pt für screen verteufeln, haben kein Mitleid mit IE-Usern, besonders nicht mit den kurzsichtigen unter denselben. Ansonsten halte selbst ich Blindschleiche 8pt mit Verdana im Druck für ausreichend, wenn ich dafür Daten strukturiert, sprich in einer Tabelle lesen kann. Selbst auf dem Bildschirm ist das dann in Ordnung, wenn die Zeilen nicht zu lang laufen (-4 Dioptrin).

Gruß, Uschi

[Thomas Luethi]

Hallo Uschi,

die Leute, die pt für screen verteufeln, haben kein Mitleid mit IE-Usern, besonders nicht mit den kurzsichtigen unter denselben.

Ich verstehe den Satz nicht ganz.
Willst Du irgendwie sagen, dass "pt" sogar irgendwelche Vorteile haette
fuer die MS IE User?
(Ich weiss, dass diese armen Geschoepfe bei px-Angaben die Schrift
nicht skalieren koennen. Ist das bei pt besser?)

Ansonsten halte selbst ich Blindschleiche 8pt mit Verdana im Druck für ausreichend, wenn ich dafür Daten strukturiert, sprich in einer Tabelle lesen kann.

OK, ich muesste es mal selbst ausprobieren.
Ich weiss aus Erfahrung, dass ich (normalsichtig, 29j.) bei normalem Fliesstext
mit 1.5-fachem Zeilenabstand schon 10.5pt ziemlich ermuedend finde, wenn
man laengere Texte _lesen_ soll.
(Die Schrift - eine serifenlose "Frutiger" - und die 10.5pt waren in dem Fall vom
Corporate Design vorgegeben.)

Selbst auf dem Bildschirm ist das dann in Ordnung, wenn die Zeilen nicht zu lang laufen

Auf dem Bildschirm ist 9px die "physikalisch" unterste Grenze fuer Schriften
mit Unterlaengen, siehe
http://www.netandmore.de/faq/fom-serve/cache/1153.html
Alles, was darunter ist, ist IMHO kriminell.

Liebe Gruesse + gute Nacht,

Thomas
  der in Mozilla die Mindestgroesse 12px eingestellt hat... ;-)

[Uschi Renziehausen]

Guggug,

Willst Du irgendwie sagen, dass "pt" sogar irgendwelche Vorteile haette
fuer die MS IE User?
(Ich weiss, dass diese armen Geschoepfe bei px-Angaben die Schrift
nicht skalieren koennen. Ist das bei pt besser?)

yep, wenn pt dann lässt sich die Schrift im IE skalieren und ich bin relativ oft darauf angewiesen *durchdiekontaktlinsenplinzel*.

OK, ich muesste es mal selbst ausprobieren.
Ich weiss aus Erfahrung, dass ich (normalsichtig, 29j.) bei normalem Fliesstext
mit 1.5-fachem Zeilenabstand schon 10.5pt ziemlich ermuedend finde, wenn
man laengere Texte _lesen_ soll.
(Die Schrift - eine serifenlose "Frutiger" - und die 10.5pt waren in dem Fall vom
Corporate Design vorgegeben.)

Fließtext != Tabellendaten so es denn borders gibt. Weitlaufender Fließtext in 8pt ist eine Katastrophe, besonders bei manchen Schriftarten (Frutiger gehört deutlich dazu, Verdana sicher nicht)

Auf dem Bildschirm ist 9px die "physikalisch" unterste Grenze fuer Schriften
mit Unterlaengen, siehe
http://www.netandmore.de/faq/fom-serve/cache/1153.html
Alles, was darunter ist, ist IMHO kriminell.

9px != 9pt; 9pt entspricht meist 11px. Erfahrungswert, kein know how.

Liebe Gruesse + gute Nacht

Schlaf schön, Uschi :-))

PS: Mozilla und 12px
ich verwende gerne 10px/8pt bei footern (copyright, impressum blabla)
aber deutlich nicht bei Times New Roman, es kommt halt auf die Schriftarten an.

[Uschi Renziehausen]

Sorry loits,

das mit der Skalierbarkeit von pt im IE war ein heftiger Irrtum vom Amt. Nun grabe ich in meinem Hirn und frage mich: bei welchem Browser war das so, dass die Schriftgröße bei Verwendung von pt skalierbar war, bei px aber nicht? Irgendwie muss ich doch auf die Idee gekommen sein???

Gruß Uschi

[MudGuard]

Hi,

die Leute, die pt für screen verteufeln, haben kein Mitleid mit IE-Usern,

Es gibt ja auch noch andere Einheiten als pt (für den Bildschirm ungeeignet) und px (im IE nicht skalierbar) - insbes. die, die relativ zur vom Benutzer konfigurierten Schrift sind, also em, ex, %

"Verteufeln" von pt für screen hat also nichts mit "kein Mitleid mit IE-Usern" zu tun.

cu,
Andreas

[makaio]

Hi Thomas!

Warum verwendest du für den Druck Serifenlose Schriften?
Welchen vorteil bringt dir hier pt?

Da ich dir darauf keine Antwort geben kann, darfst du mich gerne über die Nachteile dieser Varianten aufklären.

Matthia

[Thomas Luethi]

Hallo,

Hi Thomas!

Du hast aber auf das Posting von Jeena geantwortet ;-)

Warum verwendest du für den Druck Serifenlose Schriften?
Welchen vorteil bringt dir hier pt?

Da ich dir darauf keine Antwort geben kann, darfst du mich gerne über die Nachteile dieser Varianten aufklären.

pt ist IMHO fuer Print OK.

Allgemeine Faustregeln der Typographie sagen, dass man fuer Fliesstext
aus Gruenden der besseren Lesbarkeit

• fuer Bildschirmansicht _eher_ serifenlose Schriften nehmen sollte
     (z.B. Tahoma, Arial, Helvetica, Verdana)
• fuer den Druck _eher_ Serifen-Schriften nehmen sollte
     (Times New Roman, Times, Georgia).

Auf dem Bildschirm bei 10 - 14px sind Serifen-Schriften schlecht lesbar.
Ich wuerde deshalb fuer Screen unbedingt serifenlose Schriften nehmen.

Was Du fuer Print nimmst, ist Dir natuerlich freigestellt. Und Geschmackssache.
Wie gesagt, kann z.B. ein Corporate Design fuer saemtliche
Drucksachen eine serifenlose Schrift vorschreiben.

Gruesse,

Thomas

[Thomas J.S.]

Hallo,

Allerdings druckt sowohl Opera als auch Mozilla (1.6a) im Hochformat (portrait). Opera füllt dabei nur jeweils 2/3 der Seite mit Daten, der Rest ist bist zum Seitenumbruch leer. Dabei werden auch keine Datensätze ausgelassen.

Opera ab 7 soll sowohl @page als auch 'size' können http://www.opera.com/docs/specs/css/
Du könntest versuchen einen @media Bereicht zu definieren

@media print {
  @page {
  /* ... */
  }
 body { ... }
 /* etc ...*/
}

Grüße
Thomas

[Thomas Luethi]

Hallo,

Ich habe eine Tabelle mit Daten, die ich gerne auf einem A4-Blatt im Querformat ausdrucken würde.

@page {
  size:landscape;
  margin-top:0cm;
  margin-bottom:0cm;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

Die Font-Angaben haben IMHO in @page { } nichts verloren.

body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
}

8pt ist winzig. Da muss man ja die Lupe nehmen.
Ich wuerde nicht unter 10pt gehen.

table {
border-collapse: collapse;
border: none;

Entweder Kurz-Schreibweise:
border: 0 none;
Oder ausfuehrliche Schreibweise:
border-style: none;

Ist aber sowieso ueberfluessig, da standardmaessig kein Border gemacht wird.

Allerdings druckt sowohl Opera als auch Mozilla (1.6a) im Hochformat (portrait). Opera füllt dabei nur jeweils 2/3 der Seite mit Daten, der Rest ist bist zum Seitenumbruch leer. Dabei werden auch keine Datensätze ausgelassen.

Was mache ich falsch?

Du gehst davon aus, dass die Browser CSS vollstaendig verstehen und umsetzen.
Tun sie aber nicht.
@page { size:landscape; }
koennen offenbar erst die wenigsten Browser.

Opera kann es scheinbar soweit, dass es zwar den Inhalt, den es drucken will,
auf Querformat anpasst, deshalb kriegst Du auch 2/3 gefuellte Seiten.
Die Wahl des Papierformats (Querformat) musst Du aber nach wie vor manuell
in den Druck-Einstellungen machen.

Du hast folgende Moeglichkeiten.
1 - Sorge dafuer, dass Deine Seiten auch im Hochformat druckbar sind
     (d.h. nichts breiter als 600px.)
2 - Fordere die Benutzer auf, die Seiten von Hand im Querformat zu drucken
3 - Mach eine PDF-Druckversion

Ich wuerde 1 anstreben, alternativ 2.

Gruesse,

Thomas
  bekennender PDF-Hasser.

[makaio]

Hi Thomas!

8pt ist winzig. Da muss man ja die Lupe nehmen.
Ich wuerde nicht unter 10pt gehen.

Paßt im Rahmen des vorgesehenen Verwendungszweckes und der eingeschränkten Zielgruppe schon. Ansonsten hast du natürlich Recht.

1 - Sorge dafuer, dass Deine Seiten auch im Hochformat druckbar sind

Geht leider nicht, da ich die Informationen eines Datensatzes unmöglich auf 600px Breite verteilen kann. Und die Daten über mehrere Zeilen auszugeben geht auch nicht.

Thomas
  bekennender PDF-Hasser.

Nur mal so aus persönlichem Interesse: warum?

Gruß,

Matthias

[Thomas Luethi]

Hallo,

8pt ist winzig. Da muss man ja die Lupe nehmen.
Paßt im Rahmen des vorgesehenen Verwendungszweckes und der eingeschränkten Zielgruppe schon. Ansonsten hast du natürlich Recht.

Achso, Deine Zielgruppe besteht zu 100% aus Teenagern mit Adleraugen.
Schoen fuer Dich...

bekennender PDF-Hasser.
Nur mal so aus persönlichem Interesse: warum?

PDF kann nicht vom Browser selbst angezeigt werden, braucht also ein Plug-In.

PDF ist langsam.

Zahlreiche Dinge funktionieren im Adobe Acrobat Reader (Plugin) nicht so,
wie ich es von _allen_ uebrigen Programmen gewohnt bin.
Z.B. Markieren und Copy-Paste ist total umstaendlich und nicht intuitiv.
Suchen und Weitersuchen ebenso.

Im Browser kann ich einstellen, dass nur meine Lieblingsschrift verwendet werden soll,
z.B. weil die Arial haesslich ist und ich Anti-Aliasing nicht ausstehen kann..
In PDF hat der Autor die volle Kontrolle ueber die Schriften.

Mozilla: Wenn das PDF in einem Browser-Unterfenster ("Tab") im Plug-In angezeigt wird,
funktionieren manche Tastaturkombinatinen des Browsers (z.B. Ctrl-T, um einen
neuen Tab zu oeffnen) ploetzlich nicht mehr, und ich muss die Maus nehmen.

u.s.w.

Kurz: HTML ist IMHO 1000x benutzerfreundlicher.

Eine PDF-Druckversion wuerde ich hoechstens als _Zusatzversion_ anbieten,
aber saemtliche Infos unbedingt auch als HTML anbieten.

Lies dazu auch Jakob Nielsens Meinung:
http://www.useit.com/alertbox/20030714.html
http://www.useit.com/alertbox/20010610.html
Deutsche Zusammenfassung:
http://www.pdfnews.de/talkback/992815302,4923,.shtml

Gruesse,

Thomas

[Rouven]

Hi!

Hallo,

8pt ist winzig. Da muss man ja die Lupe nehmen.
Paßt im Rahmen des vorgesehenen Verwendungszweckes und der eingeschränkten Zielgruppe schon. Ansonsten hast du natürlich Recht.

Achso, Deine Zielgruppe besteht zu 100% aus Teenagern mit Adleraugen.
Schoen fuer Dich...

Na ja, also die normalen Behördenformulare und alle Formulare meines Arbeitgebers sind auch "nur" in Schriftgröße 8 - Damit verlangt man also von allen Mitarbeitern auch bis ins hohe Alter, dass sie das ausfüllen können...
Und glaub mir, an anderer Stelle legen die viel Wert auf Ergonomie...

MfG
Rouven

[at]

Hallo.

PDF kann nicht vom Browser selbst angezeigt werden, braucht also ein Plug-In.

Dies gilt auch für SVG, MNG etc. Dies liegt an deinem Browser, nicht an PDF.

PDF ist langsam.

Unter Mac OS X basiert die gesamte Bildschirmanzeige auf PDF und ist eigentlich nicht bemerkenswert langsam. (http://www.apple.com/de/macosx/panther/preview.html)

Zahlreiche Dinge funktionieren im Adobe Acrobat Reader (Plugin) nicht so,
wie ich es von _allen_ uebrigen Programmen gewohnt bin.

Das geht mir bei einigen Browsern ganz ähnlich.

Kurz: HTML ist IMHO 1000x benutzerfreundlicher.

PDF verzichtet zumindest auf PopUps und ähnlichen Unsinn.
Ich propagiere PDF sicher nicht als HTML-Ersatz, bekenne mich aber zumindest PDF-neutral :-)
MfG, at