Jak wiemy przy osadzaniu na stronie CSS, możemy ustalić medium, dla którego ten arkusz obowiązuje. Możemy wybierać z: screen, print, aural, braille, embossed, handheld, projection, tty, tv.
Dziś zajmiemy się użyciem arkuszy dla druku.
Arkusz taki definiujemy w taki sposób:
<style type="text/css" media="print"></style>
taki:
<link rel="stylesheet" href="css.css" media="print" /gt;
albo taki:
<style type="text/css">
@import url(css.css) print;
</style>
Ostatnia konstrukcja nie działa na tych gorszych przeglądarkach. ;)
Jest jeszcze jedna możliwość - można w jednim pliku zawrzeć także instrukcje dla medium drukowanego zawierając zasady dla niego w @media print{}, lecz ja jestem zwolennikiem tworzenia osobnych arkuszy dla ekranu i druku.
1. Układ strony
Użytkownik drukujący naszą stronę, raczej nie chce marnować tuszu na ozdobny nagłówek, menu, stopkę. Dlatego można je ukryć za pomocą display:none;. Najlepiej ukryć wszystkie obrazki, które nie muszą być wydrukowane, wyświetlając sam tekst nagłówka/stopki. Menu jest całkowicie zbędne na kartce papieru.
div#header,div#menu,div#footer{
display:none;
}
2. Linki
Najlepiej aby linki nie wyróżniały się za bardzo z tekstu, wystarczy podkreślenie. W przeglądarkach potrafiących użyć generated content, możemy w nawiasie podać adres linku:
div#content a:after{
content:" (" attr(href) ") ";
font-size:.85em;
color:#444;
}
Ograniczyliśmy się tylko do linków występujących w treści strony, mozna ograniczyć to jeszcze bardziej - tylko do linków zewnętrznych.
div#content a[href^="http://"]:after{
content:" (" attr(href) ") ";
font-size:.85em;
color:#444;
}
To wyrażenie należy do CSS3, więc walidator nam trochę pokrzyczy.
3. Floating
Przeglądarki oparte na gecko (firefox, mozilla, netscape), mają pewien błąd - jeśli na stronie jest jakiś element pływający dłuższy niż jedna strona, to zostanie wydrukowana tylko część z pierwszej strony.
Jedynym rozwiażaniem jestusunięcie pływania dla takiego elementu.
4. Marginesy i rozmiar czcionki
Marginesy najlepiej ustalać procentowo - umożliwia to w miarę dokłądne rozplanowanie miejsca i uniezależnia marginesy od rozdzielczości drukarki (to samo tyczy się pt). Margines po obu stronach kartki powinien mieć 15%.
div#content{
margin:auto 15%;
}
Czcionkę powinno się deklarować w punktach, odwrotnie niż dla ekranu. Na wydruku najlepiej czyta się czcionkę szeryfową, dlatego warto taką ustawić.
body{
font-family:"Times New Roman", Times, serif;
font-size:12pt;
}
Oczywiście można ustawić inny rozmiar, lecz 12pt jest najczęściej spotykany.
5. Inne modyfikacje
Czasami nie chcemy, aby niektóre elementy zostały podczas drukowania dzielone między strony (np. obrazki, nagłówki). Istnieje na so sposób:
h1, h2, h3, h4, h5, h6, img{
page-break-after:avoid;
page-break-inside:avoid;
}
table, pre, blockquote{
page-break-inside:avoid;
}
ul, ol, di{
page-break-before:avoid;
}
Czyli mamy do dyspozycji kilka właściwości: page-berak-before, page-break-after, page-break-inside i wartości, które można im przypisać:
- auto
- inherit
- always - zawsze Å‚amie stronÄ™ w tym miejscu
- avoid - unika Å‚amania strony
- left - Å‚amie po lewej
- right - Å‚amie po prawej
Żeby wydrukować także nagłówek, najlepiej ukryć (visibility:hidden) div z nagłówkiem, a pokazać h1 i zmienić jego text-indent na normalny (jeśli konieczne).
div#header{
visibility:hidden;
}
div#header h1{
text-indent:auto;
visibility:visible;
}
Uważam, że dorobienie CSS dla druku, nie stanowi wiÄ™kszego problemi i nie jest czasochÅ‚onne. WedÅ‚ug mnie bardzo uÅ‚atwia to wydrukowanie strony, oraz oszczÄ™dza papier i tusz/toner na zbÄ™dne elementy, które byÅ‚yby wydrukowane, przy ‘normalnym’ stylu.
A ja bym dodaÅ‚ jeszcze info o @pages bo czas strona potrafi siÄ™ rozjechać (wydrukować na dwóch kartkach) w druku…
Dodam to w drugiej części. Jeśli takowa się ukaże.