Rozmiar papieru @page {size}
Co zrobić, żeby strona WWW była drukowana na kartce w orientacji poziomej? Jak obrócić drukowane zdjęcie? W jaki sposób wydrukować stronę na kartce w formacie A5, A3, B5 lub B4?
@page { size: rozmiar }
- auto - wartość domyślna (najczęściej portrait)
- portrait - wydruk na kartce w orientacji pionowej (portret)
- landscape - wydruk na kartce w orientacji poziomej (krajobraz)
- jedna wartość długości - kwadratowy obszar wydruku o podanych rozmiarach wyrażonych w jednostkach innych niż procent
- dwie wartości długości - szerokość i wysokość obszaru wydruku rozdzielone od siebie spacją
Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed uruchomieniem wydruku, ale nie wszyscy potrafią to zrobić. W takiej sytuacji wygodniej będzie podpowiedzieć drukarce, aby użyła poziomej orientacji papieru (tzw. krajobraz), dzięki czemu zdjęcie będzie można oprawić w ramkę i powiesić na ścianie 😉
W większości domowych drukarek domyślnym formatem papieru jest A4. Jednak często posiadają one uniwersalny podajnik, do którego można załadować arkusze również w innych formatach - np.: A3, A5, B5. Przed uruchomieniem wydruku, podobnie jak w przypadku orientacji papieru, użytkownik może zmienić również format papieru. Możemy mu to jednak ułatwić, od razu podając preferowany format w postaci szerokości i ewentualnie wysokości.
Format | Szerokość | Wysokość |
---|---|---|
A5 | 148mm | 210mm |
A4 | 210mm | 297mm |
A3 | 297mm | 420mm |
B5 | 176mm | 250mm |
B4 | 250mm | 353mm |
JIS-B5 | 82mm | 257mm |
JIS-B4 | 257mm | 364mm |
letter | 8.5in | 11in |
legal | 8.5in | 14in |
ledger | 11in | 17in |
Wymuszanie formatu papieru nie jest tak bezpieczne jak wybór orientacji papieru. Jeśli użytkownik nie zorientuje się i nie włoży do podajnika drukarki arkuszy w wymaganym formacie albo jego drukarka w ogóle nie obsługuje takiego formatu papieru, wydruk może zostać przeskalowany, przez co nie wypełni w całości kartki papieru.
Przykład @page {size}
Wydruk na kartkach ułożonych poziomo:
📋 Zaznacz kod ▶ Edytuj na żywo
@page { size: landscape; }
Jeśli drukarka używa formatu A4, jest to równoważne z podaniem:
📋 Zaznacz kod ▶ Edytuj na żywo
@page { size: 297mm 210mm; }
Przeglądarki
![]() Chrome | ![]() Firefox | ![]() Edge | ![]() Opera | ![]() Safari | Poziom wsparcia min. 2,5 roku | |
---|---|---|---|---|---|---|
@page { size: wartość } | 15 2011-10-25 | 95 2021-12-07 | 79 2020-01-15 | 15 2013-07-02 | 🟧 18.2 2024-12-11 | |
@page { size: jis-b4 } | 83 2020-05-19 | 95 2021-12-07 | 83 2020-05-21 | 69 2020-06-24 | 🟧 18.2 2024-12-11 | |
@page { size: jis-b5 } | 83 2020-05-19 | 95 2021-12-07 | 83 2020-05-21 | 69 2020-06-24 | 🟧 18.2 2024-12-11 |
Komentarze
- VBService
07.12.2024 17: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 20: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 20:28
Tak. To kod mojego CSSa...
Zobacz więcej - DeXTeD
24.04.2014 20:20
Hmm, a próbowałeś do td zamiast tr?
Zobacz więcej - Tuomi
24.04.2014 20: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 13:10
[...] Chyba powinno załatwić sprawę.
Zobacz więcej - Tuomi
23.04.2014 23: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 18: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