@media print - Probleme mit leeren Flächen

[Ingrid]

Hallo,

ich bin neu auf dem Forum und möchte Euch erst einmal begrüssen und sagen, dass ich Selfhtml wirklich toll finde.

Allerdings habe ich ein Problem. Der Hintergrund ist, dass ich derzeit HTML nicht für das Internet benutzen möchte, sondern um schöne Dias — als Alternative zu Powerpoint — zu erstellen. Das klappt auch ausgezeichnet, ... dank Grid-System.

Das Problem ist, dass sich die Dias nicht in der gewünschten Weise ausdrucken lassen; die Platzanordnung funktioniert nicht: Riesige weisse Flächen tun sich auf.

Kurzbeschreibung der Dias: Oben eine Art Header mit Überschrift usw., darunter 2 Reihen mit jeweils 3 Spalten mit verschiedenfarbigem Hintergrund: grid-template: "oben oben oben" "eins zwei drei" "vier fünf sechs"; innerhalb der 6 Felder jeweils eine kleine Tabelle mittels: <table><tr><td> usw .

Ich habe es geschafft, in der Druckversion mittels @media print die Schriftgrösse nach Wunsch zu dimensionieren und die Schriftart zu verändern usw.; aber der Text lässt sich auf dem Papier nicht so anordnen, wie ich es möchte: Nach der Überschrift ist nach unten hin erst einmal ein paar Zentimeter weisse Fläche, bevor die ersten 3 Tabellen erscheinen (diese, wie gewünscht, in einer Reihe). Danach ist nach unten hin mehr als die halbe Seite frei; die zweite Reihe Tabellen befindet sich dann erst oben auf Seite 2. Dabei würden die 6 Tabellen mit Leichtigkeit auf eine Seite passen.

Daraufhin habe ich mit margin und padding herumversucht, die Abstände zu verkleinern, aber es hilft nichts.

Anschliessend habe ich versucht, in der Druckversion das Grid-System abzuschaffen - Ergebnis: Sämtliche Tabellen ordnen sich untereinander an.

Es hat auch nichts geholfen, den Tabellen den Stil display: inline–block zuzuweisen.

Wer kann mir eine Lösung vorschlagen, wie sich die riesigen Abstände verkleinern lassen, so dass die 6 Tabellen alle auf eine Seite passen (jeweils 3 in eine Reihe)?

Danke im voraus.

Ingrid

[Matthias Apsel]

Hallo Ingrid,

innerhalb der 6 Felder jeweils eine kleine Tabelle mittels: <table><tr><td> usw .

Das müffelt nach Layouttabelle.

Wer kann mir eine Lösung vorschlagen, wie sich die riesigen Abstände verkleinern lassen, so dass die 6 Tabellen alle auf eine Seite passen (jeweils 3 in eine Reihe)?

Stell bitte ein online-Beispiel zur Verfügung. Zum Beispiel auf bplaced.net mit Bildern von lorempixel.com.

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

lorempixel.com.

ist offline.

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

lorempixel.com.

ist offline.

Gut zu wissen, danke. Dann eben placeholder.com.

Bis demnächst
Matthias

[beatovich]

hallo

Wer kann mir eine Lösung vorschlagen, wie sich die riesigen Abstände verkleinern lassen, so dass die 6 Tabellen alle auf eine Seite passen (jeweils 3 in eine Reihe)?

Als Abhilfe kann ich dir nur raten, die Tabellen mit width:33% zu floaten. (spart zusätzliches Markup)

[Rolf B]

Hallo beatovich,

du meinst: wenn schon Kuddelmuddel, dann auch richtig wirr?

Rolf

[beatovich]

hallo

du meinst: wenn schon Kuddelmuddel, dann auch richtig wirr?

Hast du einen konkreten Fix?

[Rolf B]

Hallo beatovich,

nein, weil ich das Markup nicht habe und mir dafür im Moment auch die Zeit nicht nehmen kann.

Wirr finde ich jedenfalls den Ansatz, eine Seite mit einer Mischung aus table-Layout und float zu gestalten.

Wenn man schon mit grid anfängt, sollte man es auch damit sauber durchziehen.

Rolf

[beatovich]

hallo

Wirr finde ich jedenfalls den Ansatz, eine Seite mit einer Mischung aus table-Layout und float zu gestalten.

Es handelt sich nicht um ein table Layout! Lesen hilft.

[Rolf B]

Hallo beatovich,

gelesen habe ich. Aber möglicherweise falsch verstanden...

innerhalb der 6 Felder jeweils eine kleine Tabelle mittels: <table><tr><td>

Wenn's eine Dia-Show ist, was hat da eine Table zu suchen? Ob es ein Mix aus Grid- und Table-Layout ist, oder die Tables semantische Berechtigung haben, kann aber nur ein veröffentlichtes Markup zeigen.

Und man müsste wissen, welcher Browser verwendet wird. Vielleicht ist es ja ein Bug.

Rolf

[Ingrid]

Hallo,

danke an Euch alle. Ich habe die Idee von beatovich aufgegriffen, und das Ergebnis hat sich bereits ein Stück weit verbessert. Allerdings beherrsche ich bisher float noch nicht so gut und muss es erst vertiefen.

Inzwischen habe ich auch noch in andere Richtungen hin probiert und irgendwie eine Lösung gefunden, die mich vorläufig halbwegs zufriedenstellt. Aber richtig verstanden habe ich nicht, warum es plötzlich besser klappt.

Danke auch für den Hinweis zu den Seiten, wo man seine Versuche zur Ansicht einstellen kann. Im Augenblick werde ich allerdings erst einmal selbst weiterprobieren, damit ich nicht Eure Hilfe unnötig in Anspruch nehmen muss. Es kann sein, dass ich später noch einmal darauf zurückkomme.

Zu Euren allgemeinen Anmerkungen: Das Layout für die Bildschirmversion habe ich mittels Grid-System geschaffen; und die Tabellen (table) innerhalb der Grid-Felder sind echte semantische Tabellen (mit einzelnen Wörtern pro Tabellenfeld).

Und wenn sich manch einer wundert, warum ich so etwas bei Dias mache: Ich erstelle keine Produktpräsentationen, sondern bin im Bildungsbereich tätig; und da ist es manchmal sinnvoll, ein paar Tabellen nebeneinander an die Wand zu projizieren.

Im Übrigen bin ein kein Profi in Informatik, sondern versuche, mir einiges autodidaktisch beizubringen. Und übers Thema @media print habe ich bisher nicht die passende Literatur gefunden (ich meine, solche, die das Layout gut erklärt). Wahrscheinlich sind mir viele von Euch im Forum um Welten voraus.

Bis irgenwann
Ingrid

[Rolf B]

Hallo Ingrid,

ich habe mal ein bisschen gefummelt. Bei mir gibt's keine Probleme. D.h. ich habe dein Problem vermutlich nicht vollständig erfasst...

Ich habe ein Page-Layout mit Grid. Es gibt Header, Footer und 6 figures, in denen die Dias stehen. Die Zahl 6 ist das Maximum pro Seite.

Als Print-Sonderlocke habe ich den Font des Header geändert.

Header und Footer sind im Grid fest platziert (Zeile 1 und 4, jeweils über alle Spalten), die figures ordnen sich dann automagisch in den restlichen Zellen an.

Statt img habe ich Divs als Platzhalter gesetzt. Im Bild 2 habe ich eine Table eingebaut. Damit die figcaptions immer schön unten stehen, habe ich etwas Höhenarithmetik hinzugefügt. Könnte man sicher auch anders machen.

Was fehlt in meinem Beispiel, um deine Probleme zu reproduzieren?

<!DOCTYPE html>
<html lang="de">
<head>
<title>Dia-Test</title>
<style>
@media print {
  body header {
    font-family: Courier;
  }
}
body, figure {
   margin:0; padding:0;
}
body {
   height: 100vh; 
   display: grid; 
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto repeat(2, 1fr) auto;
}
header {
   font: 200%/2em Verdana,sans-serif;
   grid-row: 1; grid-column: 1 / 4;
   text-align:center;
   background-color: #f90;
}
footer {
   border-top: 1px solid black;
   text-align:right;
   line-height: 2em;
   grid-row: 4; grid-column: 1 / 4;
}
figure { 
   height: 100%;
   padding: 1em; box-sizing: border-box;
}
figcaption {
   text-align:center; margin:0; padding: 0;
   line-height: 2em;
}
figure .content {
   height: calc(100% - 2em); 
}
figure table {
   margin: auto;
   border: 3px solid green;
}
.fakeimg {
   background-color: #ccc;
}
</style>
</head>
<body>
<header>
Meine Welt in Bildern
</header>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content">
<table>
<tr><th>Name</th><th>Funktion</th></tr>
<tr><td>Müller</td><td>Obermahler</td></tr>
<tr><td>Meyer</td><td>Flugzeug-Wartung</td></tr>
<tr><td>Schmitz</td><td>Colonia-Beauftragter</td></tr>
</table></div>
<figcaption>Your Data</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<figure><div class="content fakeimg">:)</div><figcaption>Yet Another Nice Pic</figcaption></figure>
<footer>
Ein Beispiel von Rolf B
</footer>
</body>
</html>

Rolf

[Ingrid]

Hallo Rolf,

vielen Dank für die Arbeit, die Du Dir extra für mich gemacht hast! Mittlerweile habe ich einen Teil der Lösung gefunden … Aber erst einmal der Reihe nach: Ich habe probehalber Deinen Code kopiert und ausprobiert – und bin auf genau das gleiche Problem gestossen, das ich hatte: Der Inhalt erstreckte über 2 Seiten statt einer einzigen. Da ich Dich als grösseren Spezialisten als mich selbst einschätze, habe ich weiterüberlegt und schliesslich daran gedacht, die Seite in einem anderen Browser als vorher auszudrucken, – und siehe da, es hat geklappt: Was in Firefox (neueste Version) sich über 2 Seiten erstreckt, findet in Chrome auf einer Seite Platz.

Auf jeden Fall hast Du dir Dir Deine Mühe nicht umsonst gemacht, denn ich habe nebenbei noch ein paar andere Details gelernt. Also nochmals Danke!

Ingrid

[Rolf B]

Hallo Ingrid,

ich bin jetzt im Urlaub und habe mich vorsätzlich auf Laptopentzug gesetzt. darum kann ich es nicht mit dem Fuchs testen.

vielleicht kann jemand anderes helfen

Rolf

[Matthias Apsel]

Hallo Ingrid,

und bin auf genau das gleiche Problem gestossen, das ich hatte: Der Inhalt erstreckte über 2 Seiten statt einer einzigen.

Der Browser hat Seitenränder definiert. Wenn du die auf Null setzt, passt dein Inhalt auf eine Seite (alt → Datei → Seite einrichten …)

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

ist das ein FF/Chrome Unterschied?

Die Druckränder in Chrome scheinen nicht Teil des Viewport zu sein.

Ich habe meine Seite mit 100vh Höhe definiert und margin+padding vom body entfernt, deswegen füllt sie unter Chrome den bedruckbaren Bereich voll aus.

Rolf

[Matthias Apsel]

Hallo Rolf B,

ist das ein FF/Chrome Unterschied?

Ja.

Die Druckränder in Chrome scheinen nicht Teil des Viewport zu sein.

im FF schon. Das Verhalten des FF scheint mir nicht korrekt zu sein.

Bis demnächst
Matthias