WebDesign by mts

Startseite » usability » Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout

Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout

in Webdesign Tutorial usability, von mts

Kunden wollen den Inhalt ausdrucken und den lesbar. Biete dies mit einer print.css. Auch ausgedruckt noch eine gute Figur machen und dem Inhalt den meisten Platz einräumen.

Drucken und PC sind siamesische Zwillinge. So lernt jeder PC Neuling relativ rasch, dass sich oben Links beim Browser unter dem Wort “Datei” die Druckmöglichkeit versteckt, wenn er das Druckersymbol nicht findet.

Mittlerweile löst es bei vielen Menschen Verwirrung aus, wenn diese Funktion woanders zu finden ist. Wieso auch immer, dies hat sich als (Web)Standard etabliert.

Standards erleichtern uns die Bedienung vieler Geräte deren Hintergrundtechnik wir nicht verstehen, die wir jedoch benutzen wollen und können.

Webstandards sind da nicht anders.

Mit einer print.css kann man das Drucklayout gestalten. Viele Menschen wollen Artikel ausdrucken und dann offline nachlesen.

Oftmals wird dies jedoch zur unendlichen Papierflut, weil man vergaß ein Drucklayout für die eigene Homepage anzugeben. Unabhängig davon weiß jeder aus eigener leidvollen Erfahrung Druckerpatronen sind irr teuer.

Man mag nichts anders als einen Artikel und auf einmal rattert der Drucker 14 Seiten buntest raus. Navigation, Formularfelder etc. kommen gleich mit.

Oder die Homepage hat einen schwarzen Hintergrund mit weißer Schrift. Da ist eine Tintenpatrone schneller leer als man schauen kann…

Drucklayout print.css

Oder Frames- ja es gibt sie noch und dann dort den Inhalt ausdrucken – dies ist die hohe Kunst schlechthin. Portale oder Blogs mit zwei Sidebars – wozu all diese Links ausdrucken?

Wozu Adsense, Banner etc mitdrucken lassen …

Ein Drucklayout anzubieten ist für mich somit einfach ein Akt der Höflichkeit. Webstandard sowieso und außerdem verschwindet dann ganz automatisch wieder eine “Barriere” – also auch ein “Muss” des barrierenfreien WebDesigns.

Wieso heißt die Drucklayout Datei “Print.css”

Einfach damit man als WebDesigner, Webmaster den Durchblick bei all den verschiedenen CSS Dateien nicht verliert.

Man kann sie auch drucklayout.css oder hastenichtgesehen.css nennen, wobei letzteres kaum Widererkennungswert hat…

Wie wirkt diese Print.css

Links oben ist bei 99,999999% aller Browser die Angabe: Datei==>Drucken. [File=>print] Oder der Browser bietet bereits ein Druckersymbol an. Und genau diesen Ausdruck gestaltet eine print.css.

Wie verlinkt man eine Print.css korrekt im HTML Header.

	<link rel="stylesheet"
   type="text/css"
   media="print"
   href="../print.css" />

1. Schriftfarbe, Hintergrundfarbe, Schriftgröße definieren und alle Hintergrundbilder verbieten:

Schriftgröße gibt man für den Druck mit pt angegeben wird. “pt” ist die Angabe aus dem Druck und hat nur dort etwas verloren.;)

Das !important sagt:unbedingt musst Du das tun.

body{
       font:11pt/120% Arial, serif;
       background-color: white !important;
       background-image: none !important;
       color:black;}

2. Floats müssen aufgelöst werden in einer print.css

Die Angabe “float” bewirkt beim Ausdruck ein “Ineinanderfließen” diverser Elemente. Niemand mag, dass das Bild über den Text ausgedruckt wird. D.h. alle Angaben in der normalen style.css durchgehen und überall wo ein “float” vorkommt zusammenfassen und dann verbieten:

z.B.:

dl, 
dt, 
dd {
      float:none !important;}

Wenn jemand etwas ausdrucken mag, dann deswegen, weil ihm der Inhalt interessiert.

Daraus folgt muss alles weggeben, was nicht zum Inhalt gehört.

Display:none

wird der große Freund beim Erstellen einer Print.css.

3. Alles was man nicht ausdrucken mag bei der Anzeige verbieten:

z.B. hier auf WebDesign in de ist dies derzeit (Frühjahr 2007 )

div.footerinnen small,
div.footerinnen img,
.invisible,
.postmeta,
.navigate,
.navigate01,
div.navinnen ul,
.postinnen .sidebar,
.commentline,
.ohne,
#commentform,
.aehnliche,
.top{
             display:none;}

4. Die Links – die Verweise speziell gestalten:

Ein bisschen Farbe darf es schon sein.

a:link,
   a:visited {
         color: #7A1E19;
         background:white;
          text-decoration:none;}

4.a Oft hat man ja Bilder, die als Link genutzt werden:

 
img,
img a:link,
img a:visited{
            border-bottom:1px solid #C30099;
            margin-right:12px;}

4.b. Bei Links kann man auch die URL anzeigen lassen, auch wenn dies nicht jeder Browser kann:

Bei mir sind dies die Links, die in der CSS class “content” zu finden sind. Anpassen nicht vergessen und bitte auch die eigne Domain angeben.

.content a:link:after,
	.content a:visited:after {
   	content: " ("attr(href)")";
   	font-size: 90%;}
 
.content a[href^="/"]:after {
   content: "(http://www.webdesign-in.de" attr(href)")"; }

5. Abkürzungen anzeigen lassen.

Oft ist es sinnvoll die benutzten Abkürzungen auch bei der Print.css anzuzeigen.

 
acronym[title]:after, 
  abbr[title]:after {
            content: ' (' attr(title) ')';}

6. Code speziell gestalten .

Ich habe hier die ganzen Codebeispiele speziell gestaltet. Damit diese Codebeispiele auch im Drucklayout gut aussehen nutze ich diese Angaben:

Eine spezielle Schriftart. Das overflow auto löse ich mit overflow visible wieder auf. Die Höhe soll sich automatisch ergeben. Da ich eine andere Farbe hier anzeigen lasse, gebe ich extra nochmals die Farbe und die Hintergrundfarbe für den Ausdruck an. Sicher ist sicher

pre,
code {
    font:10pt /2em  "Courier New",Courier, monospace;
    color: black;
    background:white;
    margin-left:2px;
   padding:1em;
    border-left: 1px solid #930;
   overflow:visible!important; 
   white-space:normal;
    width:90%;
    height:auto;}

7. Gustostückchen und spezielles nicht vergessen:

Dies ist von Layout zu Layout unterschiedlich.

h1,h2,h3,h4,h5,h6{font-size:13pt;line-height:110%;margin:0;padding:0;}
div.content,
div.contenth {margin-left:0.8em;padding-top:1em;}
h3.comments{font-weight:normal;font-size:11pt;}
body img.wp-smiley {border:none;}

Damit man auch weiß woher man sich was ausgedruckt hat und ich dies nicht dem Zufall überlassen mag, ob jemand die Kopf und Fußzeile des Standarddrucklayouts beibehalten hat. Habe ich im Footer hier den Namen der Domain stehen und den lasse ich auch ausdrucken.

Man könnte natürlich auch ein einfaches, kleines Logo nur für den Ausdruck machen.

Das ganze wirkt recht viel und lang, doch die print.css von WebDesign-in.de sieht derzeit so aus:Es ist eine Textdatei wie alle CSS Dateien:Print.css.

Zusammenfassung der wichtigen Punkte für ein Drucklayout einer print.css.

Was muss die print.css alles angeben, damit der Ausdruck gut lesbar ist.

• Das Hintergrundbild und das Logo ist unnötig. Besser ist ein weißer Hintergrund eine schwarze Schriftfarbe.
• Die versteckten Anweisungen sind unnötig.
• Ebenso die Navigation.
• Die Anweisung “float” muss aufgehoben werden, damit keine Inhalte überlappen.
• Überschriften und Links im Text benötigen eine andere Farbe.
• Links im Text mag man sichtbar machen, damit der Kunde weiß wo er weiteren guten Inhalt findet. (Dies funktioniert nicht, wenn der Kunde den Internet Explorer nutzt, aber diese Anweisung stört den Browser auch nicht.)
• Die Kommentarfelder sind unnötig.
• Die Angabe wo was wann abgespeichert wurde und die Hinweise auf die Kommentarfunktion sind unnötig.
• Die Breite des Inhaltes muss vergrößert werden, um die volle Breite einer A4 Seite auszunutzen. Oder zumindest nicht unnötig verkleinern.
• Die Schriftgröße muss für Printmedien angegeben werden also in “pt”.

Andere zum Thema:Print.css und Datei drucken:

1. Alistapart.com . Ein noch immer gültiger Artikel aus dem Jahr 2002!
2. Intensivstation
3. Und natürlich SELFHTML: Print.css

Übesetzungen

Ganz herzlichen Dank an Bohdan Zograf, der diesen Artikel in Belorussian übersetzte. Designcontest.

Artikelhistorie:

Erstfassung:09.10.05
geändert am 14.04.2011 Übersetzung hinzugefügt.

Basis Know-how CSS
Internetmarketing

• Gitarrenakkorde ohne Tabellen-position absolute drucken und Mozilla
• Bild mit Untertitel.
• Links im neuen Fenster

Top

13 zu : Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout