Styl wydruku stron jest nieco zapomniany, niemniej jednak wciąż pozostaje ważny. Wielu ludzi drukuje artykuły by czytać je podczas podróży lub gdy nie mają dostępu do Internetu. Styl wydruku strony niesie zatem wymierne korzyści. Na przykład: czytanie tekstu w formie papierowej jest mniej męczące dla oczu niż czytanie tego samego tekstu na ekranie monitora. Również korzystanie z kursu jest łatwiejsze jeśli masz instrukcje przed sobą na kartce, podczas gdy na monitorze otwarty jest edytor kodu. Dzięki temu nie musisz zmieniać okien dialogowych za każdym razem kiedy chcesz coś sprawdzić. W tym artykule wypunktujemy 10 prostych rad, które pomogą ci w tworzeniu lepszego stylu wydruku strony.

Na wypadek gdybyś zapomniał, poniżej – jak zainstalować styl wydruku strony:

<link real=”stylesheet” href=”print.css” type=”text/css” media=”print” />

Atrybut media=”print” sprawia, że użytkownik nie widzi żadnego stylu zdefiniowanego w pliku print.css

Wymagana jest odrobina uwagi, chociaż, jeśli twój główny styl strony nie posiada atrybutu media, wówczas styl wydruku strony odziedziczy ten styl. By oddzielić je, wpisz swój główny styl w następujący sposób:

<link real=”stylesheet” href=”print.css” type=”text/css”media=”screen” />

A teraz już 10 rad by twój styl wydruku był lepszy.

1. Usuń nawigację.

Jaka jest główna różnica między papierem a komputerem? Papier jest statyczny zaś komputer interaktywny. By interakcję uczynić łatwiejszą, strony internetowe posiadają nawigację, która staje się bezużyteczna na papierze.

Ukryj nawigację i inne części twojej strony, które stają się bezużyteczne na papierze np. paski boczne będące linkami do innych postów. Kod do tego jest bardzo prosty: po prostu ustaw parametr display tych elementów na wartość none.

#nav, #sidebar { display: none; }

2. Powiększ obszar zawartości.

Po usunięciu nawigacji i pasków bocznych, treść zajmuje teraz całą stronę. Sprawia to, że wydruk przypomina teraz zwykły dokument a nie jest jak papierowa wersja strony internetowej.

Wszystko co musimy uczynić by zwiększyć treść jest zresetowanie floatów, usunięcie wszystkich marginesów oraz ustawienie szerokości na 100%.

#content { width: 100%; margin: 0; float: none; }

3. Wyzeruj kolory tła.

Większość przeglądarek ignoruje właściwości tła by oszczędzać tusz. Ale by być pewnym, że wyjściowe tło jest białe, możemy ustawić body na kolor biały i nadać każdemu elementowi na stronie biały kolor tła.

body { background: white; }
#content { background: transparent; }

4. Wyzeruj kolory tekstu.

Po zresetowaniu tła pojawia się kolejny problem. Co jeśli na końcu postu masz ciemno-szary obszar z cytatem , z tekstem wypisanym jasno-szarym lub białym kolorem? Ponieważ tło jest ustawione teraz na białe, informacja ta będzie niewidoczna. By poradzić sobie z tym, zmień wszystkie lekko kolorowe teksty na ciemniejsze: czarne lub ciemnoszare.

#author { color: #828282; }

5. Wyświetl całe adresy stron, do których się odnosisz.

Ponieważ papier nie jest interaktywnym medium, czytelnik nie może po prostu kliknąć na link by uzyskać więcej informacji.

Powiedzmy, że ktoś czyta wydruk dotyczący fascynującego nowego produktu. Widząc „kliknij tutaj by uzyskać więcej informacji” mógłby się nagle zirytować, czyż nie? Jest to łatwe do poprawienia poprzez dodanie linku do strony odniesienia po standardowym tekście, co dałoby w rezultacie coś takiego:

„kliknij tutaj by uzyskać więcej informacji (http://www.contip.net/dokladne-informacje.html)”.

Co więcej, w przeglądarkach obsługujących CSS 2, jest to do zrobienia w zwykłym starym CSS. Poniżej kod:

a:link:after { content: " (" attr(href) ") "; }

Możesz również uwypuklić adres odnośnika poprzez zmniejszenie czcionki, kursywę lub cokolwiek innego.

6. Spraw by linki wyróżniały się z regularnego tekstu.

Czytelnicy powinni z łatwością wyróżniać linki od regularnego tekstu. Podstawowe sposoby wyróżniania : preferowany jest niebieski kolor i podkreślenie, ale ja również używam pogrubienia.
Pamiętaj, że dokumenty są zwykle drukowane w odcieniach szarości. Nie polegaj jedynie na różnicy kolorów. Poniżej jest kod dla sensownego wydruku linków:

a:link { font-weight: bold; text-decoration: underline; color: #06c; }

#0066cc jest świeżym niebieskim kolorem, który wygląda jak #999999 kiedy drukowany jest w odcieniach szarości. Dlatego z tym kodem linki będą dobrze wyglądać podczas wydruku w kolorze, jak również podczas wydruku czarno-białym. Będą się wyróżniać od reszty tekstu.

7. Co z rozmiarem czcionki?

W druku, czcionka w rozmiarze 12 jest standardem. Ale jak przetłumaczyć to do CSS-a? Niektórzy uważają, że ustawienie czcionki na 12 punktów jest wystarczające. Inni polecają ustawienie jej na 100%. Jeszcze inni radzą w ogóle nie deklarować wielkości czcionki w stylu wydruku ponieważ nie uwzględnia to oczekiwań użytkownika.

W większości przypadków używamy czcionki 12-ki:

p { font-size: 12pt; }

8. Co z czcionką?

Większość ludzi preferuje czcionki szeryfowe ponieważ mniej męczą oczy, łatwiej się je czyta itd. Ustawienie rodziny czcionek na szeryfowe w stylu wydruku jest prawdopodobnie dobrym pomysłem, chociaż niektórzy czytelnicy mogą być zaskoczeni, że czcionka na wydruku jest inna niż znajdująca się na stronie internetowej.

body { font-family: Georgia, 'Times New Roman', serif; }

Jednym z zysków płynących z właściwości czcionek w CSS 3 jest fakt, że drukowane mogą być również czcionki specjalne, co sprawia, że wydruk przypomina twoją stronę internetową.

9. Mój blog posiada wiele komentarzy. Co powinienem zrobić?

Decyzja należy do ciebie. Z jednej strony, pomyśl ile drzew ocalisz dodając #comments { display: none; } do stylu wydruku. Z drugiej strony, komentarze na niektórych blogach są bardzo cenne i prowadzą do wspaniałych dyskusji. Przez przesunięcie komentarzy na osobną stronę dajesz użytkownikom wybór dotyczący ich wydruku. CSS posiada właściwość, która czyni to bardzo prostym:

#comments { page-break-before: always; }

Jeśli twój artykuł ma na przykład dwie i pół strony, komentarze mogą wyświetlać się od strony 4 do, powiedzmy, 6. Użytkownicy będą mogli wybrać, które strony mają zostać wydrukowane, bez straty informacji.

10. Dołącz wiadomość pojawiającą się tylko na wydruku.

“Dziękuję za wydrukowanie tego artykułu! Zapraszam na mojastrona.com po świeże artykuły.”

Dlaczego by nie umieścić takiej informacji na wydruku? Możesz też poprosić czytelników by zadbali o środowisko poprzez recykling papieru. Prośba może wyglądać tak: „Dziękuję za wydrukowanie tego artykułu! Nie zapomnij proszę wrócić na mojastrona.com po świeże artykuły.”

#printMsg { display: block; }

Możesz dodać do niej nieco stylu, np. jedno-pikselową ramkę. Nie zapomnij dodać #printMsg { display: none; } do swojego zwyczajnego stylu strony by nie zmylić odwiedzających.

Żródło: SmashingNetwork

Podobne wpisy:

1. 10 sposobów no to, żeby Twoja strona HTML była dostępna przy wykorzystaniu standardów Web Jedną z najważniejszych rzeczy, które należy wziąć pod uwagę przy...
2. Jak przywiązać klientów do własnej strony? Jak zachęcić ich do powrotu na stronę Twojej firmy? Wygląd strony i projekt strony www to tylko część jej...