Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie @-regels | @import | @media | @page

@page

De @page-regel is een speciale stijlregel, die gebruikt kan worden bij het definiëren van stijlen voor de pagina-opmaak bij het afdrukken.

Een @page-regel bestaat in z'n eenvoudigste vorm uit twee delen: de @page-selector en een blok met één of meer stijldeclaraties, dat wordt begrensd door accolades (gekrulde haken).

@page { stijldeclaratie }

Aan de @page-selector kan naar wens een pagina pseudo-class selector worden toegevoegd, die het mogelijk maakt vast te leggen op welke pagina's de stijl betrekking heeft.

@page <pagina pseudo-class selector> { stijldeclaratie }

Een pagina pseudo-class selector heeft als basis een dubbele punt gevolgd door de naam van de pseudo-class. De volgende pseudo-classes zijn beschikbaar:

• left: de stijl heeft betrekking op alle linker pagina's (bij westerse talen zijn dat de pagina's met een even paginanummer);
• right: de stijl heeft betrekking op alle rechter pagina's (bij westerse talen zijn dat de pagina's met een oneven paginanummer);
• first: de stijl heeft alleen betrekking op de eerste pagina.

Stijlregels waarin gebruik gemaakt wordt van een pagina pseudo-class selector zien er als volgt uit:

@page :left { stijldeclaratie }
@page :right { stijldeclaratie }
@page :first { stijldeclaratie }

De naam van een pseudo-class is hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven.

@page-regels worden opgenomen in een stijlblok in de head van een document, of in een extern stijlblad.

Een stijldeclaratie in een @page-regel mag volgens CSS 2.1 slechts uit de verschillende eigenschappen voor de margin zijn opgebouwd: margin-top, margin-right, margin-bottom, margin-left en margin. De gebruikelijke eenheden mogen worden toegepast, met uitzondering van em en ex. Percentages hebben betrekking op de breedte (bij margin-right en margin-left) en hoogte (bij margin-top en margin-bottom) van de pagina.

In het volgende voorbeeld wordt aan alle zijden een marge van 12% aangehouden. Bij een papierformaat van 29,7 x 21 cm (A4) is de marge aan de boven- en onderzijde ca. 3,6 cm en links en rechts ca. 2,5 cm.

@page { margin: 12%; }

Wanneer je tweezijdig wilt afdrukken (of later kopiëren), dan kun je ervoor kiezen de marge aan de zijde waar de pagina's ingebonden worden groter te maken dan die aan de buitenzijde:

@page :left { margin-left: 1in; margin-right: 1.5in; }
@page :right { margin-left: 1.5in; margin-right: 1in; }

Voor de eerste pagina van een document kun je bijvoorbeeld vastleggen dat deze een grote marge aan de bovenzijde moet hebben:

@page :first { margin-top: 2in; }

Wanneer een stijlblok of een stijlblad meerdere @page-regels met en zonder pagina pseudo-class selectors bevat, dan gelden de volgende voorrangsregels:

• eigenschappen die zijn gebruikt in een @page-regel met pagina pseudo-class selector gaan voor eigenschappen in een @page-regel zonder pagina pseudo-class selector;
• eigenschappen die zijn gebruikt in een @page-regel met de pagina pseudo-class selector :first gaan voor eigenschappen in een @page-regel met de pagina pseudo-class selectors :left of :right.

In het volgende voorbeeld is in de eerste @page-regel vastgelegd dat aan alle zijden een marge van 1 inch moet worden aangehouden. Met de volgende @page-regels worden afwijkingen op die standaardmarge vastgelegd voor achtereenvolgens de linker pagina's, de rechter pagina's en de beginpagina. De browser moet voor de betreffende pagina's de afwijkingen op de standaardmarge aanhouden.

@page        { margin: 1in; }
@page :left  { margin-right: 1.5in; }
@page :right { margin-left: 1.5in; }
@page :first { margin-top: 2in; }

In horizontale richting worden de marges die via @page zijn gedefinieerd, worden opgeteld bij de marges die voor elementen zijn vastgelegd. In verticale richting schuiven de marges die via @page zijn gedefinieerd en marges die voor elementen zijn vastgelegd (net als bij een gewone box) in elkaar.

In het volgende voorbeeld is de marge bij de weergave op het scherm als gevolg van de stijl voor het BODY element aan alle zijden 1 inch. Bij het afdrukken wordt de marge links en rechts vergroot met 0,5 inch en komt daardoor in totaal op 1,5 inch. Aan de boven- en onderzijde van de pagina schuiven de marges in elkaar en resteert als marge 1 inch.

@page        { margin: 0.5in; }
BODY         { margin: 1in; }

Door een negatieve waarde voor een margin eigenschap (voor @page of voor een element), of door absoluut positioneren kan inhoud van het document buiten het te printen gebied vallen. De browser of de printer mag deze inhoud weglaten.

Ondersteuning

Opera 6.0

- Als aan @page één van de pseudo-class selectors :left, :right of :first is toegevoegd, wordt het hele document niet weergegeven (niet op het scherm en niet bij het afdrukken).

- Een @page-regel die is opgenomen in een @media wordt geheel genegeerd.

Opera 7.0 en hoger

- Wanneer met behulp van een @page (zonder pseudo-class selector, of met :left) een linker- en/of een rechtermarge zijn vastgelegd, wordt de breedte van het te bedrukken deel van de pagina niet berekend op basis van de opgegeven marges, maar op basis van de standaardmarges. Als de som van de opgegeven linker- en rechtermarge kleiner is dan tweemaal de standaardmarge, dan is de berekende breedte te klein. De rechtermarge wordt daardoor groter dan bedoeld. Als de som van de opgegeven linker- en rechtermarge groter is dan tweemaal de standaardmarge, dan is de berekende breedte te groot. Omdat in dit geval wel de juiste grootte van de rechtermarge wordt aangehouden, verdwijnt een deel van de inhoud van het document onder de rechtermarge en is daardoor onzichtbaar.

- Een @page-regel waaraan één van de pseudo-class selectors :right of :first is toegevoegd, wordt geheel genegeerd.

- De met behulp van de pseudo-class selector :left gedefinieerde stijl wordt niet zoals gebruikelijk aangehouden voor de even pagina's maar voor de oneven pagina's.

- Een @page-regel die is opgenomen in een @media wordt geheel genegeerd.

Handleiding HTML Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 5 december 2004