Print CSS

[Ole]

Hallo,

ich bastel grade an der Printausgabe einer Bestellbestätigung und stoße bei mehrseitigen Ausdrucken auf ein Problem.

Der Aufbau der Seite entspricht einem klassischen Lieferschein mit Firmen-Branding.

• Kopfzeile mit Logo etc. (auf jeder Seite)
• Fußzeile mit Firmendaten, Bankverbindung etc. (auf jeder Seite)
• Kopfinformationen: Lieferadresse, Rechnungsadresse etc. (nur auf der ersten Seite)
• Tabelle mit den bestellten Produkten (kann sich auf 1-X Seiten erstrecken)

Kopf- und Fußzeile auf jeder Seite anzuzeigen ist kein Problem, Dank "position: fixed"

Der Problem ist die Tabelle.

1. Wird die Tabelle länger als der Platz zwischen Kopfinformationen und Fußzeile, läuft sie über der Fußzeile weiter.

2. Erstreckt sich die Tabelle über mehrere Seiten, fließt sie natürlich sowohl über Kopf- also auch Fußzeile.

Wenn ich der Seite mittels "@page" ein Margin mitgebe werden logischerweise auch Kopf- und Fußzeile davon betroffen.

Wie bekomme ich es hin, dass Kopf- und Fußzeile nicht von der Tabelle und ggf. weiteren Inhalten der Seite wie Textabsätzen, überflossen werden?

Danke & Gruß
Ole

[Matthias Apsel]

Om nah hoo pez nyeetz, Ole!

Ich kann dich nur ganz unspezifisch auf den Working Draft Paged Media verweisen.

Matthias

[Ole]

Hallo Matthias,

vielen Dank. Die Seite ist mir wohl bekannt. Jedoch ist die Unterstützung der dargestellten Techniken doch eher mau. Da zu meiner Zielgruppe auch IE7-User gehören (müssen), fällt der Einsatz leider flach.

Danke & Gruß
Ole

[Matthias Apsel]

Om nah hoo pez nyeetz, Ole!

vielen Dank. Die Seite ist mir wohl bekannt. Jedoch ist die Unterstützung der dargestellten Techniken doch eher mau. Da zu meiner Zielgruppe auch IE7-User gehören (müssen), fällt der Einsatz leider flach.

Ich würde versuchen, solche Elemente zu verwenden, die die Browser etwas stärker zum Zeilenumbruch motivieren.

• mehrere tbody-Elemente
• Verzicht auf die Tabelle.

Matthias

[Ole]

Hallo Matthias,

Ich würde versuchen, solche Elemente zu verwenden, die die Browser etwas stärker zum Zeilenumbruch motivieren.

• mehrere tbody-Elemente
• Verzicht auf die Tabelle.

Eine tabellarische Auflistung von Produkten bzw. Produktmerkmalen ohne eine Tabelle würde einen enormen Mehraufwand bedeuten um den Anschein von Spalten zu erhalten. Es soll ja schon einen den Kunden vertrauten Anblick haben.

Danke & Gruß
Ole

[Matthias Apsel]

Om nah hoo pez nyeetz, Ole!

Eine tabellarische Auflistung von Produkten bzw. Produktmerkmalen ohne eine Tabelle würde einen enormen Mehraufwand bedeuten um den Anschein von Spalten zu erhalten. Es soll ja schon einen den Kunden vertrauten Anblick haben.

Schon klar. Deshalb ja auch der erste Versuch mit

• mehrere tbody-Elemente

Matthias

[Ole]

Hallo Matthias,

Schon klar. Deshalb ja auch der erste Versuch mit

• mehrere tbody-Elemente

Kannst du das näher erläutern? Ich habe schon beispielsweise probiert um jede Zeile ein tbody zu packen, hat aber bisher nichts geändert.

Danke & Gruß
Ole

[Matthias Apsel]

Om nah hoo pez nyeetz, Ole!

Kannst du das näher erläutern? Ich habe schon beispielsweise probiert um jede Zeile ein tbody zu packen, hat aber bisher nichts geändert.

Ja, das war auch meine Idee. Schade, dass es nichts bringt. Als nächstes würde ich dann probieren, die Tabelle in mehrere Tabellen zu zerlegen.

Matthias

[Ole]

Hallo Matthias,

Ja, das war auch meine Idee. Schade, dass es nichts bringt. Als nächstes würde ich dann probieren, die Tabelle in mehrere Tabellen zu zerlegen.

Mit welchem Ziel?

Der Vorteil der Tabelle ist, dass, wenn diese sich auf mehrere Seiten erstreckt, beim Druck der Header und der Footer auf jede Seite gedruckt werden. Im Falle dieser Produkttabelle ist das sehr hilfreich für die Spaltenüberschriften. Dieser Vorteil würde bei mehreren Tabellen wegfallen.
Ich könnte mir nur vorstellen für jede Seite die länge jeder einzelnen Tabelle zu berechnen. Das halte ich jedoch nicht für praktikabel.

Das Prinzip kann man sich auch für den Druck zu Nutze machen, in dem man eine Layouttabelle erstellt in welcher <thead> den Dokumentenkopf, <tfoot> den Dokumentenfuß und <tbody> den Dokumentenkörper enthält.
Es wäre also ein Workaround für mein Problem, jedoch hat auch dies Methode einen Haken. Ist die Seite nicht ganz gefüllt, wird der <thead> direkt hinter das Ende des <tbody> gestellt und nicht als Dokumentenfuß dargestellt. Das kann im Extremfall dazu führen, dass direkt nach dem Dokumentenkopf eine Zeile Text stehe und dann der Dokumentenfuß anfängt. Auch unschön.

Danke & Gruß
Ole

[Matthias Apsel]

Om nah hoo pez nyeetz, Ole!

Der Vorteil der Tabelle ist, dass, wenn diese sich auf mehrere Seiten erstreckt, beim Druck der Header und der Footer auf jede Seite gedruckt werden.

Ja, aber du hast das Problem, dass der Seitenumbruch nicht so funktioniert, wie du möchtest. Mein (nach wie vor ungetesteter) Gedanke war, dass Browser möglicherweise einen Seitenumbruch wählen, wenn ein Element "zu Ende ist". So _könnte_ man etwa serverseitig dafür sorgen, dass eine Tabelle maximal fünf Inhaltszeilen haben darf und für eine sechste eine neue Tabelle begonnen wird. Und _vielleicht_ wird diese Tabelle dann in manchen Browsern auf einer neuen Seite dargestellt. Aber du hast sowieso wenig bis keinen Einfluss auf das Ausgabemedium. Vielleicht druckt jemand auf A3, blendet Grafiken und Hintergründe aus, auch ein Printstylesheet kann durch Userstyles überschrieben werden, Mindestschriftgrößen, ...

Und da du nicht auf die von mir bereits verlinkten CSS3-Features nicht zurückgreifen möchtest, was du vielleicht für moderne Browser trotzdem tun solltest, bleibt dir nicht viel mehr als mit solchen Sachen zu experimentieren.

Ist halt mit PDF einfacher zu lösen.

Matthias

[hotti]

hi,

ich bastel grade an der Printausgabe einer Bestellbestätigung und stoße bei mehrseitigen Ausdrucken auf ein Problem.

Mach's mit PDF.

Der Aufbau der Seite entspricht einem klassischen Lieferschein mit Firmen-Branding.

Klassischer Fall für PDF ;)

Hotti

[Ole]

Hallo,

Mach's mit PDF.

Grade das möchte ich ja vermeiden. In der aktuellen Systemlandschaft müsste ich die Daten via XSL FO aufbereiten und das ist nun wirklich die Pest. Und die Systemlandschaft wird sich für mich nicht ändern um z.B. eine simple HTML2PDF Transformation, PDF-Printer oder ähnliches zu implementieren.

Klassischer Fall für PDF ;)

Nur weil es ein "klassischer Fall" ist, ist es imho keine gute Lösung. Dem Kunden soll explizit die Möglichkeit zum Ausdruck angeboten werden. Der Weg über ein PDF wäre aber ein Umweg.

Danke & Gruß
Ole

[ChrisB]

Hi,

Wenn ich der Seite mittels "@page" ein Margin mitgebe werden logischerweise auch Kopf- und Fußzeile davon betroffen.

Und wenn du versuchst, dass durch negative margins für Kopf- und Fusszeile wieder auszugleichen?

MfG ChrisB

[Ole]

Hallo ChrisB

Und wenn du versuchst, dass durch negative margins für Kopf- und Fusszeile wieder auszugleichen?

Wenn ich

  
@page { margin: 2cm 0 5cm;}  

versuche auszugleichen mit

  
#kopfzeile {position: fixed; top: -2cm;}  
#fusszeile {position: fixed; top: -5cm;}  

Sind die Abstände zwar korrekt, die Inhalte von Kopf- und Fußzeile sind jedoch nicht sichtbar.

Danke & Gruß
Ole

[ChrisB]

Hi,

Wenn ich

@page { margin: 2cm 0 5cm;}

>   
> versuche auszugleichen mit  
>   
> ~~~css
  

> #kopfzeile {position: fixed; top: -2cm;}  
> #fusszeile {position: fixed; top: -5cm;}  
> 

Sind die Abstände zwar korrekt, die Inhalte von Kopf- und Fußzeile sind jedoch nicht sichtbar.

Ich meinte eigentlich negative margins statt top.
Und wenn du statt margin für page ein padding nimmst?

MfG ChrisB

[Ole]

Hallo ChrisB

Ich meinte eigentlich negative margins statt top.

Achso ... habe ich jetzt auch probiert, hat das gleiche Ergebnis.

Und wenn du statt margin für page ein padding nimmst?

Das wird anscheinend von keinem mir getesteten Browser unterstützt. Beim Druck wurde es zumindest nicht berücksichtigt.

Danke & Gruß
Ole

[Matthias Apsel]

Om nah hoo pez nyeetz, Ole!

Und wenn du statt margin für page ein padding nimmst?

Das wird anscheinend von keinem mir getesteten Browser unterstützt. Beim Druck wurde es zumindest nicht berücksichtigt.

Das ist auch lt. Spezifikation nicht vorgesehen. Es geht um den Außenabstand des Inhalts. Nicht um den Innenabstand des Ausgabemediums.

Matthias

[Ole]

Um euch mal zu zeigen wie ich es im Moment probiere, hier ein bisschen Beispielcode. Ich hoffe ich habe nichts Relevantes vergessen.

  
<div id="header"><img src="bild.png" alt=""></div>  
<div id="footer"><p>Jede Menge Text</p><p>Noch mehr Text.</p></div>  
<h1>Lieferadresse</h1>  
<p>  
Musterfirma<br>  
Max Mustermann<br>  
Musterstraße XX<br>  
12345 Musterstadt  
</p>  
<h1>Rechnungsadresse</h1>  
<p>  
Musterfirma<br>  
Max Mustermann<br>  
Musterstraße XX<br>  
12345 Musterstadt  
</p>  
<table>  
  <thead>  
    <tr>  
      <th>Stk.</th>  
      <th>Art.Nr.</th>  
      <th>Bezeichnung</th>  
      <th>Preis Stk.</th>  
      <th>Preis Ges.</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>XXX</td>  
      <td>XXXXXXXXXX</td>  
      <td>Lorem Ipsum [...]</td>  
      <td>XX.XXX,XX €</td>  
      <td>XXX.XXX,XX €</td>  
    </tr>  
    [...]  
  </tbody>  
</table>  

  
#header {position: fixed; top:0; text-align: right;}  
#footer {position: fixed; bottom: 0;}