Chociaż mieszkamy era cyfrowa gdzie wszystko jest łatwo dostępne, nadal jest wielu ludzi, którzy wolą czytać długi tekst z papieru. Istnieje możliwość, że niektórzy użytkownicy wydrukują tekst z Twojej witryny, aby przeczytać go poza komputerem.

Możliwość renderowania treści odpowiednich do druku istnieje już od dawna. Możemy to zrobić, używając reguły @media w arkuszu stylów, w ten sposób:

@media print ( /* Zasady stylu */ )

Istnieje kilka właściwości, które pozwalają nadać styl zawartości strony internetowej tak, aby była gotowa do druku, a my omówimy jedną z nich: podziały stron.

Co to robi?

Jeśli pracowałeś z redaktorzy tekstu, takie jak Microsoft Word i Pages, powinieneś znać menu podziału strony, które umożliwia przenoszenie tekstu na następną stronę.

Ten moduł robi to samo, pozwalając kontrolować sposób przesyłania zawartości strony internetowej, strona po stronie.

Korzystanie z podziału strony

Jako przykład stworzyliśmy stronę demonstracyjną, którą zamierzamy wydrukować. Znaleźliśmy na nim nieudany przelew, co widać poniżej.

Będzie wyglądać lepiej, jeśli nagłówek i stopka będą zaczynać się na następnej stronie.

Aby to zrobić, używamy właściwości page-break-after i ustawiamy ją tak, aby zawsze wymuszała przejście następnego elementu na następną stronę.

Podział strony (podział strony po: zawsze ;)

Możesz następnie utworzyć nowy element z klasą pomiędzy elementami lub w ten sposób przypisać klasę do poprzedniego elementu.

Dzięki funkcji Gumka możesz zrób kompozycję zdjęcia, a następnie złóż to wszystko w jedną całość, aby uzyskać tło bez dodatków, których nie potrzebujesz.

Telefon, z którym możesz podróżować

S Translator będzie doskonałym narzędziem w Twoich podróżach, ponieważ...

Teraz nagłówek i dolna linia zawieszenia zaczną się na następnej stronie.

Górne i dolne linki wiszące

Powyższa metoda może być uciążliwa, jeśli masz dużo tekstu. Zamiast więc zmuszać zawartość do przejścia na następną stronę, lepiej byłoby ustawić minimalny próg dla górnych i dolnych zwisających linii.

W praktyce typograficznej górne i dolne linie odnoszą się do pozostałych słów i krótkich linii, które wydają się odłączone od reszty akapitu na innej stronie.

Korzystając z właściwości sierot (dolny sznurek do powieszenia) i wdów (górny sznurek do zawieszenia) możemy ustawić próg minimalny. W poniższym przykładzie określamy, że na dole lub na początku akapitu, w którym następuje podział strony, pozostają co najmniej trzy linie.

P (sieroty: 3; wdowy: 3;)

Dodatkowe źródła

Omówiliśmy podstawy stosowania podziałów stron w druku w tekście witryny internetowej i mamy nadzieję, że zainspiruje Cię to do zastanowienia się nad stylami drukowania w witrynie, aby treść wyglądała dobrze zarówno na ekranie, jak i na papierze.

Tłumaczenie – Dyżurka

Jak sobie radzić z przerwami na stronach podczas drukowania dużych rozmiarów Tabele HTML (8)

Mam projekt, który wymaga wydrukowania tabeli HTML z wieloma wierszami.

Mój problem polega na tym, że tabela jest drukowana na wielu stronach. Czasami przecina linię na pół, przez co jest nieczytelna, ponieważ jedna połowa znajduje się na krawędzi strony, a reszta jest drukowana na górze następnej strony.

Jedynym wiarygodnym rozwiązaniem, jakie przychodzi mi na myśl, jest użycie złożonych elementów DIV zamiast tabeli i wymuszenie podziału stron, jeśli to konieczne... ale zanim przejdę do wszystkich zmian, pomyślałem, że mogę zapytać tutaj wcześniej.

Użyj tych właściwości CSS:

Podział strony po podziale strony przed

Na przykład:

@media print (tabela (podział strony po:zawsze)) ....

Żadna z odpowiedzi tutaj nie zadziałała dla mnie w Chrome. AAverin na GitHub stworzył do tego przydatny JavaScript i zadziałał dla mnie:

Po prostu dodaj js do swojego kodu i dodaj klasę splitForPrint do tabeli, a ona starannie podzieli tabelę na wiele stron i doda nagłówek tabeli do każdej strony.

Uwaga: gdy używasz podziału strony: zawsze dla tagu, tworzy on podział strony po ostatnim fragmencie tabeli, tworząc za każdym razem całkowicie pustą stronę! Aby to naprawić, po prostu zmień go na page-break-after: auto. Złamie się poprawnie i nie utworzy dodatkowej pustej strony.

@media print ( table ( podział strony po:auto ) tr ( podział strony wewnątrz:unikaj; podział strony po:auto ) td ( podział strony wewnątrz:unikaj; podział strony po:auto ) thead (wyświetlanie:grupa-nagłówków-tabeli) tfoot (wyświetlanie:grupa-stopek-tabeli)) ....

Przyjęta odpowiedź nie działała dla mnie we wszystkich przeglądarkach, ale postępowanie zgodnie z css zadziałało dla mnie:

Tr ( display: grupa wierszy tabeli; podział strony wewnątrz:unikaj; podział strony po:auto; )

Struktura HTML była następująca:

...

W moim przypadku wystąpiły dodatkowe problemy z ad tr , ale to rozwiązało pierwotny problem przechowywania wierszy tabeli.

Z powodu problemów z nagłówkiem skończyło się na:

#theTable td * ( podział strony w środku:unikaj; )

Nie powstrzymało to jednak łamania się rzędów; tylko zawartość każdej komórki.

Skończyło się na podejściu @vicenteherrera z pewnymi poprawkami (które mogą być bootstrapem 3).

W zasadzie; nie możemy złamać tr ani td, ponieważ nie są to elementy na poziomie blokowym. Zatem wstawiamy div do każdego z nich i stosujemy do nich nasze zasady podziału strony*. Po drugie, dodajemy trochę wypełnienia na górze każdego z tych elementów div, aby skompensować wszelkie artefakty stylizacyjne.

@media print ( /* unikaj przecinania tr na pół */ th div, td div ( margines-góra: -8px; góra dopełnienia: 8px; podział strony wewnątrz:unikaj; ) ) $(dokument).ready (funkcja())( // Zawiń zawartość każdego tr i td w div // (todo: dodaj logikę, abyśmy robili to tylko podczas drukowania) $("table tbody th, table td td").wrapInner(" ");))

Konieczne były poprawki i dostosowania dodatków, aby skompensować pewien wprowadzony jitter (przypuszczam, że z bootstrapu). Nie jestem pewien, czy przedstawiam nowe rozwiązanie spośród innych odpowiedzi na to pytanie, ale może komuś to pomoże.

Niedawno rozwiązałem ten problem dobrym rozwiązaniem.

UnikajBreak (obramowanie: 2px pełne; podział strony wewnątrz:unikaj;)

Funkcja Print())( $(.tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); okno.print();

Działa jak urok!

Przetestowałem wiele rozwiązań i żadne nie działało dobrze.

Spróbowałem więc małej sztuczki i działa:

tfoot ze stylem: pozycja: stała; dół: 0px; pozycja: stała; dół: 0px; znajduje się na dole ostatniej strony, natomiast jeśli stopka jest zbyt wysoka, nachodzi na treść tabeli.

tfoot tylko z: display: table-footer-group; nie nakłada się na siebie, ale nie znajduje się na dole ostatniej strony...

Postawmy dwie stopy:

TFOOT.placer (wyświetlanie: grupa stopek tabeli; wysokość: 130px; ) TFOOT.contenter ( wyświetlanie: grupa stopek tabeli; pozycja: stała; dół: 0px; wysokość: 130px; ) tutaj swój długi tekst lub wysoki obraz

Rezerwuje się miejsce na ostatnie strony, drugi znajduje się w Twojej osobistej stopce.

Tabela testowa ( podział strony wewnątrz: auto ) tr ( podział strony wewnątrz: unikaj; podział strony po: auto ) thead ( display: table-header-group ) tfoot ( display: table-footer-group )

nagłówek

notatki

X

X

X

Ten tweet mnie wciągnął. Nagle zdałem sobie sprawę, że nie pamiętam już, kiedy optymalizowałem strony internetowe pod kątem drukowania, a nawet sprawdzałem, w jaki sposób były wysyłane na drukarkę.

Podczas tworzenia stron internetowych główna uwaga skupia się na elektronicznych wersjach witryn. Strony należy sprawdzić w wielu przeglądarkach, przetestować na nich różne rozmiary Windows... Czy są tu drukarki? A może zapomniałem o stylach druku, bo sam rzadko wykonuję papierowe kopie stron. Tak czy inaczej, uznałem, że sytuację należy pilnie naprawić.

Wersja drukowana strony internetowej ma takie samo prawo istnienia jak wersja elektroniczna. A jeśli staramy się, aby nasze materiały były jak najbardziej dostępne, nie powinniśmy zaniedbywać mediów papierowych. Ponadto nie należy przyjmować założeń na temat użytkowników i ich zachowań. Ludzie nadal drukują strony internetowe na drukarkach. Pomyśl tylko o artykułach lub wpisach na blogach, stronach z przepisami, informacjami kontaktowymi, wskazówkami lub listami. Prędzej czy później ktoś z pewnością spróbuje wydrukować coś, co zamieściłeś w Internecie.

Oto, co mówi na ten temat Haydon Pickering, autor książki „Inclusive Design Patterns”: „Od dawna nie korzystam z drukarek domowych. Rzecz w tym, że mam wrażenie, że pękają jakieś dziesięć minut po rozpoczęciu drukowania. Ale ja nie jestem wszystkim.

Jeśli teraz zdajesz sobie sprawę, że tak jak ja nie przykładałeś wystarczającej uwagi do stylów druku, mam nadzieję, że moja historia dobrze Ci posłuży i pomoże szybko odświeżyć pamięć. A jeśli nigdy nie optymalizowałeś stron internetowych pod kątem drukarek, mój mały zbiór przydatnych trików CSS pomoże Ci zacząć.

1. Używanie stylów drukowania CSS Najlepszym sposobem na włączenie stylów drukowania na stronie jest zadeklarowanie reguły @media w głównym pliku CSS.

Treść (rozmiar czcionki: 18px; ) @media print ( /* style drukowania zostaną tu umieszczone */ body (rozmiar czcionki: 28px; ) )
Alternatywnie możesz umieścić style drukowania w osobnym pliku i zawrzeć go w formacie HTML, ale przy takim podejściu będziesz potrzebować dodatkowego żądania podczas ładowania strony.

2. Testowanie Jak oceniać wygląd strona internetowa przygotowana do druku? Dla każdego jest jasne, że przelanie tego na papier po każdej zmianie stylu już nie najlepsze rozwiązanie. Na szczęście możliwości przeglądarki są wystarczające do „bezpapierowego” sprawdzania drukowanych wersji stron.

W zależności od przeglądarki możesz wyeksportować stronę do formatu PDF, skorzystać z funkcji podglądu, a nawet debugować stronę bezpośrednio w przeglądarce internetowej.

Aby debugować style drukowania w przeglądarce Firefox, otwórz Panel programisty za pomocą skrótu klawiaturowego Shift + F2 lub wykonując polecenie menu Develop → Panel programisty. Wejdź wiersz poleceń znajdującą się w dolnej części okna: media emulate print, kończąc wpis naciskając Enter. Aktywna karta będzie działać tak, jakby jej rodzaj nośnika był drukowany, dopóki nie zamkniesz lub odświeżysz strony.

Emulacja drukowania w przeglądarce Firefox

Chrome ma również podobną funkcję. Otwórz Narzędzia programistyczne, w przypadku których w systemie MacOS możesz użyć kombinacji klawiszy CMD + Opt + I, w Windows – Ctrl + Shift + I lub wykonać polecenie menu Dodatkowe narzędzia → Narzędzia programistyczne. Następnie otwórz panel renderowania. Jednym ze sposobów, aby to zrobić, jest naciśnięcie klawisza Esc w celu wyświetlenia panelu Konsola, a następnie użycie menu w celu otwarcia panelu Rendering. W panelu renderowania ustaw flagę Emuluj multimedia CSS i wybierz opcję Drukuj.

Emulacja drukowania w przeglądarce Chrome

Więcej o testowaniu drukowanych wersji stron internetowych możesz przeczytać na StackOverflow.

3. Bezwzględne jednostki miary Bezwzględne jednostki miary nie są zbyt odpowiednie w przypadku ekranowych wersji stron, ale do drukowania są właśnie tym, czego potrzebujesz. W stylach drukarskich jest to całkowicie bezpieczne, ponadto zaleca się stosowanie bezwzględnych jednostek miary, takich jak cm, mm, in, pt czy pc.

Sekcja (margines-dół: 2cm; )

4. Właściwości strony Za pomocą reguły @page możesz kontrolować właściwości strony, takie jak ich rozmiar, orientacja i marginesy. Jest to bardzo przydatne, gdy chcesz, aby wszystkie drukowane strony miały takie same marginesy.

@media print ( @strona ( margines: 1cm; ) )
Reguła @page jest częścią standardu Paged Media Module, który oferuje wiele ciekawych funkcji, takich jak wybór pierwszej strony do wydrukowania, dostosowywanie puste strony, pozycjonowanie elementów w rogach strony oraz . Można go nawet wykorzystać do przygotowania książek do druku.

5. Zarządzanie podziałami stron Ponieważ drukowane arkusze, w przeciwieństwie do stron internetowych, nie są nieograniczone, treść stron internetowych prędzej czy później zrywa się na jednej kartce papieru i jest kontynuowana na następnej. Istnieje pięć właściwości kontrolujących podziały strony: Podział strony przed elementem Jeśli chcesz, aby element zawsze pojawiał się na początku strony, możesz wymusić podział strony przed nim, korzystając z właściwości page-break-before.

Sekcja (podział strony przed: zawsze; )

▍Podział strony po elemencie Właściwość podziału strony umożliwia ustawienie wymuszonego podziału strony po elemencie. Korzystając z tej właściwości, można również zapobiec pękaniu.

H2 (podział strony: zawsze; )

▍Podział strony wewnątrz elementu Właściwość page-breakinside jest bardzo przydatna, jeśli chcesz uniknąć dzielenia elementu na dwie strony.

Ul (podział strony w środku: unikaj; )

▍Wińczące linie na górze i na dole Czasami nie ma potrzeby wymuszania podziału strony, ale chcesz kontrolować sposób wyświetlania akapitów na granicach strony.

Na przykład, jeśli ostatnim wierszem akapitu jest bieżąca strona nie pasuje, dwie ostatnie linijki tego akapitu zostaną wydrukowane na następnej stronie. Dzieje się tak, ponieważ właściwość, która to kontroluje (wdowy, tj. „górnie wiszące wiersze”) jest domyślnie ustawiona na 2. Można to zmienić.

P (wdowy: 4; )
Jeżeli zaistnieje inna sytuacja i na bieżącej stronie zmieści się tylko jeden wiersz akapitu, cały akapit zostanie wydrukowany na następnej stronie. Właściwość odpowiedzialna za dolne linie wiszące (sieroty) również jest domyślnie ustawiona na 2.

P(sieroty: 3;)
Celem powyższego kodu jest to, że aby cały akapit nie zawinął się na następną stronę, na bieżącej stronie muszą zmieścić się co najmniej trzy linie.

Aby lepiej to zrozumieć, spójrz na przykład przygotowany przy użyciu CodePen. A oto wersja debugowana tego samego przykładu, wygodniej jest przetestować.

*, *:przed, *:po, *:pierwsza litera, p:pierwsza linia, div:pierwsza linia, blockquote:pierwsza linia, li:pierwsza linia ( tło: przezroczyste !ważne; kolor: #000 !ważne; cień pola: brak !ważny; cień tekstu: brak !ważne;
Swoją drogą, style CSS do drukowania są jednym z nielicznych wyjątków, gdzie dyrektywa!important jest absolutnie normalna ;)

7. Usuwanie niepotrzebnej treści Aby nie marnować atramentu, należy usunąć z drukowanej wersji strony wszystko, co niepotrzebne, takie jak ogromne, piękne slajdy, reklamy, narzędzia do nawigacji po witrynie i tym podobne. Można to zrobić, ustawiając właściwość display na none dla niepotrzebnych elementów. Jest całkiem możliwe, że uznasz za słuszne pokazanie tylko głównej zawartości strony i ukrycie całej reszty:

Treść > *:not(main) (wyświetlanie: brak; )

8. Wyświetlanie adresów linków Linki, jakie zwykle znajdują się na stronach internetowych, są całkowicie bezużyteczne po wydrukowaniu, chyba że czytelnik papierowej wersji dokumentu wie, dokąd prowadzą.

Aby wyświetlić adresy linków po ich reprezentacji tekstowej, użyj następującego stylu:

A:po (treść: "(" attr(href) ")"; )
Oczywiście dzięki takiemu podejściu wiele niepotrzebnych rzeczy zostanie „rozszyfrowanych”. Na przykład, powiązania względne, linki bezwzględne w tej samej witrynie, w której znajduje się wydrukowana strona, linki z kotwicami i tak dalej. Aby nie zaśmiecać drukowanej strony, lepiej byłoby zastosować coś takiego:

A:not():after (treść: " (" attr(href) ")"; )
Oczywiście wygląda to szalenie. Wyjaśnię więc znaczenie tej zasady prostym angielskim: „Wyświetlaj wartość atrybutu href obok każdego linku, którego atrybut zaczyna się od http, ale nie zawiera mywebsite.com.”

9. Objaśnienie skrótów Skróty w tekście muszą być umieszczone w tagu, a ich objaśnienia muszą być zawarte w atrybucie tytułu. Jeśli sformatujesz skróty w ten sposób, ich znaczenie będzie bardzo łatwo widoczne na wydruku:

Abbr:after (treść: "(" attr(title) ")"; )

10. Wymuszone drukowanie tła Zazwyczaj przeglądarki podczas tworzenia strony do druku nie wyświetlają się kolor tła I obrazy tła, chyba że wyraźnie to wskażą. Czasami jednak wszystko to trzeba wydrukować. Pomoże nam w tym niestandardowa właściwość print-color-dopasowanie, która pozwala na nadpisanie ustawień domyślnych dla niektórych przeglądarek.

Nagłówek ( -webkit-print-color-dopasuj: dokładnie; drukuj-dopasuj kolor: dokładnie; )

11. Zapytania o media Jeśli piszesz zapytania o media takie jak to poniżej, pamiętaj, że reguły CSS w takich zapytaniach nie będą miały wpływu na drukowaną wersję strony.

@media screen i (min. szerokość: 48em) ( /* tylko ekran */ )
Dlaczego tak jest? Rzecz w tym, że reguły CSS są stosowane tylko wtedy, gdy wartość min-width wynosi 48em i jeśli typem nośnika jest screen. Jeśli pozbędziesz się tego zapytania o media z słowo kluczowe screen , wówczas będzie on ograniczony jedynie wartością minimalnej szerokości.

@media (min. szerokość: 48em) ( /* wszystkie typy multimediów */ )

12. Druk map Aktualny Wersje Firefoksa i Chrome mogą drukować mapy, ale na przykład Safari nie może tego zrobić. Co zrobić podczas drukowania kart? Jedną z uniwersalnych opcji jest użycie map statycznych zamiast dynamicznych.

Mapa (szerokość: 400 pikseli; wysokość: 300 pikseli; obraz tła: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-dostosowanie-koloru wydruku: dokładne; dostosowanie koloru wydruku: dokładne; )

13. Kody QR Wydrukowanie kodów QR zawierających ważne linki może znacznie poprawić użyteczność papierowych wersji stron internetowych. Oto artykuł z magazynu The Smashing, w którym możesz go znaleźć przydatne wskazówki na ten temat. Jednym z nich jest umieszczanie na drukowanych stronach ich adresów w postaci kodów QR. Dzięki temu użytkownik, aby otworzyć w przeglądarce stronę, z której został wykonany wydruk, nie będzie musiał wpisywać na klawiaturze jej pełnego adresu.14. O drukowaniu niezoptymalizowanych stron Pracując nad tematem drukowania stron internetowych, odkryłem doskonałe narzędzie, które pozwala w wygodny sposób przygotować niezoptymalizowane strony do druku. Korzystanie z Printliminatora

Blok strony składa się z obszaru strony, w którym znajduje się treść, oraz obszaru marginesów otaczającego obszar strony. Reguła @page służy do zmiany niektórych właściwości CSS podczas drukowania dokumentu. Można zmieniać jedynie marginesy elementu marginesu, można także ustawić podziały strony w określonym miejscu.

@strona ( margines: 2 cale; )

W regule @page możesz ustawić poszczególne pola dokumentu, takie jak margines górny, margines prawy, margines dolny, margines lewy:

2. Podziały stron

Możesz kontrolować podziały stron za pomocą właściwości page-break-before, page-break-after i page-break-inside. Te właściwości dotyczą elementy blokowe, dla którego właściwość position jest ustawiona na względną lub statyczną.

podział strony przed

Wartości:
automatyczny
zawsze	Zawsze dodaje podział strony przed elementem.
unikać	Jeśli to możliwe, zapobiega umieszczeniu przerwy przed elementem.
lewy	Dodaje jeden lub dwa podziały strony przed elementem, dzięki czemu następna strona jest sformatowana jako lewa strona. Element zostanie wydrukowany zaczynając od góry lewej strony, tj. na stronie po lewej stronie grzbietu. W przypadku drukowania dwustronnego będzie on widoczny na odwrotnej stronie papieru.
Prawidłowy	Dodaje jeden lub dwa podziały strony przed elementem. Element zostanie wydrukowany zaczynając od góry prawej krawędzi. Następna strona zostanie sformatowana jak strona właściwa.
dziedziczyć

Składnia:

@media print ( h1 (podział strony przed: zawsze;) )

podział strony po

Wartości:
automatyczny	Wartość domyślna określa automatyczne podziały stron.
zawsze	Zawsze dodaje podział strony po elemencie.
unikać	Jeśli to możliwe, zapobiega dodaniu przerwy po elemencie.
lewy	Dodaje jeden lub dwa podziały strony po elemencie, dzięki czemu następna strona jest sformatowana jako lewa strona. Element zostanie wydrukowany zaczynając od góry lewej strony, tj. na stronie po lewej stronie grzbietu. W przypadku drukowania dwustronnego będzie on widoczny na odwrotnej stronie papieru.
Prawidłowy	Dodaje jeden lub dwa podziały strony po elemencie, dzięki czemu następna strona jest sformatowana jako właściwa. Element zostanie wydrukowany zaczynając od góry prawej krawędzi.
dziedziczyć	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia:

@media print ( stopka (podział strony po: zawsze;) )

Właściwość page-break-inside informuje przeglądarkę, czy strona może włamać się do elementu, czy nie. Ale jeśli element okaże się taki dłużej niż strona, wtedy przerwa jest nieunikniona.