Napraw kiepski wydruk: własny arkusz @media print dla dowolnej strony
Wciskasz Ctrl+P na długim artykule, a podgląd to katastrofa: pasek nawigacji zjada pierwszą stronę, sidebar nachodzi na tekst, baner cookie unosi się nad trzecim akapitem, a jednolite ciemne tło zaraz opróżni Twój wkład do drukarki. Strona po prostu nigdy nie napisała arkusza druku. Więc napisz go sam — żyje w regule CSS w JustZix i sprawia, że „Zapisz jako PDF” znów jest użyteczne.
Dlaczego większość stron drukuje się źle
Drukowanie to najbardziej ignorowana część tworzenia stron. Projektanci testują na ekranach; QA testuje na ekranach; nikt nie otwiera podglądu wydruku. Skutek jest taki, że ogromna część sieci ma albo w ogóle brak bloku @media print, albo jeden napisany lata temu, który już nie pasuje do układu. Przeglądarka drukuje wtedy układ ekranowy jak jest — stałe nagłówki, siatki wielokolumnowe, ciemne motywy i wszystko inne.
Rozwiązaniem jest reguła CSS, która stosuje się tylko wtedy, gdy strona jest drukowana. Wszystko wewnątrz @media print { ... } jest niewidoczne na ekranie i włącza się tylko dla papieru i eksportu do PDF. To znaczy, że możesz być agresywny: ukrywać całe obszary, przekolorowywać wszystko, wymuszać jedną kolumnę — nic z tego nie dotyka normalnego przeglądania.
Krok 1 — ukryj wszystko, co nie jest treścią
Nawigacja, sidebary, stopki, widżety udostępniania, banery cookie, lepkie pudełka „subskrybuj”: nic z tego nie należy do papieru. Zacznij od ukrycia oczywistych elementów chrome.
@media print {
header, nav, aside, footer,
.sidebar, .site-header, .site-footer,
.cookie-banner, .newsletter, .share-bar,
.ad, [class*="advert" i], [id*="cookie" i],
[role="banner"], [role="navigation"],
[aria-label*="cookie" i] {
display: none !important;
}
}Jeśli strona nadal drukuje śmieci, otwórz podgląd wydruku, znajdź problematyczny blok w DevTools i dodaj jego selektor do listy. Musisz to zrobić tylko raz na stronę — reguła jest zapisana.
Krok 2 — rozwiń skróconą treść
Wiele stron ogranicza tekst do kilku linii, ukrywa nadmiar albo umieszcza artykuł w przewijanym pudełku o stałej wysokości. Na ekranie to w porządku; na papierze ucina Ci treść. Cofnij ograniczanie.
@media print {
/* Kill height limits and scroll boxes */
main, article, .content, .post-body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Undo line-clamp truncation */
* {
-webkit-line-clamp: unset !important;
overflow: visible !important;
}
/* Force the article full width, drop the grid */
body, main, article {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
}
}Globalne overflow: visible na * wygląda na nadgorliwe, ale wewnątrz @media print to dokładnie to, czego chcesz — nic nie powinno być przycięte na wydruku.
Krok 3 — kontroluj podziały stron
Największą pojedynczą poprawą wydruku jest powstrzymanie rzeczy przed łamaniem się między stronami w środku elementu. Blok kodu rozdzielony na dwie kartki, nagłówek osierocony na dole strony, wiersz tabeli rozerwany na pół — wszystko do naprawienia za pomocą właściwości fragmentacji.
@media print {
/* Never split these across a page */
pre, blockquote, table, figure, img,
li, .card {
break-inside: avoid;
}
/* Keep a heading with the text that follows it */
h1, h2, h3, h4 {
break-after: avoid;
}
/* Start each top-level section on a fresh page */
.chapter, section.page {
break-before: page;
}
}Nowoczesne właściwości to break-inside, break-before i break-after. Stare nazwy page-break-* nadal działają i Chrome mapuje je automatycznie, ale do nowych reguł pisz te nowe.
Krok 4 — pokaż adresy URL po linkach
Wydrukowany link jest bezużyteczny — czytelnik nie kliknie „kliknij tutaj”. Wydrukuj faktyczny URL obok niego za pomocą sztuczki z wygenerowaną treścią.
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
word-break: break-all;
}
/* Don't print URLs for in-page anchors or javascript: links */
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
}To wciąga atrybut href do widocznego tekstu. Pomiń to dla linków kotwicznych i linków do obrazów, jeśli robi się głośno — wydruk pełen długich URL-i śledzących to swój własny rodzaj bałaganu.
Krok 5 — ustaw marginesy za pomocą @page
Reguła @page kontroluje samą drukowaną kartkę: jej marginesy i rozmiar. Przeglądarki pozwalają też ustawić marginesy w oknie dialogowym druku, ale wpieczenie ich w regułę oznacza, że każdy wydruk tej strony jest spójny.
@media print {
@page {
margin: 18mm 16mm;
size: A4;
}
/* Tighter margin on the first page if you have a title block */
@page :first {
margin-top: 12mm;
}
}Krok 6 — wymuś jasne tło, aby oszczędzać tusz
Strony z ciemnym motywem drukują się jako ściana tonera. Domyślnie Chrome usuwa kolory tła przy drukowaniu (chyba że zaznaczono „Grafika tła”), ale tekst często pozostaje jasnoszary przy założeniu ciemnego tła. Wymuś czystą czerń na bieli.
@media print {
html, body, * {
background: #fff !important;
background-image: none !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Keep images and real photos intact */
img, svg, video { filter: none !important; }
/* Slightly soften secondary text so it still reads as secondary */
.muted, .meta, time, small { color: #444 !important; }
}To gwarantuje czytelny, tani w tuszu wydruk niezależnie od motywu strony — i dobrze współgra z wyłączeniem „Grafiki tła” w oknie dialogowym druku.
Składanie tego w JustZix
- Utwórz regułę ograniczoną do strony, z której często drukujesz — na przykład
https://docs.example.com/*. - Wklej wszystkie sześć bloków do panelu CSS, owinięte w jeden
@media print(albo trzymaj osobne bloki — oba sposoby działają). - Otwórz stronę, wciśnij Ctrl+P i obserwuj podgląd. Iteruj: cokolwiek nadal jest nie tak, dostaje dodany selektor.
- Zsynchronizuj swój klucz, aby ta sama czysta konfiguracja druku podążała za Tobą na każde urządzenie.
Ponieważ całość siedzi wewnątrz @media print, możesz zostawić regułę aktywną na stałe. Jest uśpiona podczas normalnego przeglądania i budzi się tylko, gdy drukujesz lub eksportujesz PDF.
Pułapki warte poznania
- Przełącznik grafiki tła — okno dialogowe druku Chrome ma pole „Grafika tła”, które nadpisuje niektóre Twoje wybory kolorów. Twoje reguły
!importantnadal wygrywają dla pierwszego planu, ale przetestuj oba stany. - Elementy fixed/sticky powtarzają się na każdej drukowanej stronie w niektórych przeglądarkach. Jeśli nagłówek wciąż się pojawia, ustaw na nim
position: static !importantwewnątrz bloku druku. - Wygenerowane URL-e mogą się brzydko zawijać — dlatego dodajemy
word-break: break-all; bez tego długi URL wypycha układ na bok. - Nie ukrywaj zbyt wiele — podpisy, źródła ilustracji i informacje o autorze to treść, nie chrome. Bądź precyzyjny ze swoją listą ukrywania.
Zobacz też
- Nakładka do debugowania responsywności — znajdź problemy z układem zanim trafią na wydruk.
- Skopiuj stronę jako czysty Markdown — inny sposób na wyciągnięcie treści z bałaganiarskiej strony.
Dobry arkusz druku to jednorazowa, piętnastominutowa robota, która opłaca się za każdym razem, gdy zapisujesz PDF. Zainstaluj JustZix, ogranicz regułę do najczęściej drukowanej strony i nigdy więcej nie walcz z podglądem wydruku.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.