Media stronicowane CSS - Reguła @page
Media stronicowane różnią się od nośników ciągłych tym, że treść dokumentu jest podzielona na jedną lub więcej oddzielnych stron. Media stronicowane to papier, folie, strony wyświetlane na ekranach komputerów itp.
Standard CSS2 wprowadza kilka podstawowych funkcji kontroli stronicowania, które pozwalają autorom pomóc przeglądarce określić, jak najlepiej wydrukować swoje dokumenty.
Model strony CSS2 określa sposób formatowania dokumentu w prostokątnym obszarze - ramce strony - o skończonej szerokości i wysokości. Funkcje te dzielą się na dwie grupy -
- Funkcje CSS2, które definiują określony układ strony.
- Funkcje CSS2, które kontrolują paginację dokumentu.
Definiowanie stron: reguła @page
CSS2 definiuje „pole strony”, pudełko o skończonych wymiarach, w którym renderowana jest zawartość. Ramka strony to prostokątny obszar zawierający dwa obszary -
The page area- Obszar strony zawiera pola umieszczone na tej stronie. Krawędzie obszaru strony pełnią rolę początkowego bloku zawierającego układ, który występuje między podziałami strony.
The margin area - Otacza obszar strony.
Możesz określić wymiary, orientację, marginesy itp. Ramki strony w ramach reguły @page. Wymiary pola strony są ustawiane za pomocą właściwości „rozmiar”. Wymiary obszaru strony to wymiary pola strony pomniejszone o obszar marginesów.
Na przykład następująca reguła @page ustawia rozmiar pola strony na 8,5 × 11 cali i tworzy margines „2 cm” ze wszystkich stron między krawędzią pola strony a obszarem strony -
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>Możesz użyć właściwości margin, margin-top, margin-bottom, margin-left i margin-right w ramach reguły @page, aby ustawić marginesy dla swojej strony.
Na koniec właściwość marks jest używana w regule @page do tworzenia znaczników kadrowania i rejestrowania poza polem strony na arkuszu docelowym. Domyślnie żadne znaki nie są drukowane. Możesz użyć jednego lub obu słów kluczowych crop i cross, aby utworzyć odpowiednio znaczniki cięcia i znaki rejestracyjne na docelowej stronie wydruku.
Ustawianie rozmiaru strony
Właściwość size określa rozmiar i orientację pola strony. Istnieją cztery wartości, których można użyć do określenia rozmiaru strony -
auto - Pole strony zostanie ustawione na rozmiar i orientację arkusza docelowego.
landscape- Zastępuje orientację celu. Pole strony ma taki sam rozmiar jak cel, a dłuższe boki są poziome.
portrait- Zastępuje orientację celu. Pole strony ma taki sam rozmiar jak cel, a krótsze boki są poziome.
length- Wartości długości dla właściwości „size” tworzą bezwzględną ramkę strony. Jeśli określono tylko jedną wartość długości, ustawia ona zarówno szerokość, jak i wysokość pola strony. W przypadku właściwości „rozmiar” wartości procentowe nie są dozwolone.
W poniższym przykładzie zewnętrzne krawędzie pola strony zostaną wyrównane z celem. Wartość procentowa właściwości „margin” jest odniesiona do rozmiaru docelowego, więc jeśli wymiary arkusza docelowego to 21,0 cm × 29,7 cm (tj. A4), marginesy wynoszą 2,10 cm i 2,97 cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>Poniższy przykład ustawia szerokość pola strony na 8,5 cala, a wysokość na 11 cali. Pole strony w tym przykładzie wymaga docelowego rozmiaru arkusza 8,5 "× 11" lub większego.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>Po utworzeniu nazwanego układu strony można go używać w dokumencie, dodając właściwość strony do stylu, który jest później stosowany do elementu w dokumencie. Na przykład ten styl renderuje wszystkie tabele w dokumencie na stronach w orientacji poziomej -
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>Ze względu na powyższą zasadę, jeśli podczas drukowania przeglądarka napotka element <table> w dokumencie, a bieżący układ strony jest domyślnym układem pionowym, rozpoczyna nową stronę i drukuje tabelę na stronie poziomej.
Lewa, prawa i pierwsza strona
Podczas drukowania dokumentów dwustronnych pola na lewej i prawej stronie powinny być inne. Można to wyrazić za pomocą dwóch pseudoklas CSS w następujący sposób -
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>Możesz określić styl dla pierwszej strony dokumentu za pomocą pseudoklasy: first -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>Kontrolowanie paginacji
O ile nie określono inaczej, podziały stron występują tylko wtedy, gdy zmienia się format strony lub gdy zawartość przepełnia bieżące pole strony. Aby w inny sposób wymusić lub pominąć podziały strony, użyj właściwości przed podziałem strony, po podziale strony i wewnątrz strony .
Zarówno podział strony przed, jak i po podziale strony akceptują słowa kluczowe auto, always, unikaj, lewe i prawe .
Domyślne jest słowo kluczowe auto , które pozwala przeglądarce generować podziały stron w razie potrzeby. Słowo kluczowe zawsze wymusza podział strony przed lub po elemencie, a unikaj pomija podział strony bezpośrednio przed lub po elemencie. Na lewo i prawo wyszukiwane życie jeden lub dwa podziały stron, tak że element jest wyświetlany na lewej lub prawej stronie.
Korzystanie z właściwości paginacji jest dość proste. Załóżmy, że twój dokument ma nagłówki poziomu 1, rozpoczynając nowe rozdziały z nagłówkami poziomu 2, aby oznaczyć sekcje. Chcesz, aby każdy rozdział zaczynał się na nowej, prawej stronie, ale nie chcesz, aby nagłówki sekcji były podzielone na podział strony od późniejszej zawartości. Możesz to osiągnąć stosując następującą zasadę -
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>Używaj tylko wartości auto i unikaj z właściwością podziału strony wewnątrz . Jeśli wolisz, aby tabele nie były podzielone na strony, jeśli to możliwe, napisz regułę -
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>Kontrolowanie wdów i sierot
W żargonie typograficznym sieroty to te wiersze akapitu pozostawione na dole strony z powodu podziału strony, podczas gdy wdowy to te wiersze, które pozostają na górze strony po podziale strony. Ogólnie drukowane strony nie wyglądają atrakcyjnie, gdy pojedyncze wiersze tekstu są oddzielone od góry lub od dołu. Większość drukarek stara się pozostawić co najmniej dwa lub więcej wierszy tekstu na górze lub na dole każdej strony.
Plik orphans właściwość określa minimalną liczbę wierszy akapitu, które muszą pozostać na dole strony.
Plik widows właściwość określa minimalną liczbę wierszy akapitu, które muszą pozostać na górze strony.
Oto przykład tworzenia 4 wierszy na dole i 3 wierszy na górze każdej strony -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>