BeautifulCode

Promocje Heliona

Bestsellery Heliona

13 Media stronicowane

13.1 Wprowadzenie do mediów stronicowanych

Media stronicowane (np. papier, przezrocza, strony wyświetlane na ekranie monitora itp.) tym różnią się od mediów ciągłych, że w nich treść dokumentu jest podzielona na pewną liczbę osobnych stron. W CSS 2.1 mechanizmem umożliwiającym kontrolę nad stronami jest możliwość ustawiania marginesów pól stron oraz deklarowania złamań strony.

Aplikacja kliencka odpowiada za przeniesienie pól stron na prawdziwe arkusze, na których ma zostać zaprezentowany dokument (papier, przezrocza, ekran itp.). Często relacja między polem strony a arkuszem wynosi 1 do 1, ale nie zawsze tak jest. Oto możliwości przenoszenia treści:

13.2 Pola stron: reguła @page

Pole strony to prostokątny obszar podzielony na dwie części:

W CSS 2.1 nie ma możliwości określenia rozmiaru pola strony.

Marginesy pola strony można określić w regule @page. Reguła ta składa się ze słowa kluczowego "@page", opcjonalnego selektora strony oraz bloku deklaracji. Deklaracje w regule @page znajdują się w kontekście strony.

Selektor strony określa, których stron dotyczą deklaracje. W CSS 2.1 selektory strony mogą określać pierwszą stronę, wszystkie lewe strony lub wszystkie prawe strony.

13.2.1 Marginesy strony

W CSS 2.1 tylko własności marginesów ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' oraz 'margin') mogą być stosowane w kontekście strony. Poniższy schemat przedstawia powiązania między arkuszem, polem strony i marginesami strony:

Ilustracja arkusza, strony
marginesu oraz obszaru strony.   [O]

Przykłady:

Poniższa prosta reguła ustawia marginesy wszystkich stron:

@page {
  margin: 3cm;
}

W kontekście strony nie istnieje pojęcie własności pisma, dlatego nie można w nim używać jednostek 'em' i 'ex'. Wartości procentowe własności marginesowych są obliczane w odniesieniu do wymiarów pola strony. Dla marginesu lewego i prawego brana jest szerokość pola strony, a dla marginesu górnego i dolnego — wysokość pola strony. Dozwolone są wszystkie inne jednostki związane z odpowiednimi własnościami CSS 2.1.

Ze względu na ujemne marginesy (pola strony lub elementów) lub pozycjonowanie bezwzględne treść może znaleźć się poza polem strony. Treść ta może zostać "obcięta" — przez aplikację kliencką, drukarkę lub gilotynę do cięcia papieru.

13.2.2 Selektory strony: wybieranie stron lewych, prawych lub pierwszej

Przy drukowaniu dwustronnym dokumentów, pola stron lewych i prawych mogą być inne. Efekt ten można uzyskać za pomocą pseudoklas CSS, których można używać w selektorach stron.

Wszystkie strony są automatycznie zaliczane przez aplikacje klienckie do pseudoklasy :left lub :right.

Przykłady:

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

Jeśli dla lewych i prawych stron zostaną zdefiniowane różne deklaracje, aplikacja kliencka musi je honorować, nawet jeśli nie przesyła pól tych stron do lewych i prawych arkuszy (np. drukarki drukującej tylko jednostronnie).

Istnieje także możliwość zdefiniowania stylu pierwszej strony dokumentu za pomocą pseudoklasy :first:

Przykłady:

@page { margin: 2cm } /* Wszystkie marginesy zostają ustawione na 2cm */

@page :first {
  margin-top: 10cm    /* Margines górny na pierwszej stronie zostaje ustawiony na 10cm */
}

Własności zdefiniowane w regule @page z pseudoklasami :left i :right są ważniejsze od własności w tej samej regule bez pseudoklas. Własności zdefiniowane w regule @page z pseudoklasą :first są ważniejsze od reguł z pseudoklasami :left i :right.

Deklaracje marginesów lewych i prawych stron oraz pierwszej strony mogą spowodować powstanie obszarów strony o różnych szerokościach. Dla uproszczenia implementacji aplikacje klienckie mogą używać jednej szerokości obszaru strony dla wszystkich stron. W takim przypadku powinien zostać użyty obszar pierwszej strony.

13.2.3 Treść poza polem strony

Podczas formatowania treści w modelu stronicowym część treści może wypaść poza bieżącym polem strony. Na przykład element, którego własność 'white-space' ma wartość 'pre' może wygenerować pole o szerokości większej niż szerokość pola strony. Również pola pozycjonowane bezwzględnie lub względnie mogą wypadać w "niedogodnych" miejscach. Na przykład obraz można umieścić na krawędzi pola strony albo 100 000 metrów pod nim.

Szczegóły formatowania takich elementów nie należą do zakresu tej specyfikacji. Zalecamy jednak przestrzeganie przez autorów i aplikacje klienckie poniższych ogólnych zasad dotyczących treści wychodzącej poza pole strony:

13.3 Łamanie stron

W tym podrozdziale zostały opisane techniki łamania stron w CSS 2.1. Istnieje pięć własności służących do określania miejsc, w których aplikacja kliencka może lub powinna złamać stronę oraz na jakiej stronie (lewej czy prawej) ma zostać wznowione dalsze prezentowanie treści. Każde złamanie strony kończy układ bieżącego pola strony i wymusza rozmieszczenie pozostałych elementów drzewa dokumentu w nowym polu strony.

13.3.1 Własności łamania stron: 'page-break-before', 'page-break-after', 'page-break-inside'

'page-break-before'
Wartość:  auto | always | avoid | left | right | inherit
Wartość domyślna:  auto
Zastosowanie:  elementy blokowe (ale zobacz opis poniżej)
Dziedziczenie:  nie
Wartości procentowe:  nie dotyczy
Media:  wizualne, stronicowane
Wartość obliczana:  jak określono
'page-break-after'
Wartość:  auto | always | avoid | left | right | inherit
Wartość domyślna:  auto
Zastosowanie:  elementy blokowe (ale zobacz opis poniżej)
Dziedziczenie:  nie
Wartości procentowe:  nie dotyczy
Media:  wizualne, stronicowane
Wartość obliczana:  jak określono
'page-break-inside'
Wartość:  avoid | auto | inherit
Wartość domyślna:  auto
Zastosowanie:  elementy blokowe (ale zobacz opis poniżej)
Dziedziczenie:  nie
Wartości procentowe:  nie dotyczy
Media:  wizualne, stronicowane
Wartość obliczana:  jak określono

Opis wartości:

auto
Nie wymusza ani nie zabrania zastosowania złamania strony przed (za, wewnątrz) wygenerowanym polem.
always
Zawsze wymusza złamanie strony przed (za) wygenerowanym polem.
avoid
Unika złamania strony przed (za) wygenerowanym polem.
left
Wymusza jedno lub dwa złamania strony przed (za) wygenerowanym polem tak, że następna strona jest formatowana jako lewa.
right
Wymusza jedno lub dwa złamania strony przed (za) wygenerowanym polem tak, że następna strona jest formatowana jako prawa.

To, czy pierwsza strona dokumentu jest lewa (:left) czy prawa (:right) zależy od głównego kierunku pisma dokumentu. Zgodna aplikacja kliencka może zinterpretować wartości 'left' i 'right' jako 'always'.

Potencjalne złamanie strony zwykle zależy od własności 'page-break-inside' elementu rodzica, własności 'page-break-after' poprzedniego elementu oraz własności 'page-break-before' następnego elementu. Jeśli własności te mają wartość 'auto', wartości 'always', 'left' i 'right' są ważniejsze od wartości 'avoid'.

Aplikacje klienckie muszą zastosować te wartości na rzecz elementów blokowych w układzie normalnym elementu głównego. Aplikacje klienckie mogą także stosować je na rzecz innych elementów, takich jak np. elementy typu 'table-row'.

Jeśli złamanie strony dzieli na części pole, marginesy, obramowanie i dopełnienie tego pola nie są stosowane w miejscu podzielenia.

13.3.2 Złamania wewnątrz elementów: 'orphans', 'widows'

'orphans'
Wartość:  <integer> | inherit
Wartość domyślna:  2
Zastosowanie:  elementy blokowe
Dziedziczenie:  tak
Wartości procentowe:  nie dotyczy
Media:  wizualne, stronicowane
Wartość obliczana:  jak określono
'widows'
Wartość:  <integer> | inherit
Wartość domyślna:  2
Zastosowanie:  elementy blokowe
Dziedziczenie:  tak
Wartości procentowe:  nie dotyczy
Media:  wizualne, stronicowane
Wartość obliczana:  jak określono

Własność 'orphans' służy do określania minimalnej liczby wierszy w elemencie blokowym, które muszą znajdować się na końcu strony. Własność 'widows' służy do określania minimalnej liczby wierszy w elemencie blokowym, które muszą znajdować się na początku strony. Przykłady ich zastosowania do kontroli złamań stron są przedstawione poniżej.

Dozwolone są tylko wartości dodatnie.

Informacje na temat formatowania akapitów znajdują się w podrozdziale o polach liniowych.

13.3.3 Dozwolone złamania stron

W układzie normalnym złamania stron mogą wystąpić w następujących miejscach:

  1. W marginesie pionowym między polami blokowymi. Jeśli w takim miejscu pojawia się niewymuszone złamanie strony, wartości używane odpowiednich własności 'margin-top' i 'margin-bottom' zostają ustawione na '0'. Jeśli natomiast pojawi się wymuszone złamanie strony, wartość używana odpowiedniej własności 'margin-bottom' zostaje ustawiona na '0', a wartość używana odpowiedniej własności 'margin-top' może zostać ustawiona na '0' lub zachowana.
  2. Między polami liniowymi w polu blokowym.
  3. Między krawędzią treści pola blokowego i zewnętrznymi krawędziami treści jego dziecka (krawędziami marginesów dzieci blokowych lub krawędziami pól liniowych dzieci śródliniowych), jeśli znajduje się między nimi przerwa.

Uwaga: oczekuje się, że w CSS 3 za wymuszonym złamaniem strony będzie stosowany odpowiedni margines górny (tzn. nie będzie on ustawiany na '0').

Złamania strony podlegają następującym zasadom:

Jeśli powyższe zasady nie wystarczą, aby dostarczyć tyle złamań, aby treść nie wylała się z pól stron, zasady A, B i D zostają odrzucone, aby znaleźć więcej złamań.

Jeśli to nie pomoże, również zasada C zostaje opuszczona, aby znaleźć dodatkowe złamania.

13.3.4 Wymuszone łamanie stron

Złamanie strony musi nastąpić w miejscu (1), jeśli wśród własności 'page-break-after' i 'page-break-before' wszystkich elementów generujących pola spotykające się przy tym marginesie, jest przynajmniej jedna z wartością 'always', 'left' lub 'right'.

13.3.5 "Najlepsze" złamania stron

Specyfikacja CSS 2.1 nie definiuje, które z dozwolonych złamań strony musi zostać użyte. Specyfikacja ta nie zabrania aplikacji klienckiej dokonać złamania w każdym możliwym punkcie złamania lub nie dokonać złamania w ogóle. Zalecane jest jednak, aby aplikacje klienckie postępowały wg następujących zasad (wiedząc, że czasami się one wzajemnie wykluczają):

Przykłady:

Wyobraźmy sobie na przykład arkusz stylów zawierający deklaracje 'orphans: 4', 'widows: 2', oraz że na końcu bieżącej strony znajduje się 20 linii (pól liniowych):

  • Jeśli akapit znajdujący się na końcu bieżącej strony zawiera 20 linii lub mniej, powinien zostać umieszczony na bieżącej stronie.
  • Jeśli akapit zawiera 21 lub 22 linie, druga część akapitu nie może złamać ograniczenia własności 'widows' i ta druga część musi zawierać dokładnie dwie linie.
  • Jeśli akapit zawiera 23 linie lub więcej, pierwsza część powinna zawierać 20 linii, a druga — resztę.

Teraz przyjmijmy, że własność 'orphans' ma wartość '10' a 'widows' — '20 oraz, że na końcu bieżącej strony jest 8 linii:

  • Jeśli akapit znajdujący się na końcu bieżącej strony zawiera 8 linii lub mniej, powinien zostać umieszczony na bieżącej stronie.
  • Jeśli akapit ten zawiera 9 linii lub więcej, nie może zostać podzielony (to stanowiłoby złamanie ograniczenia własności 'orphans'), a więc powinien zostać przeniesiony jako blok na następną stronę.

13.4 Kaskada w kontekście stron

Deklaracje znajdujące się w kontekście stron podlegają zasadom kaskadowości, jak zwykłe deklaracje CSS.

Przykłady:

Rozważmy poniższy przykład:

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

Ponieważ selektor pseudoklasy jest bardziej precyzyjny, lewy margines na lewych stronach będzie miał szerokość '4cm', a na wszystkich pozostałych stronach (tzn. prawych) — '3cm'.