Przewodnik po stanie arkuszy stylów druku w 2018 r.

Dzisiaj chciałbym wrócić do tematu, który był już poruszany w Smashing Magazine w przeszłości — do tematu arkusza stylów drukowania. W tym przypadku mówię o drukowaniu stron bezpośrednio z przeglądarki. To doświadczenie, które może prowadzić do frustracji z powodu drukowania ogromnych obrazów (a nawet reklam). Czasami jednak dodaje trochę radości, gdy ładnie zoptymalizowana strona wychodzi z drukarki, zużywając minimum atramentu i papieru i zapewniając, że wszystko jest łatwe do odczytania.

W tym artykule dowiemy się, jak najlepiej stworzyć to drugie doświadczenie. Przyjrzymy się, w jaki sposób powinniśmy uwzględnić style drukowania na naszych stronach internetowych i przyjrzymy się specyfikacjom, które naprawdę sprawdzają się po wydrukowaniu. Dowiemy się o stanie obsługi przeglądarek i jak najlepiej przetestować nasze style drukowania. Następnie podam kilka wskazówek, co zrobić, gdy arkusz stylów drukowania nie wystarcza do Twoich potrzeb drukowania.

Kluczowe miejsca dla wsparcia drukowania

Jeśli nadal nie wdrożyłeś żadnych stylów drukowania w swojej witrynie, istnieje kilka kluczowych miejsc, w których solidne środowisko drukowania będzie pomocne dla użytkowników. Na przykład wielu użytkowników będzie chciało wydrukować stronę z potwierdzeniem transakcji po dokonaniu zakupu lub rezerwacji, nawet jeśli wyślesz szczegóły e-mailem.

Wszelkie informacje, które odwiedzający mogą chcieć wykorzystać, gdy nie ma ich przy komputerze, są również dobrymi kandydatami do wydrukowania arkusza stylów. Najczęstszą rzeczą, którą drukuję, są przepisy kulinarne. Mógłbym je załadować na iPada, ale często wygodniej jest po prostu wydrukować przepis, aby pojawił się na drzwiach lodówki podczas gotowania. Innymi takimi przykładami mogą być wskazówki dojazdu lub informacje dotyczące podróży. Podczas wyjazdu za granicę i nie zawsze mając dostęp do danych wydruki te mogą być nieocenione.

Często drukowane są również wszelkiego rodzaju materiały referencyjne. Dla wielu osób umiejętność robienia notatek na kopiach papierowych to najlepszy sposób na naukę. Ponownie oznacza to, że informacje są dostępne w formacie offline. Łatwo jest nam się zastanawiać, dlaczego ludzie chcą drukować strony internetowe, jednak naszym zadaniem jest często udostępnianie treści — w najlepszym formacie dla naszych odwiedzających. Jeśli ten najlepszy format jest drukowany na papierze, to z kim mamy się kłócić?

Dlaczego ta strona miałaby zostać wydrukowana?

Dobrym pytaniem, jakie należy zadać, decydując się na włączenie lub ukrycie treści w arkuszu stylów drukowania, jest: „Dlaczego użytkownik drukuje tę stronę?” Cóż, może jest przepis, którego chcieliby przestrzegać podczas gotowania w kuchni lub zabrać ze sobą na zakupy, aby kupić składniki. Lub chcą wydrukować stronę z potwierdzeniem po zakupie biletu jako dowód rezerwacji. A może chcieliby, aby paragon lub faktura zostały wydrukowane (lub wydrukowane w formacie PDF) w celu przechowywania ich na kontach w formie papierowej lub elektronicznej.

Rozważenie użycia drukowanego dokumentu może pomóc w stworzeniu drukowanej wersji treści, która jest najbardziej użyteczna w kontekście, w którym znajduje się użytkownik, odnosząc się do tego wydruku.

Przepływ pracy

Kiedy już zdecydujemy się na uwzględnienie stylów drukowania w naszym CSS, musimy dodać je do naszego przepływu pracy, aby upewnić się, że kiedy wprowadzamy zmiany w układzie, uwzględnimy je również w wersji drukowanej.

Dodawanie stylów drukowania do strony

Aby włączyć „arkusz stylów drukowania”, mówimy przeglądarce, do czego służą te reguły CSS, gdy dokument jest drukowany. Jedną z metod wykonania tego jest połączenie dodatkowego arkusza stylów za pomocą elementu <link> .

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

Ta metoda oddziela style drukowania od wszystkiego, co możesz uznać za bardziej uporządkowane, ma jednak wady.

Połączony arkusz stylów tworzy dodatkowe żądanie do serwera. W dodatku to ładne, zgrabne oddzielenie stylów druku od innych stylów może mieć wadę. Chociaż możesz zadbać o zaktualizowanie oddzielnych stylów przed opublikowaniem, arkusz stylów może cierpieć z powodu tego, że jest poza zasięgiem wzroku, a tym samym do myślenia — ostatecznie staje się bezużyteczny, gdy funkcje są dodawane do witryny, ale nie mają odzwierciedlenia w stylach drukowania.

Alternatywną metodą dołączania stylów drukowania jest użycie @media w taki sam sposób, w jaki dołączasz CSS dla niektórych punktów przerwania w swoim responsywnym projekcie. Ta metoda utrzymuje wszystkie CSS razem dla funkcji. Style dla wąskich i szerokich punktów przerwania oraz style dla drukowania. Wraz z zapytaniami o funkcje z @supports , zachęca to do opracowania sposobu, który zapewnia, że ​​wszystkie CSS dla funkcji projektowej są utrzymywane i utrzymywane razem.

 @media print { }

Nadpisywanie ekranowego CSS lub tworzenie oddzielnych reguł

W większości przypadków prawdopodobnie okaże się, że CSS, którego używasz do wyświetlania na ekranie, działa w przypadku drukowania z kilkoma drobnymi poprawkami. Dlatego wystarczy napisać CSS do druku, do zmian w tym podstawowym CSS. Możesz nadpisać rozmiar czcionki lub rodzinę, pozostawiając inne elementy w CSS w spokoju.

Jeśli naprawdę chcesz mieć całkowicie oddzielne style do drukowania i zacząć od pustej planszy, musisz umieścić resztę stylów witryny w zapytaniu o media ze słowem kluczowym screen.

 @media screen { }

W tej notatce, jeśli używasz zapytań o media do projektowania responsywnego, być może napisałeś je dla ekranu.

 @media screen and (min-width: 500px) { }

Jeśli chcesz, aby te style były używane podczas drukowania, powinieneś usunąć słowo kluczowe screen . W praktyce jednak często stwierdzam, że jeśli najpierw pracuję na urządzeniach mobilnych, układ mobilny z pojedynczą kolumną jest naprawdę dobrym punktem wyjścia dla mojego układu wydruku. Mając zapytania o media, które wprowadzają bardziej złożone układy tylko na ekran, mam znacznie mniej nadpisywania stylów do druku.

Dodaj swoje style drukowania do bibliotek wzorów i przewodników po stylach

Aby upewnić się, że style drukowania są postrzegane jako integralna część projektu witryny, dodaj je do swojego przewodnika stylów lub biblioteki wzorców witryny, jeśli ją posiadasz. W ten sposób zawsze pojawia się przypomnienie, że istnieją style drukowania i że każdy nowy utworzony wzór będzie musiał mieć równoważną wersję do druku. W ten sposób zapewniasz widoczność stylów drukowania jako pierwszorzędny obywatel swojego systemu projektowania.

Podstawy CSS do druku

Jeśli chodzi o tworzenie CSS do druku, są trzy rzeczy, które prawdopodobnie zrobisz. Będziesz chciał ukryć, a nie wyświetlać treści, które są nieistotne podczas drukowania. Możesz także dodać treść, aby wersja drukowana była bardziej użyteczna. Możesz także dostosować czcionki lub inne elementy strony, aby zoptymalizować je do druku. Przyjrzyjmy się tym technikom.

Ukrywanie treści

W CSS metodą ukrywania treści, a także zapobiegania generowaniu ramek, jest użycie właściwości display z wartością none .

 .box { display: none; }

Korzystanie z display: none nie zwinie elementu i wszystkich jego elementów podrzędnych. Dlatego jeśli masz galerię zdjęć oznaczoną jako lista, wszystko, co musisz zrobić, aby ukryć to po wydrukowaniu, to ustawić display: none na ul .

Rzeczy, które możesz chcieć ukryć, to obrazy, które byłyby niepotrzebne podczas drukowania, nawigacja, panele reklamowe i obszary strony, które wyświetlają linki do powiązanych treści i tak dalej. Odwołanie się do powodów, dla których użytkownik może wydrukować tę stronę, może pomóc w podjęciu decyzji, co należy usunąć.

Wstawianie treści

Może istnieć treść, którą warto wyświetlić podczas drukowania strony. Możesz mieć ustawioną zawartość do display: none w arkuszu stylów ekranu i pokazanie jej w arkuszu stylów drukowania. Dodatkowo jednak możesz użyć CSS, aby pokazać zawartość, która normalnie nie jest wyświetlana na ekranie. Dobrym przykładem może być adres URL łącza w dokumencie. W dokumencie ekranowym łącze normalnie wyświetlałoby tekst łącza, który można następnie kliknąć, aby odwiedzić tę nową stronę lub zewnętrzną witrynę internetową. Jeśli jednak nie można skorzystać z wydrukowanych linków, przydatne może być, aby czytelnik mógł zobaczyć adres URL, na wypadek gdyby chciał odwiedzić link w późniejszym czasie.

Osiągamy to za pomocą CSS Generated Content. Wygenerowana treść umożliwia wstawianie treści do dokumentu za pomocą CSS. Podczas drukowania staje się to bardzo przydatne.

Do dokumentu możesz wstawić prosty ciąg tekstowy. Następny przykład dotyczy elementu z klasą wrapper i wstawia przed nim ciąg „Zajrzyj na www.mysite.com, aby uzyskać najnowszą wersję tych informacji”.

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

Możesz wstawić rzeczy, które już istnieją w dokumencie, przykładem może być zawartość linku href . Treść generowaną dodajemy po każdym wystąpieniu a z atrybutem href , a wstawiana przez nas treść jest wartością atrybutu href - który będzie linkiem.

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

Możesz użyć nowszego selektora CSS :not , aby wykluczyć wewnętrzne linki, jeśli chcesz.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

W artykule „Całkowicie zapomniałem o arkuszach stylów druku” napisanym przez Manuela Matuzovic znajduje się kilka innych przydatnych wskazówek.

Zaawansowana stylizacja druku

Jeśli twoja drukowana wersja mieści się dokładnie na jednej stronie, powinieneś być w stanie stworzyć arkusz stylów drukowania w stosunkowo prosty sposób, używając technik z ostatniej sekcji. Jednak gdy już masz coś, co jest drukowane na wielu stronach (a zwłaszcza jeśli zawiera elementy takie jak tabele lub ryciny), może się okazać, że elementy przebijają się na nowe strony w nieoptymalny sposób. Możesz także chcieć kontrolować rzeczy dotyczące samej strony, np. zmianę rozmiaru marginesów.

CSS ma sposób na zrobienie tych rzeczy, jednak, jak zobaczymy, obsługa przeglądarek jest niejednolita.

Media stronicowane

Specyfikacja CSS Paged Media zostanie otwarta z następującym opisem jej roli.

„Ten moduł CSS określa, w jaki sposób strony są generowane i rozmieszczane w celu przechowywania pofragmentowanej treści w prezentacji stronicowanej. Dodaje funkcję kontrolowania marginesów strony, rozmiaru i orientacji strony oraz nagłówków i stopek, a także rozszerza generowaną zawartość, aby umożliwić numerowanie stron i uruchamianie nagłówków/stopek”.

Ekran jest ciągłym nośnikiem ; jeśli jest więcej treści, przewijamy, aby ją zobaczyć. Nie ma koncepcji podziału na poszczególne strony. Gdy tylko drukujemy, wyprowadzamy stronę o stałym rozmiarze, opisaną w specyfikacji jako nośnik stronicowany . Specyfikacja Paged Media nie dotyczy fragmentacji treści między stronami, zajmiemy się tym później. Zamiast tego przygląda się cechom samych stron.

Potrzebujemy sposobu na kierowanie na pojedynczą stronę i robimy to za pomocą reguły @page . Jest to używane podobnie jak zwykły selektor, w tym celu kierujemy się na @page , a następnie piszemy CSS, który ma być używany przez stronę. Prostym przykładem może być zmiana marginesów na wszystkich stronach tworzonych podczas drukowania dokumentu.

 @page { margin: 20px; }

Możesz kierować reklamy na określone strony za pomocą selektorów pseudoklas :left i :right . Pierwsza strona może być kierowana za pomocą selektora pseudoklasy :first , a puste strony spowodowane podziałami stron można wybrać za pomocą :blank . Na przykład, aby ustawić margines górny tylko na pierwszej stronie:

 @page :first { margin-top: 250pt; }

Aby ustawić większy margines po prawej stronie lewej strony i lewej stronie prawej strony:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

Specyfikacja określa możliwość wstawiania treści do tworzonych marginesów, jednak żadna przeglądarka nie obsługuje tej funkcji. Opisuję to w moim artykule o tworzeniu arkuszy stylów do użytku z agentami użytkownika specyficznymi dla drukowania, Projektowanie dla drukowania za pomocą CSS.

Fragmentacja CSS

Tam, gdzie moduł Paged Media zajmuje się samymi polami stron, moduł fragmentacji CSS szczegółowo opisuje, w jaki sposób zawartość łamie się między fragmentatorami . Fragmentainer (lub pojemnik na fragmenty ) to pojemnik, który zawiera część pofragmentowanego przepływu. Jest to przepływ, który po osiągnięciu punktu, w którym mógłby się przelać, włamuje się do nowego pojemnika.

Konteksty, w których napotkasz fragmentację, znajdują się obecnie w mediach stronicowanych, a więc podczas drukowania, a także podczas korzystania z układu wielokolumnowego i podziału treści między polami kolumn. Specyfikacja fragmentacji definiuje różne zasady łamania, właściwości CSS, które dają pewną kontrolę nad tym, jak treść dzieli się na nowe fragmenty w tych kontekstach. Definiuje również sposób, w jaki zawartość ulega uszkodzeniu w specyfikacji CSS Regions, chociaż nie jest to obecnie coś użytecznego dla różnych przeglądarek.

Mówiąc o przeglądarkach, fragmentacja jest obecnie trochę bałaganem pod względem wsparcia. Tabele zgodności przeglądarek dla każdej właściwości w MDN wydają się być dokładne, jeśli chodzi o obsługę, jednak wymagane będzie staranne przetestowanie korzystania z tych właściwości.

Starsze właściwości z CSS2

Oprócz właściwości break-* z CSS Fragmentation Level 3, mamy właściwości page-break-* pochodzące z CSS2. Pod względem specyfikacji zostały one zastąpione przez nowsze właściwości break-* , ponieważ są one bardziej ogólne i mogą być używane w różnych kontekstach, w których dochodzi do przerwania. Nie ma dużej różnicy między podziałem strony a podziałem wielokolumnowym. Jednak pod względem obsługi przeglądarek jest lepsza obsługa starszych właściwości. Oznacza to, że możesz potrzebować użyć ich w danym momencie, aby kontrolować łamanie. Przeglądarki, które implementują nowsze właściwości, mają aliasować starsze, a nie je usuwać.

W poniższych przykładach pokażę zarówno nową, jak i starą własność tam, gdzie ona istnieje.

break-before i break-after

Te właściwości dotyczą przerw między polami i akceptują następujące wartości, z wartością początkową auto. Ostatnie cztery wartości nie dotyczą mediów stronicowanych, zamiast tego dotyczą multicol i regionów.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

Starsze właściwości page-break-before i page-break-after przyjmują mniejszy zakres wartości.

• auto
• always
• avoid
• left
• right
• inherit

Aby zawsze powodować złamanie strony przed elementem h2 , użyj następującego:

 h2 { break-before: page; }

Aby uniknąć odłączenia akapitu od nagłówka bezpośrednio go poprzedzającego:

 h2, h3 { break-after: avoid-page; }

Starsza właściwość page-break-* , która zawsze powoduje podział strony przed h2 :

 h2 { page-break-before: always; }

Aby uniknąć odłączenia akapitu od nagłówka bezpośrednio go poprzedzającego:

 h2, h3{ page-break-after: avoid; }

Na MDN znajdź informacje i przykłady użycia dla właściwości:

• przerwa przed
• przerwa po
• podział strony przed
• podział strony po

break-inside

Ta właściwość kontroluje podziały wewnątrz pól i akceptuje wartości:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Podobnie jak w przypadku poprzednich dwóch właściwości, page-break-inside , który akceptuje wartości:

• auto
• avoid
• inherit

Na przykład, być może masz figure lub table i nie chcesz, aby połowa znalazła się na jednej stronie, a druga połowa na innej.

 figure { break-inside: avoid; }

A przy korzystaniu ze starszej właściwości:

 figure { page-break-inside: avoid; }

Na MDN:

• włamać się do środka
• podział strony wewnątrz

Sieroty i wdowy

Specyfikacja fragmentacji definiuje również właściwości orphans i widows . Właściwość orphans określa, ile wierszy można pozostawić na dole pierwszej strony, gdy treść, taka jak akapit, zostanie podzielona między dwie strony. Własność widows określa, ile wierszy można pozostawić na górze drugiej strony.

Dlatego, aby nie dopuścić do jednego wiersza na końcu strony i jednego wiersza na górze następnej strony, możesz użyć następującego:

 p { orphans: 2; widows: 2; }

Właściwości widows i orphans są dobrze obsługiwane (brakująca implementacja przeglądarki to Firefox).

Na MDN:

• wdowy
• sieroty

box-decoration-break

Ostatnią właściwością zdefiniowaną w module fragmentacji jest box-decoration-break . Ta właściwość dotyczy tego, czy obramowania, marginesy i dopełnienie łamią lub zawijają zawartość. Akceptowane wartości to:

• slice
• clone

Na przykład, jeśli mój obszar treści ma szare obramowanie o wielkości 10 pikseli i drukuję treść, domyślnym sposobem drukowania jest to, że obramowanie będzie kontynuowane na każdej stronie, jednak będzie zawijane tylko na końcu treści . Więc robimy sobie przerwę przed przejściem do następnej strony i kontynuowaniem.

Jeśli użyję box-decoration-break: clone , obramowanie i wszelkie dopełnienie i margines zostaną zakończone na każdej stronie, nadając każdej stronie szare obramowanie.

Obecnie działa to tylko w przypadku Paged Media w Firefoksie i możesz dowiedzieć się więcej o przełamaniu dekoracji w MDN.

Obsługa przeglądarki

Jak już wspomniano, obsługa przeglądarek jest niejednolita dla Paged Media i fragmentacji. Jeśli chodzi o fragmentację, dodatkową kwestią jest to, że łamanie musi być określone i zaimplementowane dla każdej metody układu. Jeśli miałeś nadzieję użyć Flexbox lub CSS Grid w arkuszach stylów drukowania, prawdopodobnie będziesz rozczarowany. Możesz sprawdzić błędy Chrome dla Flexbox i Grid.

Najlepszą sugestią, jaką mogę teraz dać, jest utrzymywanie dość prostych arkuszy stylów drukowania. Dodaj właściwości fragmentacji — w tym zarówno stare właściwości page-break-* , jak i nowe właściwości. Zaakceptuj jednak, że mogą one nie działać we wszystkich przeglądarkach. A jeśli uważasz, że brak obsługi przeglądarki jest frustrujący, zgłoś te problemy w przeglądarkach lub zagłosuj na już zgłoszone problemy. W szczególności fragmentację należy traktować raczej jako sugestię niż polecenie, nawet jeśli jest wspierana. Można by tak dokładnie określić, gdzie i kiedy chcesz, aby coś się zepsuło, że prawie niemożliwe jest rozplanowanie stron. Powinieneś założyć, że czasami możesz uzyskać nieoptymalne złamanie.

Testowanie arkuszy stylów drukowania

Testowanie arkuszy stylów drukowania może być trochę nudne, zwykle wymagające korzystania z podglądu wydruku lub wielokrotnego drukowania do pliku PDF. Jednak przeglądarka DevTools nieco ułatwiła nam to zadanie. Zarówno Chrome, jak i Firefox mają możliwość przeglądania tylko stylów drukowania.

Firefox

Otwórz program Developer Toolbar, a następnie wpisz media emulate print po wyświetleniu monitu.

Chrom

Otwórz DevTools, kliknij ikonę trzech kropek, a następnie wybierz „Więcej narzędzi” i „Renderowanie”. Następnie możesz wybrać drukowanie w obszarze Emuluj nośnik CSS.

Będzie to pomocne tylko w testowaniu zmian w układzie CSS, ukrytych lub generowanych treści. Nie pomoże ci w fragmentacji — w tym celu musisz wydrukować lub wydrukować do formatu PDF. Jednak zaoszczędzi ci to kilku podróży w obie strony do drukarki i pomoże ci sprawdzić, gdy będziesz opracowywać nowe części witryny, które wciąż ukrywasz i pokazujesz prawidłowe rzeczy.

Co zrobić, gdy arkusz stylów drukowania to za mało

W idealnym świecie przeglądarki zaimplementowałyby więcej specyfikacji Paged Media podczas drukowania bezpośrednio z przeglądarki, a fragmentacja byłaby bardziej szczegółowo zaimplementowana w spójny sposób. Z pewnością warto zgłaszać błędy, które znajdziesz podczas drukowania z przeglądarki za pomocą odpowiednich przeglądarek. Jeśli nie poprosimy o naprawienie tych rzeczy, pozostaną one do naprawy o niskim priorytecie.

Jeśli potrzebujesz mieć wysoki poziom obsługi drukowania i chcesz korzystać z CSS, to obecnie musisz użyć agenta użytkownika specyficznego dla drukowania, takiego jak Prince. W moim artykule „Projektowanie do druku za pomocą CSS” szczegółowo opisuję, w jaki sposób można użyć CSS do formatowania książek podczas wysyłania do Prince'a.

Prince jest również dostępny do zainstalowania na serwerze w celu generowania ładnie wydrukowanych dokumentów za pomocą CSS w Internecie, jednak ma to wysoką cenę. Alternatywą jest serwer taki jak DocRaptor, który oferuje API na górze silnika renderującego Prince.

Istnieją generatory HTML i CSS na PDF typu open source, takie jak wkhtmltopdf, ale większość używa silników renderujących przeglądarki do tworzenia danych wyjściowych do drukowania i dlatego ma takie same ograniczenia jak przeglądarki, jeśli chodzi o implementację specyfikacji Paged Media i Fragmentation. Wyjątkiem jest WeasyPrint, który wydaje się mieć własną implementację i obsługuje nieco inne funkcje, chociaż nie jest w żaden sposób tak w pełni funkcjonalny jak coś takiego jak Prince.

Więcej informacji na temat agentów użytkownika do druku znajdziesz na stronie print-css.rocks.

Inne zasoby

Ze względu na fakt, że drukowanie z CSS posunęło się bardzo niewiele w ciągu ostatnich kilku lat, wiele starszych zasobów w Smashing Magazine i innych miejscach jest nadal aktualnych. Kilka dodatkowych porad i wskazówek można znaleźć w następujących zasobach. Jeśli znalazłeś przydatny proces drukowania lub wskazówkę techniczną, dodaj go do poniższych komentarzy.

• „Całkowicie zapomniałem o arkuszach stylów druku”, Manuel Matuzovic, UX Collective
• „Podejścia do arkusza stylów drukowania: czarna lista kontra biała lista”, Chris Coyier, CSS-Tricks
• „The Perfect Print Stylesheet”, Andreas Hecht, Noupe
• „Jak skonfigurować arkusz stylów drukowania”, Christian Krammer, Smashing Magazine
• „5 skutecznych porad i wskazówek dotyczących arkuszy stylów drukowania”, Dudley Storey, magazyn Smashing