`@page` - Directive CSS

@page

Résumé des caractéristiques de la directive `@page`

Description rapide

Cette directive est un sélecteur qui cible les pages imprimées.

Statut

Standard

Module W3C

Module CSS - Media paginé

Références (W3C)

🡇

🡅

CSS Paged Media Module Level 3

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Description de la directive `@page`.

@page est un sélecteur pour définir certains paramètres d'impression. Il peut être utilisé seul ou en combinaison avec les pseudo-classes suivantes :

:first désigne la première page du document.
:left désigne les pages de gauche.
:right désigne les pages de droite.
:blank désigne les pages vides. Des pages vides peuvent apparaître à la suite de sauts de page forcés.

Remarque : dans le cas d'une impression recto-verso, suivant les règles de l'imprimerie, les pages de gauche sont censées avoir des numéros pairs (ce sont donc des versos), et les pages de droite avoir des numéros impairs (les rectos).

Toutes les propriétés CSS ne peuvent pas être appliquées au sélecteur @page. Voici la liste des propriétés applicables à @page :

bleed : Définit la présence d'une marge supplémentaire pour les pages imprimées..
marks : Choisit les traits de coupe et repères d'alignement. ;
page-orientation : Définit si les pages imprimées doivent être tournées, et vers la droite ou la gauche.
S'utilise avec la directive @page..
size : Dimensions et orientation des pages imprimées..
margin : Résumé des quatre marges..
padding : Marges intérieures des quatre cotés..

Enfin, d'autres propriétés sont théoriquement applicables au sélecteur @page mais sont très peu prises en compte par les navigateurs. C'est le cas par exemple de background, border, etc.

Les compteurs `page` et `pages`.

Un compteur dénommé page est automatiquement créé par la première page, et incrémenté à chaque nouvelle page. Il peut être utilisé dans les blocs de marge pour la numérotation des pages.
Les propriétés counter-increment ou counter-reset s'appliquent à ce compteur, comme à tous les compteurs.

Le nombre de pages est représenté par pages. Ce n'est pas vraiment un compteur. pages ne peut pas être manipulés avec les propriétés counter-increment ou counter-reset.


	@page {
	   @top-center {
	      content: counter(page) '/' counter(pages);
	   }
	}

Les blocs de marge. ⚠

Les blocs de marge sont des zones rectangulaires disposées autour du contenu du document, donc dans les marges. Du contenu peut être inséré dans ces blocs avec la propriété content. Cela peut servir par exemple à créer des en-têtes ou pieds de pages.

top-left

top-center

top-right

top-left-corner

top-right-corner

left-top

right-top

left-middle

right-middle

left-bottom

right-bottom

bottom-left-corner

bottom-right-corner

bottom-left

bottom-center

bottom-right

Les blocs dans les angles top-left-corner par exemple, ont des dimensions en rapport avec la taille des marges.
Les blocs en haut et en bas ont une hauteur définie par la taille des marges haute et basse. Leur largeur dépend de la largeur de la page.
A l'inverse, les blocs situés à gauche et à droite ont une largeur définie d'après la taille des marges gauche et droite. Leur hauteur dépend de la hauteur de la page.

Voici un exemple d'utilisation des blocs de marges :


	@page {
	   size: A4;
	   margin: 2cm;
		
	   @top-center {
	      content: 'Rapport annuel';
	   }
	   @bottom-center {
	      content: '- ' counter(page) ' -';
	   }
	}

Les alignements par défaut des blocs de marge sont les suivants, avec pour l'alignement horizontal R pour droite, L pour gauche et C pour center. Et pour l'alignement vertical T pour le haut, M pour le milieu et B pour le bas.

R M

L M

C M

R M

L M

C T

C M

C B

R M

L M

C M

R M

L M

Syntaxes de la directive `@page`.

@page { ... }

Utilisée de cette façon la directive @page s'applique à tout le document. Voici par exemple le code qui demande que les impressions soient sur du papier A4 horizontal :

@page { size: A4 landscape; }
@page id { ... }

Cette syntaxe définit la mise en page d'une page nommée. Cette page nommée est repérée par un identifiant personnalisé (id) qui pourra être utilisé pour spécifier la mise en page d'une partie du document. On utilise pour cela la propriété page.
Attention id est sensible à la casse.

Exemple. Tous les tableaux contenus dans le document s'imprimeront en paysage. Ce qui suppose d'insérer un saut de page avant et un saut de page après.

@page table { size: A4 landscape; } table { page: table; }

Exemples d'utilisation de la directive `@page`.

Pages non nommées.

L'effet des propriétés CSS associées à @page n'est pas visible sur l'écran : vous devrez imprimer la page, ou au moins l'afficher en aperçu avant impression pour voir l'effet des styles appliquées à cette page.

En fonction de ces règles, et sur l'aperçu avant impression, la première page doit avoir une marge du haut plus importante, tandis que les pages suivantes auront une marge de 2cm. D'autre part, les pages gauches ont une marge à droite plus importante, et pour les pages droites c'est la marge gauche qui est plus importante. Cette disposition est fréquemment adoptée lors d'une impression recto-verso pour laisser plus de place du coté de la reliure.

Pages nommées.

Ces règles définissent un page nommée compatibility avec un orientation horizontale. Cette mise en page en ensuite appliquée à l'élément dont l'identifiant est compatibility avec la propriété page. Sur l'aperçu faites défiler les pages jusqu'à ce tableau.

Bien entendu le jeu de règle du premier exemple reste valide : la première page est donc toujours en paysage.

Insertion d'une directive `@page` par programme.

Utiliser Javascript pour définir une directive `@page`.

L'exemple de code ci-dessous crée un élément style dans la section head. Il est facile d'insérer n'importe quel code CSS dans ce nouvel élément.


	let oldStyle=document.getElementById('style1');
	try{document.head.removeChild(oldStyle);} catch(e){}
	
	const newStyle = document.createElement('style');
	newStyle.id='style1';
	newStyle.innerHTML = '@page {size:A4; margin:1cm;}';
	document.head.appendChild(newStyle);

Utiliser JQuery pour définir une directive `@page`.

Les codes JQuery sont généralement plus courts que les codes Javascript, mais les actions réalisées par le code ci-dessous sont exactement les mêmes que celles effectuées par le code précédent.


	$('#style1').remove();
	$('<style>', {
		id: 'style1',
		html: '@page {size:A4; margin:1cm;}'
	}).appendTo('head');

Manipulations de la directive `@page` par programme.

Les navigateurs ne se pressent pas pour mettre en forme les pages imprimées. Il est vrai que ce n'est pas le besoin le plus courant lors de la consultation des pages Web.

Colonne 1

Support général de la directive @page permettant de cibler les pages imprimées.

Colonne 2

Support par les navigateurs du descripteur size pour la directive @page. Il permet de définir les dimensions de la page imprimée.

Colonne 3

Reconnaissance par les navigateurs de la propriété page-orientation qui, en complément de size définit comment les pages sont tournées.

Colonne 4

Support de la pseudo-classe :first, utilisée avec @page, et permettant de cibler la première page imprimée.

Colonne 5

Support des pseudo-classes left et right avec la directive @page, permettant de distinguer les pages gauche et droite lors de l'impression.

Colonne 6

Support des blocs de marges avec la directive @page, pour cibler des zones dans les en-tête et pied de page.

Directive
@page

Descripteur
size

Descripteur
page-orientation

Pseudo-classe
:first

Pseudo-classes
:left et :right

Blocs de
marges

Estimation de la prise en charge globale.

90%

78%

95%

93%

67%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@page`.

CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Introduction de la directive @page, avec des possibilités relativement limitées dans cette version 2.xx de CSS : elle permet seulement de définir les marges de la page imprimée, en distinguant pages gauches, page droites et première page.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Media paginé - Niveau 3

La directive @page s'enrichit : possibilité de définir les dimensions et l'orientation des pages, et introduction des zones d'en-tête et de pied de page.

23 Juin 1999
Document de travail.
25 Février 2004
Candidat à la recommandation.

Voir aussi, au sujet de la pagination.

La spécification "Module CSS - Media paginé" regroupe tout ce qui concerne la pagination : mise en forme des pages imprimées, taille des pages, gestion des sauts de page, etc. Vous pouvez consulter cette norme ici : CSS Paged Media Module.