Jak stylizować swoją stronę internetową do druku za pomocą CSS

Opublikowany: 2015-08-28

Co druk ma wspólnego z siecią?

Większość z nas żyje online, czerpiąc wszystkie informacje z sieci. Jesteśmy połączeni przez cały dzień, każdego dnia, z wielu urządzeń. Być może słyszeliście, że odcisk jest martwy, podczas gdy w rzeczywistości to z pewnością nie jest prawda! Możemy nie drukować tak często, jak kiedyś, ale są sytuacje, w których przeglądanie treści na urządzeniu po prostu nie zastąpi posiadania papierowej kopii do obejrzenia. Czy masz wartościowe instrukcje, kupony do wykorzystania, wskazówki, przykłady portfolio lub cokolwiek innego, co użytkownicy woleliby zobaczyć w formie drukowanej? Jeśli tak, ustawienie niestandardowych reguł drukowania w Twojej witrynie z pewnością pomoże ukształtować wrażenia użytkowników.

Drukarka biurowa

Jak zaprojektować do druku

Cała magia zawarta jest w CSS poprzez zdefiniowanie stylów specyficznych dla druku. Pomocne może być utworzenie osobnego arkusza stylów print.css , aby był oddzielony od wszystkich innych stylów. Należy pamiętać, że nie wszystkie witryny mają arkusz stylów drukowania; jest to dodatkowa funkcja i krok w procesie rozwoju. Jeśli nie określono stylów drukowania, do drukowania używane są style domyślne. Będziemy definiować style, aby usprawnić drukowanie, które zastąpią wszelkie ustawienia domyślne.

Pamiętaj: nigdy nie należy wprowadzać zmian w działającej witrynie. Nasza bezpłatna aplikacja do programowania lokalnego, Local, pomoże Ci uprościć przepływ pracy i bezpiecznie eksperymentować z witryną. Wypróbuj już dziś!

Konwencja nazewnictwa i określone style będą unikalne dla arkusza stylów Twojego projektu, ale te koncepcje będą miały zastosowanie. Po dodaniu podstaw przejrzyj domyślny arkusz stylów swojej witryny i poszukaj wyjątkowych sytuacji, które wymagają stylów drukowania, aby zapewnić najlepszą jakość drukowania.

Zagadnienia dotyczące koloru i układu

Większość ludzi woli drukować w czerni i bieli ze względu na koszt kolorowego atramentu. Ponadto kontrast jest wyższy, gdy tekst jest czarny i drukowany na białym papierze. Zapewne znasz media kwerendy, ponieważ mają one kluczowe znaczenie w nowoczesnym, responsywnym projektowaniu stron internetowych. Zapytania o media są również niezbędne do tworzenia stylów druku.

Oto, co sprawi, że tekst w treści będzie czarny i pozbędzie się dowolnego koloru tła, aby uzyskać najlepszy wydruk:

@media print {
body {
color: #000;
background: #fff;
}
}




Są szanse, że tekst zostanie wydrukowany czcionką Times New Roman. Nie ma w tym nic złego, ale co, jeśli chcesz określić inną czcionkę? Podobnie jak w przypadku domyślnych stylów, można to zrobić również w wersji drukowanej. Skoro już przy tym jesteśmy, nie zapominajmy o wysokości linii.


body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Ukrywanie niepotrzebnych elementów


Prawdopodobnie zostałeś uwarunkowany, aby zachować display: none do minimum, ale jest to całkowicie w porządku dla twoich stylów drukowania. Ukrywając niektóre elementy, dajesz użytkownikom lepszy sposób na drukowanie i przechowywanie wszystkiego, co niepotrzebne w wersji papierowej. Celem jest umożliwienie im efektywnego drukowania najważniejszych treści, a nie dokładnej strony internetowej.
		




Istnieją elementy strony, które nie są konieczne, takie jak nawigacja, stopka, pasek boczny i obrazy tła, więc tutaj nasz display: none się nie przyda.


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




Artykuły są często drukowane, więc dobrze jest, gdy każdy artykuł zaczyna się na osobnej stronie. Użytkownikowi znacznie łatwiej jest zorganizować swoje wydruki, jeśli kluczowe informacje są zgrupowane i nie są rozłożone na wielu stronach.


Dodając to do arkusza stylów drukowania, artykuły zawsze zaczynają się na nowej stronie:
		




article {
page-break-before: always;
}




Utrzymywanie nieuporządkowanych list razem na tej samej stronie to również świetny pomysł:


ul {
page-break-inside: avoid;
}




Pójdźmy o krok dalej i zróbmy to samo dla nagłówków, obrazów, cytatów blokowych, tabel i innych elementów list:


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




W tym miejscu odstępy można naprawdę precyzyjnie dostroić do wydruków. Nie często zdarza się, że widzisz centymetry w projektowaniu stron internetowych, ale sprawdza się to świetnie w celu określenia granic na stronie. Reguła @page określa, w jaki sposób będziemy kierować odstępy. Ten przykład pozwoli na 2cm wokół wszystkich granic. Ten pomiar można dostosować, aby zapewnić więcej lub mniej miejsca. Na przykład, Twoi użytkownicy mogą chcieć robić notatki i pomocne byłoby umożliwienie większego marginesu.
		




@page {
margin: 2cm;
}




Jeśli strony mają być wydrukowane i umieszczone w segregatorze, należy pamiętać, że istnieje możliwość dostosowania marginesów dla każdej innej strony. Lewa strona jest przeznaczona dla stron 1, 3, 5… a prawa strona to strona 2, 4, 6…


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




W niektórych przypadkach przydatne jest dostosowywanie pierwszej strony. Za pomocą pseudoklasy :first first page można określić styl pierwszej wydrukowanej strony:


@page :first {
margin: 1cm 2cm;
}




stylizacja-druku-02


Czy drukowanie Cię stresuje? Oto kilka wskazówek, jak wydrukować swój projekt jak profesjonalista.
		




Pomysły na obraz i tekst wprowadzający


Mogą one dotyczyć Twojej witryny lub nie, ale mimo to warto o nich pamiętać.


Aby zapobiec obcięciu i zacieknięciu obrazów na krawędzi drukowanej strony, dodanie deklaracji maksymalnej szerokości zapobiegnie temu.


img {
max-width: 100% !important;
}




Świetnym dodatkiem jest miła wiadomość powitalna. Treści drukowane będą dostępne przez jakiś czas, więc zawsze dobrze jest dołączyć przyjazną wiadomość lub przypomnienie.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Teraz, gdy omówiliśmy już niektóre podstawowe zagadnienia związane z drukowaniem, łatwo jest włączyć te pomysły do ​​arkusza stylów drukowania. Chociaż druk nie jest tym, o czym ostatecznie myślimy, gdy korzystamy z Internetu, jest to świetny sposób, aby zapewnić użytkownikom takie same wspaniałe wrażenia, niezależnie od tego, w jaki sposób uzyskują dostęp do treści.