Jeśli kiedykolwiek wydrukowałeś rezerwacje biletów lub wskazówki dojazdu do hotelu z internetu, wyniki prawdopodobnie nie zrobiły na Tobie większego wrażenia. Dlatego możesz nie zdawać sobie sprawy, że drukowane dokumenty można stylizować w taki sam sposób, jak na ekranie, używając kaskadowych arkuszy stylów (CSS).

Rozdzielenie problemów

Kluczową zaletą CSS jest oddzielenie treści od prezentacji. Mówiąc najprościej, oznacza to zamiast bardzo staromodnych znaczników stylistycznych, takich jak:

Nagłówek

Używamy znaczników semantycznych:

Nagłówek

Jest to nie tylko dużo czystsze, ale także oznacza, że ​​nasza prezentacja jest oddzielona od treści. Przeglądarki renderują h1 elementy jako duży, pogrubiony tekst, ale możemy zmienić ten styl w dowolnym momencie za pomocą arkusza stylów:

h1 {font-weight: normal; }

Gromadząc te deklaracje stylu w oddzielnym pliku i odwołując się do tego pliku z naszego dokumentu HTML, możemy jeszcze lepiej wykorzystać separację. Arkusza stylów można użyć ponownie i możemy zmienić ten pojedynczy plik w dowolnym momencie, aby zaktualizować formatowanie w każdym dokumencie, który go używa.

Zawiera arkusz stylów drukowania

W podobny sposób jak dołączanie arkusza stylów ekranu, możemy określić arkusz stylów do druku. Arkusz stylów ekranu jest zwykle dołączany w następujący sposób:

Jednak dodatkowy atrybut, głoska bezdźwięczna, umożliwia kierowanie na podstawie kontekstu, w którym dokument jest renderowany. Domyślnie poprzedni element jest równoważny z:

Oznacza to, że arkusz stylów zostanie zastosowany na dowolnym nośniku, na którym jest renderowany dokument. Jednak atrybut media może również przyjmować wartości print i screen:

W tym przykładzie print.css arkusz stylów będzie używany tylko podczas drukowania dokumentu. To bardzo przydatny mechanizm. Możemy zebrać wszystkie popularne style (np. Rodzinę czcionek lub odstępy między wierszami) w arkuszu stylów, który ma zastosowanie do wszystkich mediów, oraz formatowanie specyficzne dla mediów w poszczególnych arkuszach stylów. Ponownie, jest to kolejne zastosowanie oddzielenia obaw.

Niektóre przykładowe deklaracje stylu

Czyste tło

Prawie na pewno nie chcesz marnować atramentu na drukowanie kolorowego tła lub obrazu tła. Zacznij od zresetowania wszystkich wartości domyślnych dla tych wartości, które mogły zostać ustawione w dokumencie:

body {
tło: białe;
czarny kolor;
}

Możesz też chcieć zapobiec drukowaniu jakichkolwiek obrazów tła - powinny one mieć charakter dekoracyjny, a zatem nie być wymaganą częścią treści:

* {
background-image: brak! ważne;
}

Związane z: Jak ustawić obraz tła w CSS

Jak ustawić obraz tła w CSS

CSS to potężne narzędzie do stylizacji stron internetowych. Nauka umieszczania obrazu tła nauczy Cię wielu podstaw CSS.

Kontrolowanie marginesów

Kolejną oczywistą kwestią, którą należy wziąć pod uwagę w przypadku drukowania, jest margines strony. Chociaż CSS umożliwia ustawienie rozmiaru marginesów, należy pamiętać, że przeglądarka i drukarka mogą również wpływać na same ustawienia marginesów.

Na przykład w oknie dialogowym drukowania przeglądarki Chrome jest ustawienie marginesu, które zawiera takie wartości Żaden i zwyczaj który zastąpi wszystko, co określono w CSS:

Z tego powodu zaleca się pozostawienie decyzji dotyczących marginesów czytelnikowi na publicznych stronach internetowych. Jednak do użytku osobistego lub do tworzenia domyślnego układu, ustawienie marginesów wydruku za pomocą CSS może być odpowiednie. Plik @strona reguła pozwala na ustawienie marginesów i powinna być używana w następujący sposób:

@page {
margines: 2cm;
}

CSS pozwala również na bardziej wyrafinowane układy wydruku, takie jak zmienianie marginesów w zależności od tego, czy strona jest nieparzysta (po prawej), parzysta (po lewej) czy strona tytułowa.

Niestety jest to słabo obsługiwane - zwłaszcza opcja strony tytułowej - ale można jej używać w minimalnym stopniu. Następujące style tworzą strony z nieco większymi dolnymi marginesami niż górny i nieco większymi na zewnętrznej krawędzi strony niż grzbiet:

@page {
margines lewy: 20 mm;
margines prawy: 20 mm;
margin-top: 40 mm;
margin-bottom: 50 mm;
}
@page: left {
margines lewy: 30 mm;
}
@page: right {
margines prawy: 30 mm;
}

Ukrywanie nieistotnych treści

Nie wszystkie treści będą odpowiednie dla wersji drukowanej dokumentu. Jeśli Twoja strona zawiera baner nawigacyjny, reklamy lub pasek boczny, możesz chcieć, aby te szczegóły nie pojawiały się w wersji drukowanej, na przykład:

#contents, div.ad {display: none; }

Hiperłącza oczywiście nie mają znaczenia w materiałach drukowanych, więc prawdopodobnie będziesz chciał usunąć wszelkie style, które odróżniają je od otaczającego tekstu:

a {text-decoration: none; kolor: dziedziczenie; }

Jednak nadal możesz chcieć, aby czytelnicy mieli dostęp do oryginalnych adresów URL, a prostym rozwiązaniem jest automatyczne wstawienie ich po tekście, do którego prowadzi łącze:

a [href]: after {
content: "(" attr (href) ")";
rozmiar czcionki: 90%;
kolor: # 333;
}

Ten arkusz CSS daje następujące wyniki:

a [href]: after w szczególności kieruje na pozycję po (:po) każdy element łącza (za), który faktycznie ma adres URL ([href]). Plik zawartość Deklaracja tutaj wstawia wartość href atrybut między nawiasami. Zwróć uwagę, że można zastosować inne reguły stylów do sterowania wyświetlaniem generowanej treści.

Obsługa podziałów stron

Aby uniknąć podziałów strony na pozostawienie odizolowanej treści lub niezręcznego jej złamania w środku, użyj właściwości podziału strony: podział strony przed, podział strony po i strona-break-inside. Na przykład:

table {page-break-inside: unikaj; }

Powinno to pomóc w zapobieganiu umieszczania tabel na wielu stronach, pod warunkiem, że żadna z nich nie jest wyższa niż jedna strona. Podobnie:

h1, h2 {podział strony przed: zawsze; }

Oznacza to, że takie nagłówki zawsze rozpoczynają nową stronę. Może to jednak powodować problemy, jeśli od razu podążasz za h1 strony z h2, ponieważ h1 sam skończy się na stronie. Aby tego uniknąć, po prostu anuluj podział strony za pomocą selektora skierowanego do tego konkretnego wystąpienia, na przykład:

h1 + h2 {page-break-before: unikaj; }

Przeglądanie stylów drukowania

We wszystkich przypadkach przeglądarka i system operacyjny powinny zapewniać funkcję podglądu wydruku, często jako część standardowego okna dialogowego drukowania.

Przeglądarka Chrome ułatwia sprawdzanie, a nawet debugowanie stylów drukowania za pomocą narzędzi programistycznych, jak pokazano na tym przykładzie przedstawiającym CV z arkuszem stylów drukowania. Najpierw otwórz menu główne i wybierz Więcej narzędzi po którym następuje Narzędzia deweloperskie opcja:

W nowym panelu, który się pojawi, wybierz Menu, następnie Więcej narzędzi, śledzony przez Wykonanie:

Następnie przewiń w dół do Emuluj typ mediów CSS oprawa. Lista rozwijana umożliwia przełączanie między widokiem wydruku i ekranu dokumentu:

Podczas emulacji arkusza stylów drukowania standard Przeglądarka stylów jest dostępny do przeglądania i modyfikowania reguł stylu na żywo. Należy pamiętać, że emulacja wydruku na ekranie nadal nie jest w 100% dokładna. Przeglądarka nie wie nic o rozmiarze papieru, a rozszerzenie @strona reguły nie można naśladować.

Drukowanie do pliku PDF

Przydatną funkcją nowoczesnych systemów operacyjnych jest możliwość drukowania do pliku PDF. W efekcie wszystko, co można wydrukować, można zamiast tego przesłać do pliku PDF - nic dziwnego, ponieważ w końcu plik PDF ma reprezentować wydrukowany dokument.

To sprawia, że ​​HTML, w połączeniu z arkuszem stylów drukowania, jest doskonałym środkiem do tworzenia wysokiej jakości dokumentu, który można wysłać jako załącznik, a także wydrukować.

Wydrukuj różne dokumenty

Możesz użyć arkusza stylów drukowania do tworzenia wysokiej jakości dokumentów, w tym wszystkiego, od CV po przepisy kulinarne i ogłoszenia o wydarzeniach. Strony internetowe zwykle wyglądają brzydko i zawierają niepożądane szczegóły po wydrukowaniu, ale niewielka liczba poprawek stylu może znacznie poprawić wyniki drukowania. Zapisanie ostatecznych wyników w formacie PDF to szybki sposób na tworzenie atrakcyjnych, profesjonalnych dokumentów.

Jak drukować strony internetowe do formatu PDF za pomocą przeglądarki Microsoft Edge

Czy kiedykolwiek natknąłeś się na interesujący artykuł, który chciałeś zachować na później? Cóż, możesz zapisać jako PDF za pomocą Edge w trzech prostych krokach.

O autorze