CSS - Stylesheets für den Druck: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Hier geht es einerseits um das erstellen von CSS für den media Type "print" - also für die Ausgabe von Webseiten für den Drucker. Aber auch um das Erstellen vo…“) |
|||
| (3 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
Hier geht es einerseits um das erstellen von CSS für den media Type "print" - also für die Ausgabe von Webseiten für den Drucker. Aber auch um das Erstellen von Seiten die beim rauskopieren von Textteilen und wiedereinfügen z.B. in Word, vorhersehbare Ergebnisse bringen. Hierbei bestehen auch Abhängigkeiten von den Browsern. | Hier geht es einerseits um das erstellen von CSS für den media Type "print" - also für die Ausgabe von Webseiten für den Drucker. Aber auch um das Erstellen von Seiten die beim rauskopieren von Textteilen und wiedereinfügen z.B. in Word, vorhersehbare Ergebnisse bringen. Hierbei bestehen auch Abhängigkeiten von den Browsern. | ||
| − | == Druckstylesheets == | + | == Druckstylesheets / Print Styles == |
| + | === Tipps und Tricks === | ||
| + | * Schriftgrößen in pt | ||
| + | * Am Bestem am Ende einfügen, damit bestehende Formatierungen gegebenenfalls leichter überschrieben werden können | ||
| + | |||
=== Snippets === | === Snippets === | ||
| + | |||
| + | Quelle: unbekannt, 02-2013 | ||
Nur falls mal jemand über das Problem stolpert hier die Lösung. | Nur falls mal jemand über das Problem stolpert hier die Lösung. | ||
Die Behandlung von Links fehlt auch noch. Seit Urzeiten nehme ich dieses Snippet: | Die Behandlung von Links fehlt auch noch. Seit Urzeiten nehme ich dieses Snippet: | ||
Code: | Code: | ||
| + | <pre> | ||
a:link:after, | a:link:after, | ||
a:visited:after { | a:visited:after { | ||
| Zeile 35: | Zeile 42: | ||
a {color:#000;text-decoration:none;font-style:italic;} | a {color:#000;text-decoration:none;font-style:italic;} | ||
blockquote {border:3px solid #ccc;padding:0 1.5em;} | blockquote {border:3px solid #ccc;padding:0 1.5em;} | ||
| + | </pre> | ||
| + | |||
| + | == Weitere nützliche Snippets == | ||
| + | <syntaxhighlight lang="css"> | ||
| + | .no-break-inside { | ||
| + | // apply this class to every component that shouldn't be cut off between to pages of your PDF | ||
| + | break-inside: "avoid"; | ||
| + | } | ||
| + | |||
| + | .break-before { | ||
| + | // apply this class to every component that should always display on next page | ||
| + | break-before: "always"; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
== Formatierungen beim Copy und Paste == | == Formatierungen beim Copy und Paste == | ||
=== Besonderheit Firefox === | === Besonderheit Firefox === | ||
| Zeile 44: | Zeile 66: | ||
Dies wirkt sich beim Copy und Paste aus. | Dies wirkt sich beim Copy und Paste aus. | ||
| + | |||
| + | === Kopieren nach Word === | ||
| + | Manchmal nimmt Word Formatierungen nicht mit wenn Sie in Externen Stylesheets stehen. Wenn man dafür sorgen will daß z.B. eine Arial Schrift auch als Arial angezeigt wird und nicht als Times (Standard Schrift in Word) kann man die Style '''Definition direkt im Container Div''' mitgeben. Zu testen wäre ob auch CSS definitionen im Head Bereich der Seite übernommen werden. | ||
| + | |||
| + | Wenn die '''Schriftgröße in pt''' statt in px angegeben wird, dann wird diese auch so ins Word übernommen. | ||
| + | |||
| + | <div style="font-family: arial;font-size: 11pt"><p>Beispieltext</p></div> | ||
Aktuelle Version vom 7. Dezember 2022, 12:17 Uhr
Hier geht es einerseits um das erstellen von CSS für den media Type "print" - also für die Ausgabe von Webseiten für den Drucker. Aber auch um das Erstellen von Seiten die beim rauskopieren von Textteilen und wiedereinfügen z.B. in Word, vorhersehbare Ergebnisse bringen. Hierbei bestehen auch Abhängigkeiten von den Browsern.
Druckstylesheets / Print Styles[Bearbeiten]
Tipps und Tricks[Bearbeiten]
- Schriftgrößen in pt
- Am Bestem am Ende einfügen, damit bestehende Formatierungen gegebenenfalls leichter überschrieben werden können
Snippets[Bearbeiten]
Quelle: unbekannt, 02-2013 Nur falls mal jemand über das Problem stolpert hier die Lösung. Die Behandlung von Links fehlt auch noch. Seit Urzeiten nehme ich dieses Snippet: Code:
a:link:after,
a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
html {
height:100%;
}
body {
color:#000000;
background-color:#ffffff;
text-align:left;
font:12pt georgia,'courier new',serif;
line-height:1.5;
}
* {float:none!important;}
div {width:100%!important;}
#header,#right,#left,#footer,div.pdf_link {display:none;}
img {border:none;}
table {width:100%;}
table th {text-align:left;}
a {color:#000;text-decoration:none;font-style:italic;}
blockquote {border:3px solid #ccc;padding:0 1.5em;}
Weitere nützliche Snippets[Bearbeiten]
.no-break-inside {
// apply this class to every component that shouldn't be cut off between to pages of your PDF
break-inside: "avoid";
}
.break-before {
// apply this class to every component that should always display on next page
break-before: "always";
}
Formatierungen beim Copy und Paste[Bearbeiten]
Besonderheit Firefox[Bearbeiten]
Beim Copy and Paste im Firefox, verändert diese die Formatierungen. Um das zu verhindern gibt es Plugins oder man kopiert ohne Formatierung.
Zeilenabstand[Bearbeiten]
Bei der Definition des Fontsize kann man den Zeilenabstand mitgeben:
font-size: 13px/1.5
Dies wirkt sich beim Copy und Paste aus.
Kopieren nach Word[Bearbeiten]
Manchmal nimmt Word Formatierungen nicht mit wenn Sie in Externen Stylesheets stehen. Wenn man dafür sorgen will daß z.B. eine Arial Schrift auch als Arial angezeigt wird und nicht als Times (Standard Schrift in Word) kann man die Style Definition direkt im Container Div mitgeben. Zu testen wäre ob auch CSS definitionen im Head Bereich der Seite übernommen werden.
Wenn die Schriftgröße in pt statt in px angegeben wird, dann wird diese auch so ins Word übernommen.
Beispieltext
