Przejdź do treści

Typ strony wydruku {page}

W jaki sposób wydrukować część stron poziomo, a pozostałe pionowo?

@page strona { cecha: wartość }
selektor { page: strona }
Jako strona należy wpisać dowolny tekst, który może się składać z małych i wielkich liter łacińskich (bez polskich znaków diakrytycznych), cyfr i myślników "-". Nie może się jednak zaczynać cyfrą ani myślnikiem. Aby użyć innych znaków, należy je poprzedzić odwróconych ukośnikiem "\".

Jako cecha i wartość można wstawić jedną lub więcej deklaracji odpowiednich dla kontekstu strony.

Selektorem może być dowolny znacznik blokowy - np. table - tabela.

Załóżmy, że nasza strona to np. opracowanie naukowe. Składa się ono przeważnie z tekstu, ale zawiera również kilka rozbudowanych tabel posiadających dużą liczbę kolumn. W takiej sytuacji tekst najlepiej by było wydrukować w orientacji pionowej, ale wtedy tabele mogą się nie zmieścić w szerokości kartki papieru. Nie chcielibyśmy też całego dokumentu drukować w orientacji poziomej, ponieważ w ten sposób ułożony na kartce tekst niewygodnie się czyta. Nie chcielibyśmy również zmuszać użytkownika, żeby osobno drukował strony dokumentu zawierające akapity tekstu, a potem ręcznie przestawiał orientację papieru, aby wydrukować zbyt szerokie tabele.

Na szczęście dzięki CSS można rozwiązać ten problem. Strony wydruku mogą zostać nazwane przy pomocy reguły @page strona. Następnie taką nazwę wystarczy przypisać do wybranego elementu przy pomocy dowolnego selektora CSS. Pierwsze z tych poleceń wystarczy wstawić w arkuszu stylów tylko raz, a drugie możemy użyć tyle razy, ile potrzebujemy. Na wszelki wypadek dobrze jest również wymusić przełamanie strony.

Przykład {page}

📋 Zaznacz kod ▶ Edytuj na żywo

@page poziomo {
	size: landscape;
}

table {
	page: poziomo;
	page-break-before: always;
	page-break-after: always;
}

Przeglądarki

  🟡 Działa krócej niż 2,5 roku

Chrome
Firefox
Edge
Opera
Safari		Poziom wsparcia
min. 2,5 roku
page: wartość85
2020-08-25		🟡 110
2023-02-14		85
2020-08-27		71
2020-09-15		≤13.1
2020-03-24		 80%

Komentarze #

Zobacz więcej komentarzy

Facebook