<hr> background in druckvorschau nicht angezeigt

[Rolf B]

Hallo Koe,

wenn Du unbedingt erreichen willst, dass Bildschirm- und Druckansicht identisch sind, ok, dann kann man über eine Breite in mm reden. Aber die 210mm ergeben keinen Sinn. Je nach Browser und Benutzereinstellungen wird dein Dokument dann für den Druck automatisch skaliert, abgeschnitten oder gekachelt gedruckt. Du gibst nämlich selbst im Druck-Stylesheet nie die Papierbreite an, sondern die Inhaltsbreite. Die Anpassung auf die Papierbreite erfolgt mit margins, bzw. den Browser-Einstellungen.

Du musst beim Drucken auch beachten, dass die von Dir im CSS angegebenen Ränder sich immer innerhalb der vom Drucker gesetzten Ränder bewegen. Ein margin-left:20mm sind auf dem Papier mehr. Das hängt vom Druckertreiber ab, und vielleicht auch vom Browser. Hier musst Du schauen, was für Dich passt.

Meine Empfehlung wäre für den body übergreifend eine Breite von 160-170mm, und im @media print {} Bereich des Stylesheet ein margin-left von 20mm.

Im @media screen {} Bereich des Stylesheet setzt Du für body den Wert margin:auto, dann zentriert er auf dem Bildschirm automatisch. Ist der Bildschirm zu schmal, gibt's einen horizontalen Scrollbar.

Dass Du den <hr> durch ein SVG-Bild oder einfacher durch ein border-bottom am h1 ersetzen solltest, hatten wir ja schon. Befasse Dich für die Druckaufbereitung auch noch mit den CSS Eigenschaften für den Seitenumbruch, um sicherzustellen, dass Überschrift und erster Textabsatz nicht getrennt werden.

Rolf