Inne działy

 

 

CSS Media stronicowe – zasada @page

 

 Media stronicowe różnią się od mediów ciągłych, tym, że zawartość dokumentu jest podzielona na jedną lub więcej stron. Media stronicowe obejmują papier, folie, strony, które są wyświetlane na ekranie komputera, itp.

Standard CSS2 wprowadza niektóre funkcje kontroli podstawowego podziału na strony, które pozwalają autorom stron dowiedzieć się, jak najlepiej wyglądają wydruki dokumentów.

CSS2 model strony określa, w jaki sposób dokument jest sformatowany w prostokątnym obszarze - pola strony - która ma skończoną szerokość i wysokość. Funkcje te można podzielić na dwie grupy:

  • Funkcje CSS2, które definiują układ danej strony.
  • CSS2 funkcje sterowania paginacją dokumentu.

 

Określenie stron: zasada @page

CSS2 definiuje "pola"(box), strony pola o skończonych wymiarach, w których treści są wyświetlane. Box na stronie jest to prostokątny obszar, który zawiera dwa obszary:

  • Obszar strony: obszar strony zawiera pola określone na tej stronie. Krawędzie obszaru strony działają, jako początkowy blok układu, w którym występują pomiędzy nimi podziały.
  • Obszaru marginesu: który otacza obszar strony.

Można określić wymiary, orientację, marginesy, itp pola (box) strony w regule @page. Wymiary pola strony są ustawiane za pomocą właściwości "size". Wymiary obszaru strony są wymiary pola strony minus obszar marginesu.

Na przykład, następująca reguła @page ustawia rozmiar pola strony na 8,5 x 11 cali i tworzy ‘2 cm’ margines na wszystkich stronach między krawędzią pola strony i obszarem strony: 

 

<style tyle="text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>

 

Można użyć właściwości margin, margin-top, margin-bottom, margin-left, and margin-right w regule @page aby ustawić marginesy strony.

Wreszcie właściwość maks jest używana w regule @page, aby stworzyć zbiory znaków poza polem strony w docelowym arkuszu. Domyślnie znaki nie są drukowane. Możesz skorzystać z jednego lub obu słów kluczowych crop lub cross do tworzenia znaczników i znaków na stronie wydruku docelowego.

 

Ustawienie rozmiaru strony:

Właściwość size określa rozmiar i orientacja strony pola. Istnieją cztery wartości, które mogą być używane do określania rozmiaru strony:

  • auto: Pole strony będzie ustawiony do rozmiaru i orientacji arkusza docelowego.
  • landscape:  Zastępuje orientację celową. Pole strony ma taki sam rozmiar jak cel, a dłuższe boki są poziome.
  • portrait:  Zastępuje orientację celową. Pole strony ma taki sam rozmiar jak cel, a krótsze boki są poziome.
  • length:  Długość wartości dla właściwości 'size' tworzy pole strony bezwzględne. Jeśli tylko jedna wartość długości jest określona, to ustawia szerokość i wysokość pola strony. Wartości procentowe są niedozwolone dla właściwości "size".

W poniższym przykładzie zewnętrzne krawędzi pola strony dostosują się z miejsca docelowego. Wartość procentowa właściwości "margin" jest w stosunku do wielkości docelowych, więc jeśli wymiary arkusza są 21.0 cm x 29.7 cm (czyli A4), margines wynosi 2.10cm i 2.97cm.

 

<style tyle="text/css">
<!--
@page {
  size: auto;   /* auto jest to wartość początkowa */
  margin: 10%;
}
-->
</style>

 

Poniżej przykład ustawia szerokość na 8,5 cala i wysokość na 11 cali w polu strony. W tym przykładzie pole strony wymaga rozmiaru arkusza docelowego 8,5 "x 11" lub większy.

 

<style tyle="text/css">
<!--
@page {
  size: 8.5in 11in;  /* wysokość szerokość */
}
-->
</style>

 

Po utworzeniu układu strony, można go używać w dokumencie, przez dodanie właściwości strony do stylu, który później jest stosowany do elementu w dokumencie. Na przykład ten styl renderuje wszystkie tabele w dokumencie na stronach:

<style tyle="text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>

 

Z powyższej zasady, podczas drukowania, jeśli przeglądarka napotka element <table> w dokumencie i układ strony jest domyślnie pionowy, rozpoczyna nową stronę i drukuje tabelę na stronie.

 

Lewa, prawa i pierwsza strona

Gdy drukujemy dwustronne dokumenty, pola strony na lewej i prawej stronie powinny być inne. To może być wyrażone za pomocą dwóch pseudo-klas CSS w następujący sposób:

 

<style tyle="text/css">
<!--
@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}
-->
</style>

 

Można określić styl na pierwszej stronie dokumentu z :first pseudo-class

<style tyle="text/css">
<!--
@page { margin: 2cm } /* Wszystkie marginesy ustawione na 2cm */

@page :first {
  margin-top: 10cm    /* Górny margines na pierwszej stronie 10cm */
}
-->
</style>

 

Kontrolowany podziału na strony

Jeżeli nie określono inaczej, podziały występują tylko wtedy, gdy zmienia się format strony lub gdy zawartość przepełnia bieżące pole strony. Aby w inny sposób zmusić lub wymusić podziały stron, użyj właściwości page-break-before, pagebreak-after, a page-break-inside.

Zarówno właściwości page-break-before oraz page-break-after akceptują wartość auto, always, avoid, left,and right .

Słowo kluczowe auto jest ustawieniem domyślnym, to pozwala przeglądarce generować podziały w razie potrzeby. Słowo kluczowe always wymusza podział strony przed lub po elemencie, natomiast avoid hamuje podział strony, bezpośrednio przed lub po elemencie. Słowa left i right powodują jeden lub dwa podziały, tak, że element jest renderowany na lewej lub prawej stronie.

Używanie właściwości paginacja jest proste. Załóżmy, że dokument zawiera nagłówki poziom-1, które rozpoczynają nowe rozdziały, sekcje oznaczone nagłówkami poziomu-2. Chcieliby Państwo, aby każdy rozdział, rozpoczynał się na nowej, stronie po prawej, ale nie chcesz, aby nagłówki sekcji, były podzielone na stronie z treścią. Można to osiągnąć przy pomocy następującej reguły:

 

<style tyle=”text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>

 

Używaj tylko wartości auto i avoid z page-break-inside. Jeśli wolisz, aby tabele nie były podzielone między strony, jeśli to możliwe, należy napisać regułę:

<style tyle="text/css">
<!--
table { page-break-inside : avoid }
-->
</style>

 

Kontrolowanie wdów i sierot

W slangu typograficznym sieroty są to linie akapitu linka na dole strony ze względu na podział strony, natomiast wdowy to linie pozostawione u góry strony. Ogólnie rzecz biorąc drukowana strona nie wygląda atrakcyjnie z pojedynczymi wierszami tekstu na górze lub na dole. Większość drukarek spróbuje zostawić przynajmniej dwa lub więcej wierszy tekstu u góry lub u dołu każdej strony.

  • Właściwość orphans  określa minimalną liczbę wierszy w akapicie, która musi pozostać na dole strony. 
  • Właściwość widows  określa minimalną liczbę wierszy w akapicie, który musi pozostać w górnej części strony.

Oto przykład, aby utworzyć 4 linie na dole i 3 linie u góry każdej strony:

 

<style tyle="text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.