10 porad dotyczących lepszego drukowania arkuszy stylów
Wydrukowane arkusze stylów zostały nieco zapomniane, a mimo to pozostają ważne. Wiele osób drukuje artykuły do czytania w czasie podróży lub gdy nie mają dostępu do Internetu.
Wydrukuj arkusze stylów mają określone zalety . Na przykład czytanie na papierze jest mniej męczące dla oczu niż czytanie na ekranie.
Ponadto, następujące tutoriale są łatwiejsze, jeśli masz kogoś obok, z edytorem kodu otwartym na ekranie; w ten sposób nie trzeba przełączać okien za każdym razem, aby coś sprawdzić.
W tym artykule wskażemy 10 prostych wskazówek, które pomogą Ci tworzyć lepsze arkusze stylów drukowania .
Jeśli zapomniałeś, oto jak skonfigurować arkusz stylów drukowania:
The media="print" atrybut zapewnia, że użytkownicy nie zobaczą żadnego ze stylów zdefiniowanych w pliku print.css .
Jednak niektóre uwagi są wymagane: jeśli główny arkusz stylów nie ma atrybutu media, arkusz stylów drukowania odziedziczy swój styl. Aby je rozdzielić, ustaw główny arkusz stylów w następujący sposób:
Oto 10 wskazówek, jak zacząć od arkusza stylów drukowania.
1. Usuń nawigację
Jaka jest główna różnica między papierem a komputerem? Papier jest statyczny, a komputer jest interaktywny. Aby ułatwić tę interakcję, strony internetowe mają nawigację, która staje się bezużyteczna na papierze.
Ukryj nawigację i inne części witryny, które stają się bezużyteczne na papierze, takie jak paski boczne, które prowadzą do innych postów. Kod jest bardzo prosty: wystarczy ustawić element display do none .
2. Powiększ obszar zawartości
Po usunięciu nawigacji i paska bocznego nasze treści są teraz rozmieszczone na całej stronie. Dzięki temu arkusz stylów wydruku wygląda bardziej jak zwykły dokument, zamiast papierowej wersji strony internetowej.
Wszystko, co musimy zrobić, aby rozwinąć zawartość, to zresetować float, usunąć wszelkie marginesy i ustawić szerokość na 100%.
[css] #content {width: 100%, margin: 0; float: none;} [/ css]3. Zresetuj kolory tła
Większość przeglądarek ignoruje już właściwości tła, aby zachować tusz. Ale aby upewnić się, że całe tło jest białe, możemy ustawić ciało na białe, a następnie nadać każdemu elementowi dziecięcemu na stronie białe tło.
[css] body {background: white;} # content {background: transparent;} [/ css]4. Resetuj kolory tekstu
Po zresetowaniu tła pojawia się kolejny problem. Co się stanie, jeśli na końcu postów pojawi się ciemnoszare pole "Informacje o autorze" z tekstem jasnoszarym lub białym? Gdy tło zostanie ustawione na białe, ta informacja będzie niewidoczna.
Aby to naprawić, zmień dowolny jasny kolor tekstu na coś ciemniejszego: czarny lub najlepiej ciemnoszary.
[css] #author {color: # 111;} [/ css]
Brać Sam Brown powyższy blog. Czy możesz sobie wyobrazić, jak by to wyglądało, gdyby nie zresetował kolorów tekstu? Naprawdę nieczytelne.
5. Wyświetl miejsce docelowe łączy
Ponieważ papier nie jest medium interaktywnym, czytelnicy nie mogą oczywiście klikać linków, aby zebrać więcej informacji.
Powiedzmy, że ktoś czyta wydruk o nowym, wymyślnym produkcie. Widząc "Kliknij tutaj, aby uzyskać więcej informacji", nagle byłoby to dla nich raczej irytujące, prawda? Można to łatwo naprawić, dodając miejsce docelowe linku po samym tekście łącza, podając coś takiego: "Kliknij tutaj, aby uzyskać więcej informacji (http://hereismore.com/information)."
Co więcej, w przypadku przeglądarek obsługujących CSS 2 można to zrobić za pomocą zwykłego starego CSS. Oto kod:
[css] a: link: after {content: "(" attr (href) ")";} [/ css]Możesz urozmaicić rzeczy mniejszym rozmiarem czcionki, kursywą lub cokolwiek innego.
6. Utwórz linki wyróżniające się na podstawie zwykłego tekstu
Czytelnicy muszą potrafić odróżnić linki od zwykłego tekstu. Obowiązują tu podstawowe zasady użyteczności: preferowane są niebieskie i podkreślenia, ale wolę też dodać pogrubienie.
Pamiętaj, że dokumenty są często drukowane w czerni i bieli. Nie zależą tylko od różnicy kolorów. Oto kod dla sensownych drukowanych linków:
[css] a: link {font-weight: pogrubienie, dekoracja tekstu: podkreślenie; kolor: # 06c;} [/ css]# 0066cc to świeży niebieski kolor i wygląda jak # 999999 po wydrukowaniu w skali szarości. Dzięki temu łącza będą wyglądać dobrze wydrukowane w kolorze lub w czerni i bieli. Będą również wyróżniać się na podstawie zwykłego tekstu.
7. Co z rozmiarem czcionki?
W druku 12 punktów jest standardem. Ale jak przetłumaczyć to na CSS? Niektórzy twierdzą, że ustawienie rozmiaru czcionki na 12 punktów (pt) jest wystarczająco dobre. Inni zalecają ustawienie go na 100%. Inni twierdzą, że w ogóle nie deklarują rozmiaru czcionki w arkuszu stylów wydruku, ponieważ spowoduje to przesłonięcie preferencji użytkownika.
Osobiście używam 12-punktowego rozmiaru czcionki przez większość czasu:
[css] p {rozmiar-czcionki: 12pt;} [/ css]8. Co z czcionkami?
Większość ludzi woli czcionki szeryfowe, ponieważ są mniej męczące dla oczu, lepiej prowadzą czytelnika przez tekst i tak dalej. Ustawianie font-family do serif w arkuszu stylów wydruku jest prawdopodobnie dobrym pomysłem, chociaż niektórzy czytelnicy mogą być zaskoczeni tym, że czcionka na ich wydruku nie jest taka sama jak ta na twojej stronie.
Oto kod dobrego stosu czcionek drukarskich:
[css] body {font-family: Georgia, "Times New Roman", szeryf;} [/ css]
Jedną z zalet właściwości @ font-face CSS 3 jest to, że możesz również drukować specjalne czcionki, dzięki czemu wydruki wyglądają bardziej jak Twoja strona!
9. Mój blog ma dużo komentarzy. Co powinienem zrobić?
To naprawdę twój wybór. Z jednej strony pomyśl o wszystkich drzewach, które będziesz oszczędzał, dodając je #comments { display: none; } do arkusza stylów drukowania. Z drugiej strony komentarze mają dużą wartość na niektórych blogach i zawierają świetną dyskusję.
Przenosząc komentarze na własną stronę, dajesz użytkownikom możliwość wyboru, czy je wydrukować. CSS ma właściwość, która czyni to bardzo prostym:
[css] #comments {page-break-before: always;} [/ css]Na przykład, jeśli twój artykuł ma dwa i pół strony, komentarze będą wyświetlane od strony 4 do, powiedzmy, 6. Użytkownicy będą mogli wybrać strony do wydrukowania, nie tracąc żadnych informacji.
10. Pokaż wiadomość tylko do wydruku
" Dziękuję za wydrukowanie tego artykułu! Proszę nie zapomnieć wrócić do mysite.com po nowe artykuły. "Dlaczego nie wydrukować przyjaznego komunikatu na wydruku? A może poprosić czytelników o recykling papieru, którego używali do ochrony środowiska.
Oto, jak to będzie wyglądać:
Dziękujemy za wydrukowanie tego artykułu. Proszę nie zapomnieć wrócić do mysite.com po nowe artykuły.
[css] #printMsg {display: block;} [/ css] Możesz dodać trochę stylizacji, tak jak 1-pikselowe obramowanie. Nie zapomnij dodać #printMsg { display: none; } do zwykłego arkusza stylów, aby uniknąć dezorientacji odwiedzających.
Gablota
Oto kilka przykładów z dobrze znanych stron internetowych, które pomyślały (lub zapomniały) o arkuszu stylów drukowania. Zapraszam do inspiracji.
Wygląda dobrze:
Oto kilka witryn, które świetnie się spisują w swoich arkuszach stylów drukowania:
24 sposoby : Strona internetowa tego "kalendarza adwentowego dla sieciowych maniaków" ma fantazyjny wygląd, ale zastanawiałem się, jak to będzie wyglądać w druku. Wynik jest naprawdę miły. Zręczne elementy CSS 3 zostały usunięte. Układ jest czysty, a jednocześnie jeszcze śliski. Duże logo zostało usunięte i zastąpione prostym wyrównanym do prawej "24 Ways" obok tytułu postu.
ThinkVitamin : Blog Carsonified to dobry przykład drukowania arkuszy stylów. Brak prawdziwych słabych punktów, z wyjątkiem tego, że miejsce docelowe adresu URL nie jest wyświetlane.
CSS-Tricks : Chris Coyier z CSS-Tricks.com wykonał dobrą robotę ze swoim arkuszem stylu drukowania. Usunął wszystkie bałagany i przeniósł komentarze na nową stronę, więc użytkownicy mogą zdecydować, aby ich nie drukować.
Może wykorzystać trochę pracy
Oto kilka stron internetowych, które są już świetne, ale których arkusze stylów drukowania mogą być trochę po polsku. Bez obrazy dla nikogo w tej sekcji.
Webdesign Ledger : Webdesign Ledger najwyraźniej zaniedbał swój arkusz stylów drukowania. Gdy klikniesz "Drukuj", otrzymasz trzy strony reklam i powiązanych linków.
Konstrukcja kabiny : Wydaje się, że Brian Hoff również zapomniał o swoim arkuszu stylów. Kiedy drukujesz artykuł, otrzymujesz również formularz komentarza.
Flickr : Możliwość wydrukowania zdjęć, aby pokazać znajomym, byłaby miła. Flickr mógł usunąć wszystko, oprócz samego obrazu i informacji o prawach autorskich na wydrukach. Ale wszystko pojawia się w zwykłym niepisanym kodzie HTML.
Zasoby
- Poręczne wskazówki dotyczące tworzenia arkusza stylów CSS drukowania przez Line25
- Wydrukuj arkusz stylów: ostateczny przewodnik
- CSS Design: Going to print
- CSS-Tricks w końcu dostaje arkusz stylu drukowania
Napisany wyłącznie dla WDD przez Pieter Beulque. Jest studentem i twórca stron internetowych , mieszka w Belgii. Możesz za nim iść Świergot także.