W tym artykule omówiliśmy sztukę tworzenia stron internetowych przyjaznych dla drukarki za pomocą CSS.

„Kto drukuje strony internetowe?” Słyszę, jak płaczesz! Stosunkowo niewiele stron zostanie odtworzonych na papierze. Ale zastanów się:

drukowanie biletów na podróż lub koncert
odtwarzanie wskazówek dotyczących trasy lub rozkładów jazdy
zapisywanie pliku PDF do czytania w trybie offline
dostęp do informacji w obszarze o słabej łączności
wykorzystanie danych w niebezpiecznych lub brudnych warunkach - na przykład w kuchni lub fabryce
przesyłanie treści roboczych do adnotacji pisakiem
drukowanie paragonów internetowych do celów księgowych
dostarczanie dokumentów osobom niepełnosprawnym, którym trudno jest korzystać z ekranu
wydrukowanie strony dla twojego kolegi, który odmawia korzystania z tego nowomodnego nonsensu w Internecie.

Internet i aplikacje nie obejmują wszystkich sytuacji, ale drukowanie stron może być frustrujące:

tekst może być za mały, za duży lub zbyt słaby
kolumny mogą być zbyt wąskie lub przepełniać marginesy strony
sekcje są przycięte lub całkowicie znikają
tusz jest marnowany na niepotrzebne kolorowe tła i obrazy
nie można zobaczyć adresów URL linków
wyświetlane są reklamy, których nigdy nie można było kliknąć!

Deweloperzy mogą opowiadać się za dostępnością do sieci, ale niewielu pamięta, aby udostępnić drukowaną sieć.

Konwersja reagujących, ciągłych nośników na papier stronicowany o dowolnym rozmiarze i orientacji może być trudny. Jednak kontrola drukowania CSS jest możliwa od wielu lat, a podstawowy arkusz stylów można wypełnić w ciągu kilku godzin. W poniższych sekcjach opisano dobrze obsługiwane i praktyczne opcje, dzięki którym strony są przyjazne dla drukarki.
Drukuj arkusze stylów

Drukuj CSS może być:

Stosowany oprócz stylizacji ekranu. Biorąc za podstawę style ekranów, style drukarki zastępują te domyślne w razie potrzeby.
Stosowane jako osobne style. Style ekranu i drukowania są całkowicie oddzielne; oba zaczynają się od domyślnych stylów przeglądarki.

Wybór zależy od Twojej witryny / aplikacji. Osobiście używam stylów ekranu jako podstawy drukowania dla większości stron internetowych. Jednak zastosowałem osobne style dla aplikacji o radykalnie różnych wynikach – na przykład system rezerwacji sesji konferencyjnych, który wyświetlał tabelę harmonogramów na ekranie, ale chronologicznie na papierze.

http://sanrahpo1.pl/tworzenie-stron-internetowych
http://sanrahpo1.pl/tworzenie-stron-siedlce
http://sanrahpo1.pl/tworzenie-stron-warszawa
http://sanrahpo1.pl/strony-www-krakow
http://sanrahpo1.pl/strony-www-lodz
http://sanrahpo1.pl/strony-www-poznan
http://sanrahpo1.pl/strony-www-gdansk
http://sanrahpo1.pl/strony-www-szczecin
http://sanrahpo1.pl/strony-www-bydgoszcz
http://sanrahpo1.pl/strony-www-lublin
http://sanrahpo1.pl/strony-www-bialystok

Arkusz stylów wydruku można dodać do HTML po standardowym arkuszu stylów:

Style print.css zostaną zastosowane oprócz stylów ekranu podczas drukowania strony.

Aby oddzielić ekran i media drukowane, main.css powinien być kierowany tylko na ekran:

Alternatywnie style wydruku mogą być zawarte w istniejącym pliku CSS przy użyciu reguł @media. Na przykład:

/ * main.css * /
ciało {
margines: 2em;
kolor: #fff;
kolor tła: # 000;
}

/ * zastępuj style podczas drukowania * /
@media print {
ciało {
margines: 0;
kolor: # 000;
kolor tła: #fff;
}
}

Można dodać dowolną liczbę reguł drukowania @media, więc może to być praktyczne dla zachowania razem powiązanych stylów. Reguły ekranu i drukowania można również rozdzielić, ale jest to trochę bardziej kłopotliwe:

/ * main.css * /

/ * style ekranowe * /
@media screen {
ciało {
margines: 2em;
kolor: #fff;
kolor tła: # 000;
}
}

/ * style wydruku * /
@media print {
ciało {
margines: 0;
kolor: # 000;
kolor tła: #fff;
}
}

Testowanie wydajności drukarki

Nie trzeba zabijać drzew i używać strasznie drogiego atramentu za każdym razem, gdy chcesz przetestować układ wydruku! Poniższe opcje replikują style drukowania na ekranie.
Podgląd wydruku

Najbardziej niezawodną opcją jest opcja podglądu wydruku w przeglądarce. To pokazuje, jak obsługiwane będą podziały stron przy użyciu domyślnego rozmiaru papieru.

Alternatywnie możesz być w stanie zapisać lub wyświetlić podgląd strony, eksportując do pliku PDF.
Narzędzia deweloperskie

DevTools mogą emulować style drukowania, chociaż podziały stron nie będą wyświetlane.

W Chrome otwórz Narzędzia programistyczne i wybierz Więcej narzędzi, a następnie Renderowanie z menu ikony z trzema kropkami. Zmień Emuluj nośnik CSS, aby drukować na dole tego panelu.

W przeglądarce Firefox otwórz pasek narzędzi programisty (Shift + F2) i wprowadź media emuluj druk. Emulacja drukowania nie pozostaje aktywna między odświeżeniami strony, ale naciśnij klawisz kursora w górę, a następnie Enter, aby ponownie wykonać polecenie.
Hakuj swoje media

Zakładając, że używasz znacznika do załadowania CSS drukarki, możesz tymczasowo zmienić atrybut media na screen:

Ponownie nie ujawni to podziałów stron. Nie zapomnij przywrócić atrybutu media = „print” po zakończeniu testowania.
Usuń niepotrzebne sekcje

Przed wykonaniem czegokolwiek innego usuń i zwiń zbędne treści z display: none ;. Typowe niepotrzebne sekcje na papierze mogą obejmować menu nawigacyjne, obrazy bohaterów, nagłówki, stopki, formularze, paski boczne, widżety mediów społecznościowych i bloki reklamowe (zwykle wszystko w ramce iframe):

/ * print.css * /
nagłówek, stopka, na bok, nawigacja, formularz, iframe, .menu, .hero, .adslot {
Nie wyświetla się;
}

Konieczne może być użycie display: none! Ważne; jeśli funkcja CSS lub JavaScript pokazuje / ukrywa elementy na żądanie. Używanie! Ważne nie jest zwykle zalecane, ale możemy to uzasadnić tutaj!
Zlinearyzuj układ

Boli mnie to powiedzieć, ale ani Flexbox, ani Grid nie grają ładnie z układami drukarek w żadnej przeglądarce. Można to ostatecznie rozwiązać, ale na razie ustaw wszystkie pola układu tak, aby wyświetlały się: blok ;. Może być również konieczne zastosowanie szerokości: 100%; na niektóre elementy, aby upewnić się, że obejmują całą stronę.
Stylizacja drukarki

Można teraz zastosować stylizację przyjazną dla drukarki. Rekomendacje:

Upewnij się, że używasz ciemnego tekstu na białym tle.
Rozważ użycie czcionki szeryfowej, która może być łatwiejsza do odczytania.
Dostosuj rozmiar tekstu do 12 punktów lub więcej.
W razie potrzeby zmodyfikuj wypełnienia i marginesy. Standardowe cm, mm lub w jednostkach mogą być bardziej praktyczne.

Dalsze sugestie obejmują…
Przyjmij kolumny CSS

Standardowy papier listowy A4 lub US może powodować powstawanie dłuższych i mniej czytelnych linii tekstu. Rozważ użycie kolumn CSS w układach wydruku. Na przykład:

/ * print.css * /
artykuł {
szerokość kolumny: 17em;
odstęp między kolumnami: 3em;
}

W tym przykładzie kolumny zostaną utworzone, gdy będzie co najmniej 37em przestrzeni poziomej. Nie ma potrzeby ustawiania zapytań o media; dodatkowe kolumny zostaną dodane na szerszym papierze.

Użyj granic zamiast kolorów tła

Twój szablon może mieć sekcje lub pola wywołań, które są oznaczone ciemniejszymi lub odwrotnymi schematami kolorów:

Objaśnienie na ekranie

Oszczędzaj atrament, reprezentując te elementy za pomocą ramki:

Objaśnienie po wydrukowaniu
Usuń lub odwróć obrazy

Użytkownicy nie będą chcieli drukować obrazów dekoracyjnych ani innych nieistotnych obrazów. Można rozważyć ustawienie domyślne, w którym wszystkie obrazy są ukryte, chyba że mają klasę wydruku:

/ * print.css * /
img, svg {
Nie wyświetla się;
}

img.print, svg.print {
Blok wyświetlacza;
maksymalna szerokość: 100%;
}

W idealnym przypadku drukowane obrazy powinny mieć ciemne kolory na jasnym tle. Może być możliwa zmiana kolorów SVG osadzonych w HTML w CSS, ale zdarzają się sytuacje, w których masz ciemniejsze mapy bitowe:

Ciemna mapa

Filtr CSS może służyć do odwracania i dostosowywania kolorów w arkuszu stylów drukowania. Na przykład:

/ * print.css * /
img.dark {
filtr: odwrócenie (100%) jasność-obrót (180 stopni) jasność (120%) kontrast (150%);
}

Wynik:

Lekki wykres
Dodaj treść uzupełniającą

Materiały drukowane często wymagają dodatkowych informacji, które nie byłyby konieczne na ekranie. Właściwość treści CSS może być stosowana do dołączania tekstu do :: przed i po pseudoelementach. Na przykład wyświetl adres URL w nawiasach natychmiast po standardowym łączu:

/ * print.css * /
a [href ^ = „http”] :: po {
content: „(„ attr (href) „)”;
}

Dodaj wiadomość:

/ * print.css * /
main :: after {
treść: „Copyright site.com”;
Blok wyświetlacza;
wyrównanie tekstu: środek;
}

W przypadku bardziej złożonych sytuacji rozważ użycie klasy, takiej jak tylko do drukowania na elementach, która powinna być widoczna tylko po wydrukowaniu. Na przykład:

Artykuł zaktualizowany 11 lipca 2018 r. Najnowszą wersję można znaleźć na https://site.com/page.

CSS:

/ * ukryty na ekranie * /
.print-only {
Nie wyświetla się;
}

@media print {

/ * widoczne po wydrukowaniu * /
.print-only {
Blok wyświetlacza;
}
}

Uwaga: większość przeglądarek wyświetla adres URL i bieżącą datę / godzinę w nagłówku i / lub stopce drukowanej strony.
Podziały stron

Właściwości CSS3 break-before i break-after pozwalają kontrolować, jak zachodzą podziały strony, kolumny lub regionu przed i po elemencie. Obsługa jest dobra, chociaż Firefox zezwala tylko na przestarzałe – ale bardzo podobne – właściwości podziału strony przed i podziału strony po.

Następujące wartości przed i po mają dobrą obsługę w różnych przeglądarkach:

auto: domyślny; przerwa jest dozwolona, ​​ale nie wymuszona
Unikaj: unikaj przerwy na stronie, kolumnie lub regionie
Unikaj strony (tylko podział *): unikaj podziału strony
page (tylko break- *): wymusza podział strony
zawsze: alias strony obsługiwany w podziale strony *
left: wymusza podział strony, więc następna to lewa strona
right: wymusza podział strony, więc następna jest właściwa strona.

Oto na przykład, jak wymusić podział strony bezpośrednio przed dowolnym nagłówkiem

: / * print.css * /
h1 {
podział strony przed: zawsze;
break-before: zawsze;
} Włamanie i starsze właściwości łamanie strony określają, czy podział elementu jest dozwolony w elemencie. Najczęściej obsługiwane wartości: auto: domyślny; przerwa jest dozwolona, ​​ale nie wymuszona
Unikaj: w miarę możliwości unikaj wewnętrznej przerwy
Unikaj strony (tylko włamanie do środka): w miarę możliwości unikaj wewnętrznego łamania strony Aby zapobiec występowaniu podziałów stron w tabeli danych: / * print.css * /
stół {
podział strony: unikaj;
włamanie: unikać;
} Właściwość wdowy określa minimalną liczbę wierszy w bloku, które muszą być pokazane u góry strony. Wyobraź sobie blok z pięcioma liniami tekstu. Przeglądarka chce zrobić podział strony po czwartym wierszu, aby ostatni wiersz pojawił się u góry następnej strony. Ustawianie wdów: 3; łamie się na drugiej linii lub przed nią, więc co najmniej trzy linie przenoszą się na następną stronę. Właściwość sieroty jest podobna do wdów, ale kontroluje minimalną liczbę wierszy wyświetlanych na dole strony. Właściwość box-decoration-break kontroluje granice elementów między stronami. Gdy element z ramką ma wewnętrzny podział strony: plasterek: domyślny, dzieli układ. Górna ramka jest pokazana na pierwszej stronie, a dolna ramka na drugiej stronie. klon: replikuje margines, wypełnienie i ramkę. Wszystkie cztery obramowania są pokazane na obu stronach. Wreszcie CSS Paged Media (@page) ma ograniczoną obsługę przeglądarki, ale zapewnia sposób kierowania na określone strony, dzięki czemu można zdefiniować alternatywne marginesy lub przerwy: / * print.css * / / * kieruj reklamy na wszystkie strony * /
@page {
margines: 2 cm;
} / * kieruj tylko na pierwszą stronę * /
@strona: pierwsza {
margines górny: 6 cm;
} / * celuj tylko w lewe (parzyste) strony * /
@page: left {
margines z prawej: 4 cm;
} / * kieruj tylko na prawe (nieparzyste) strony * /
@strona: prawo {
margines lewy: 4 cm;
} Właściwości podziału strony CSS można umieszczać na ekranie lub w stylach drukowania, ponieważ wpływają one tylko na drukowanie. Niestety kontrola podziału strony jest niewiele więcej niż sugestią dla przeglądarki. Nie ma gwarancji, że przerwa zostanie wymuszona lub uniknięta, ponieważ układ jest ograniczony do granic papieru.
Bóle drukarskie Kontrola nad drukowaniem mediów internetowych będzie zawsze ograniczona, a wyniki mogą się różnić w różnych przeglądarkach. To mówi: arkusze stylów, które można drukować, można dopasować w dowolnym miejscu jest mało prawdopodobne, aby wpłynęło lub zepsuło istniejącą funkcjonalność koszty prac rozwojowych są minimalne.