Ärgerliches Druckproblem mit grid layout und Firefox

Wieder mal was zu Style Sheets und Web Layout.

Ich bin ja noch dabei, die Beschwerden und Fehlerberichte der Leser abzuarbeiten und zu betüddeln. Neulich hatte ich einen „Nee, is kein Bug, des g’hört so.“

Einer hatte aber etwas berichtet, was mich jetzt auch ein paar Stunden Debugging gekostet hat. Der Leser wies darauf hin, dass wenn er Seiten des Blogs ausdruckt, neuerdings ein unschöner Effekt entsteht, denn es kommt die Überschrift, dann bleibt viel weiß und der Text kommt erst auf der nächsten Seite.

Stimmt. Konnte ich nachvollziehen, war mir selbst schon mal aufgefallen. Ich hatte zuerst angenommen, dass das von den Werbeeinblendungen kommt. Es stellte sich aber heraus, dass es auch mit meinen internen Test-Seiten passiert, wenn ich gar keine Werbung drin habe und auch nicht deren Javascript-Code. Daran kann es also nicht liegen.

Nach viel rumprobieren und debuggen und dem typischen Runterstrippen auf das kleinstmögliche und einfachste Exempel bin ich darauf gekommen, dass es sich um einen Bug im Firefox handelt. Denn egal, was man per css style einstellt, unter bestimmten Umständen fängt der immer eine neue Seite an. Also das Grundschema

<div style="display: grid;">
  <div>wenig text<div>
  <div>ganz viel text<div>
</div>

wird dann, wenn ganz viel text für mindestens eine Seite reicht, immer eine neue Seite angefangen, egal wie man die page-break-… Werte setzt. Alle anderen Browser machen ex richtig und fehlerfrei. Und wenn man erst einmal weiß, woran es liegt, findet man auch, dass ich nicht der erste bin, dem das auffällt. Der hier hat es auch schon herausgefunden. Eine Lösung hat der auch nicht gefunden, aber den Workaround, dass er für die Druckausgabe einfach kein grid-layout verwendet, sondern display: block; die Elemente einfach normal untereinander schreibt, weil er beim Drucken eh nur eine Spalte verwendet. Das mache ich genauso. Leider aber geht dabei die Möglichkeit verloren, die Reihenfolge der Elemente per style sheet zu ändern. Man muss die elemente dann in der richtigen Reihenfolge ausgeben, was nicht unproblematisch ist, weil manche Crawler die Style Sheets nicht auswerten und die Webseite nach der Reihenfolge im Text bewerten. Deshalb will man natürlich, dass der eigentliche Inhalt des Blogartikels zuerst kommt, und der Rest dann nachträglich dahinter. Sowas geht dann natürlich nicht, wenn die Reihenfolge stimmen muss.

Jetzt überlege ich, ob ich gar nichts mache und es so lasse, wie es ist, bis Firefox das Problem behebt. Oder ob ich das so abändere, dass für die Druckausgabe kein grid layout mehr verwendet wird.

Man hat’s nicht leicht. Aber leicht hat’s einen.