<hr> background in druckvorschau nicht angezeigt

[koe]

Guten Abend,

Ich versuche gerade in CSS eine <hr>-Linie so zu formatieren damit diese einen schwarz ausgemalten Balken darstellt (Trennlinie eines Titels). Dieser Balken möchte ich in der Höhe anpassen können. Er sollte die volle Seitenbreite besitzen.

Dies funktioniert auch wunderbar. Doch sobald ich mir das ganze an der Druckvorschau anschaue, habe ich nur noch einen rechteckigen Kasten statt ein vollen Balken. "background-color: #000000;" Wird mir in der Druckvorschau nicht angezeigt.

Besten Dank für die Hilfe, Koe

body {
	position: absolute;
	width: 210mm;
	height: 100%;
	left: 25%;
	margin-left: 5mm;
    margin-right: 5mm;
	background-color: transparent;
}


h1 hr {
	height: 5mm;
	border-style: solid;
	color: #000000;
	background-color: #000000;
}

@media print {
	/* Muss am ende der CSS bzw nach der "body" deklaration erfolgen */
	body {
	position: relative;
	left: 0%;
	}
}

[Matthias Apsel]

Hallo koe,

Dies funktioniert auch wunderbar. Doch sobald ich mir das ganze an der Druckvorschau anschaue, habe ich nur noch einen rechteckigen Kasten statt ein vollen Balken. "background-color: #000000;" Wird mir in der Druckvorschau nicht angezeigt.

Wahrscheinlich ist das eine Einstellung der Browser: "Hintergrundfarben und -bilder drucken" oder ähnlich. Der MS Edge druckt(e) grundsätzlich keine Hintergründe.

Ich versuche gerade in CSS eine <hr>-Linie so zu formatieren damit diese einen schwarz ausgemalten Balken darstellt (Trennlinie eines Titels). Dieser Balken möchte ich in der Höhe anpassen können. Er sollte die volle Seitenbreite besitzen.

hr hat die Bedeutung eines inhaltlichen Trenners. Ich glaube nicht, dass du das möchtest. Verwende die CSS-Eigenschaft border, zum Beispiel border-bottom.

PS: Dein CSS ist stark verbesserungswürdig.

• Angaben in mm verwendet man eigentlich nur zum Ausdrucken
• absolute Positionierung des body sorgt dafür, dass der Inhalt wahrscheinlich auf vielen Geräten nicht (oder nur durch Scrollen erreichbar) sein wird
• einen linken Abstand von 25% kannst du auch mit margin erreichen.
• das @media: print muss um die gesamten Angaben

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

hr hat die Bedeutung eines inhaltlichen Trenners. Ich glaube nicht, dass du das möchtest.

Fürs Stylesheet:

:root
{
	--error-color: red;
	--error-outline: 0.5rem solid var(--error-color);
}

h1 + hr,
h2 + hr,
h3 + hr,
h4 + hr,
h5 + hr,
h6 + hr
{
	ERROR: 'separator element `hr` misused for visual presentation';
	outline: var(--error-outline) !important;
}

Ist das nicht schon das dritte Mal in letzter Zeit, dass hr als horizontale Line missdeutet hier im Forum auftaucht?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

:root
{
	--error-color: red;
	--error-outline: 0.5rem solid var(--error-color);
}

h1 + hr,
h2 + hr,
h3 + hr,
h4 + hr,
h5 + hr,
h6 + hr
{
	ERROR: 'separator element `hr` misused for visual presentation';
	outline: var(--error-outline) !important;
}

Ist das nicht schon das dritte Mal in letzter Zeit, dass hr als horizontale Line missdeutet hier im Forum auftaucht?

Ja. In diesem Fall als Nachfahre von h1.

:root
{
	--error-color: red;
	--error-outline: 0.5rem solid var(--error-color);
}

h1 + hr, h1 hr, 
h2 + hr, h2 hr,
h3 + hr, h3 hr,
h4 + hr, h4 hr,
h5 + hr, h5 hr,
h6 + hr, h6 hr
{
	ERROR: 'separator element `hr` misused for visual presentation';
	outline: var(--error-outline) !important;
}

Bis demnächst
Matthias

[dd]

Hi Matthias,

Besten Dank für die Verbesserungsvorschläge. Dies wird nicht im klassischen sinn einen Webseite. Ich möchte per HTML eine Dokumentation von Projekten erstellen. Die Einzelnen Seiten müssen einfach ausdruckbar A4 sein. Daher habe ich die Breite auch in 210mm Angegeben. Ich werde auch kein Navigationsmenü erstellen sondern Für jedes Thema eine neue HTML Seite erstellen, diese sollten so gut als möglich Identisch sein.

Da ich ein 24" Monitor besitze möchte ich die komplette 210mm Breite Seite in der mitte des Bildschirms. Daher stellt sich mir nun die Frage was ist nun der richtige weg "margin" oder "left" ?

Leider stosse ich immer wieder auf schwierigkeiten wenn ich nicht in absoluten Angaben die Webseite Programmiere. z.b das ich den Body nicht mittig ausrichten kann. Naja dies könnte auch daher kommen das ich nicht "margin" benutzt habe.

Besten Dank,

Freundliche Grüsse Koe

[koe]

War nicht angemeldet, wusste nicht das man hier Antworten kann ohne sich anzumelden.

""das @media: print muss um die gesamten Angaben""

Wenn möglich musst du mir dies näher erläutern. Weis nicht genau was du mir damit sagen willst.

Gruss, Koe

[Matthias Apsel]

Hallo koe,

""das @media: print muss um die gesamten Angaben""

Wenn möglich musst du mir dies näher erläutern. Weis nicht genau was du mir damit sagen willst.

Eine Angabe wie width:210mm ist eigentlich nur für den Drucker sinnvoll. Deshalb war ich der Meinung, es handelt sich schon um dein Druckstylesheet.

Bis demnächst
Matthias

[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

[koe]

Vielen Dank für die Hilfestellung.

Was ich aber nun nicht begreife ist das "Druckstylesheet". Ist es möglich mehrere Stylesheets in einem HTML Dokument zu laden ? Kommen sich diese nicht in die Quere ?

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="printstyle.css">

Also kann ich diese so einbinden ?

Gruss Koe

[Robert B.]

Hallo @koe,

schau mal, was im Wiki steht.

Viele Grüße
Robert

[Rolf B]

Yup, und dann noch hier und hier und was weiß ich wo noch 😀

Dieses Thema lässt sich in mehreren Varianten lösen, und ich bin gar nicht sicher, was state-of-the-art ist.

Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann.

Liege ich damit richtig?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann.

Liege ich damit richtig?

Nein.

Als Nutzer möchte man, dass Webseiten möglichst schnell laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. Ein Stylesheet, nicht mehrere. Ein Stylesheet, nicht zwei.

Als Entwickler möchte man, dass Code möglichst wartbar ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: Ein Stylesheet, nicht mehrere. Ein Stylesheet, nicht zwei.

Nicht mehrere <link rel="stylesheet">, nicht @import() im Stylesheet.

In dem einen Stylesheet werden dann per media queries gezielt Angaben für bestimmte Ausgabemedien gemacht. Bspw.

html
{
	background: hsl(0, 0%, 20%);
	color: white;
	font: 1em/1.4 Georgia, serif;
}

@media print
{
	html
	{
		background: white;	
		color: black;
		font-size: 12pt;
	}
}


nav
{
	background: black;
}

nav ul
{
	display: flex;
	list-style: none;
}

@media print
{
	nav
	{
		display: none;
	}
}


a
{
	color: hsl(0, 100%, 70%);
}

a:focus, a:hover
{
	color: hsl(0, 100%, 80%);
}

@media print
{
	a, a:focus, a:hover
	{
		color: inherit;
		text-decoration: inherit;
	}

	a::after
	{
		content: ' (' attr(href) ')';
	}
}

LLAP 🖖

[MudGuard]

Hi,

@media (print)
{
	a, a:focus, a:hover

gilt a:focus bei print dann, wenn man mit dem Finger auf's Papier drückt? Und a:hover bei print, wenn man mit dem Finger drüber ist, aber noch nicht draufdrückt? Kann man bei print für a:focus und a:hover auch andere Regeln angeben als für a? So daß sich die Schrift auf dem Papier umfärbt bei a:focus usw.? 😉

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

@media (print)

funzt nicht. Es muss @media print (ohne Klammern) heißen. In meinem Posting berichtigt.

a, a:focus, a:hover

gilt a:focus bei print dann, wenn man mit dem Finger auf's Papier drückt? Und a:hover bei print, wenn man mit dem Finger drüber ist, aber noch nicht draufdrückt?

Menno, a:focus, a:hover hatte ich extra noch nachträglich hinzugefügt.

Ich würde denken, a:focus gilt dann, wenn man im Browser den Link fokussiert hat während der Print-Befehl ausgeführt wird. Allerdings kommt dann ja das Dialogfenster, das den Fokus aus dem Browserfenster nimmt? Es ist mir noch nicht geglückt, a:focus (oder a:hover) beim Drucken wirken zu lassen.

Was nicht unbedingt heißen soll, dass das wirklich nie der Fall sein kann. Mit a, a:focus, a:hover ist man auf der sicheren Seite.

LLAP 🖖

[marctrix]

Hej Rolf,

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.

In welchen Browsern funktioniert das denn? Einer reicht ja vermutlich, da es angeblich nur um den Ausdruck geht. Aber warum dann html statt PDF?

Marc

[JürgenB]

Hallo,

Dies wird nicht im klassischen sinn einen Webseite. Ich möchte per HTML eine Dokumentation von Projekten erstellen. Die Einzelnen Seiten müssen einfach ausdruckbar A4 sein. Daher habe ich die Breite auch in 210mm Angegeben. Ich werde auch kein Navigationsmenü erstellen sondern Für jedes Thema eine neue HTML Seite erstellen, diese sollten so gut als möglich Identisch sein.

warum dann HTML? Wäre irgendein Office-Programm und dann Export nach PDF nicht die bessere Lösung?

Gruß
Jürgen

[koe]

1. Kann damit gerade meine HTML/CSS kenntnisse Verbessern.
2. Ich bin unabhängig von Office.
3. Kann alles exakt so gestalten wie ich es haben möchte.

PDF währe auch eine Lösung. Nur sobald ich in einem Thema neue Erkenntnisse mache und diese nachtragen möchte wird es relativ mühsam.

Dies sind so meine Hauptgründe.

Gruss, Koe

[Rolf B]

Hallo koe,

1. ist sicherlich eine gute Idee
2. ist ein schwacher Grund. Es gibt Office-Pakete die kostenlos sind und plattformübergreifend verfügbar.
3. ist gar kein Grund; ich würde behaupten, dass Du mit einem Office-Paket genauso viel oder sogar mehr Möglichkeiten hast wie mit HTML/CSS. Wenn du das anders siehst, befindet sich das Defizit^[1] vor dem Bildschirm, nicht im Office-Paket. Zumindest nicht dann, wenn das Ding seinen Namen verdient.

Das Kriterium für die Entscheidung HTML/CSS vs Office-Paket sollte sein, inwieweit Dich die gewählte Lösung bei der Arbeit unterstützt. Wer Dokumente verfasst, sollte sich auf Inhalte konzentrieren. Das gewählte Werkzeug soll nicht vom Inhalt ablenken. Vermutlich wäre ich mit Word viel schneller fertig als mit HTML. Was daran liegen mag, dass mein HTML Toolset suboptimal ist.

Rolf

---

1. Defizit: im Sinne von Erfahrung im Gebrauch der Software ↩︎

[MrMurphy1]

Hallo

Da du das hr-Element offensichtlich zum Layouten mißbrauchst sind deine Probleme nicht weiter verwunderlich. Die Browser versuchen html-Elemente ihrem Sinn nach anzuzeigen, auch beim Drucken.

Am sinnvollsten wäre deshalb das hr-Element einfach wegzulassen. Aber damit bist du erfahrungsgemäß bei solchen Fragen wahrscheinlich überfordert.

Wenn du deine Linie bei voller Druck-Kontrolle beibehalten willst solltst du sie durch eine Grafik im SVG-Format ersetzen.

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

… deine Probleme nicht weiter verwunderlich …

… bist du erfahrungsgemäß … wahrscheinlich überfordert …

Welche Laus ist dir denn über die Leber gelaufen?

Bis demnächst
Matthias