Wydruk @media print
W jaki sposób dostosować stronę WWW do wydruku bez potrzeby tworzenia nowej wersji? W jaki sposób ukryć na wydruku niektóre elementy strony?
Jest oczywiste, że dokument wydrukowany na drukarce, wygląda inaczej niż na ekranie monitora (w przeglądarce internetowej). Podczas drukowania zwykle pomijane są wszystkie parametry, które dotyczą tła (trudno sobie wyobrazić wydrukowanie strony z czarnym tłem 🙂). Z uwagi na odrębność różnych mediów, wprowadzono możliwość definiowania oddzielnych własności dla różnych form prezentacji dokumentu.
Na przykład rozmiar czcionki można ustalić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty na komputerze potrzebują zwykle większej czcionki niż na papierze. Podobnie doświadczenie wskazuje, że czcionki z rodziny sans-serif są czytelniejsze na ekranie, podczas gdy serif - na papierze. Z tych powodów konieczne jest określenie, że dany arkusz stylów lub jego część jest przyporządkowana do pewnego z mediów. Oznacza to, że można sprawić, aby ta sama strona, po wydrukowaniu, wyglądała zupełnie inaczej niż na ekranie monitora. Możemy np. chcieć, aby cały tekst został napisany kolorem czarnym, zmniejszyć jego wielkość, a nawet usunąć wyświetlanie obrazków czy menu nawigacyjnego (po co komu menu na papierze?) itd.
Istnieją dwie drogi do określenia niezależności arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech:
- Wydzielenie dla wydruku części istniejącego arkusza:
📋 Zaznacz kod ▶ Edytuj na żywo
/* Domyślny arkusz dla wszystkich mediów */ /* (tu znajdują się ogólne deklaracje) */ /* (...) */ @media print { /* Arkusz dla wydruku */ }
- Dołączenie specjalnie dla wydruku zewnętrznego arkusza:
📋 Zaznacz kod ▶ Edytuj na żywo
<head> <link rel="stylesheet" href="domyslny.css"> <link rel="stylesheet" href="wydruk.css" media="print"> </head>
- Dołączenie specjalnie dla wydruku wewnętrznego arkusza:
📋 Zaznacz kod ▶ Edytuj na żywo
<head> <style media="print"> /* Arkusz dla wydruku */ </style> </head>
[zobacz także rozdział pt.: Media].
UWAGA! Kolejność wpisywania poleceń ma znaczenie, tzn. najpierw należy określić arkusz domyślny (deklaracje w istniejącym arkuszu lub dołączenie zewnętrznego), a dopiero na końcu ustalamy własności dla wydruku.
Aby zobaczyć efekt, nie musisz za każdym razem drukować całej strony. Wystarczy włączyć w przeglądarce internetowej podgląd wydruku. Zwykle znajduje się on w menu Drukuj. Powinien być również dostępny przy pomocy skrótu klawiaturowego Ctrl+P.
Przykład @media print
Ta strona powinna wyglądać inaczej na wydruku. Aby to sprawdzić włącz podgląd wydruku (menu Drukuj albo skrót klawiaturowy Ctrl+P).
Komentarze
- VBService
07.12.2024 16:03
Luke: "Tutaj piszą, że "się nie da".
https://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table".
jest też taki komentarz:
"I added long table in div in html file, Then I added @media print{ thead { display: table-header-group;} tfoot...
Zobacz więcej - Luke
24.04.2014 19:29
Tutaj piszą, że "się nie da".
https://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table
Zobacz więcej - Tuomi
24.04.2014 19:28
Tak. To kod mojego CSSa...
Zobacz więcej - DeXTeD
24.04.2014 19:20
Hmm, a próbowałeś do td zamiast tr?
Zobacz więcej - Tuomi
24.04.2014 19:15
Niestety, dalej jest tak, że górna ramka wiersza zostaje a dolna jest na następnej stronie.
Zobacz więcej - DeXTeD
24.04.2014 12:10
[...] Chyba powinno załatwić sprawę.
Zobacz więcej - Tuomi
23.04.2014 22:37
Witam.
Chciałem się zapytać jak zrobić przełamanie drukowania, ale w tabeli, tzn żeby <tr></tr> było przenoszone na kolejną stronę. Próbowałem różnych sposobów i ciągle jest bez zmian, tzn.: gdy kończy się strona to widać początek kolejnego wiersza, którego kontynuacja jest na...
Zobacz więcej - bla
28.02.2013 17:18
Mam taki problem z poleceniem, natomiast nie działa jeśli dodam go w 'div'. Inaczej jak dodam do 'table', działa na tabelę, ale tytuł tabeli zostawia na poprzedniej stronie. Jakieś propozycje?
Zobacz więcej