Médias paginés CSS - Règle @page

Les supports paginés diffèrent des supports continus en ce que le contenu du document est divisé en une ou plusieurs pages distinctes. Les supports paginés comprennent le papier, les transparents, les pages affichées sur les écrans d'ordinateur, etc.

La norme CSS2 introduit quelques fonctionnalités de contrôle de pagination de base qui permettent aux auteurs d'aider le navigateur à trouver la meilleure façon d'imprimer leurs documents.

Le modèle de page CSS2 spécifie comment un document est formaté dans une zone rectangulaire - la zone de page - qui a une largeur et une hauteur finies. Ces fonctionnalités se répartissent en deux groupes -

  • Fonctionnalités CSS2 qui définissent une mise en page particulière.
  • Fonctionnalités CSS2 qui contrôlent la pagination d'un document.

Définition des pages: la règle @page

Le CSS2 définit une "boîte de page", une boîte de dimensions finies dans laquelle le contenu est rendu. La zone de page est une zone rectangulaire qui contient deux zones -

  • The page area- La zone de page comprend les boîtes disposées sur cette page. Les bords de la zone de page agissent comme le bloc contenant initial pour la mise en page qui se produit entre les sauts de page.

  • The margin area - Il entoure la zone de page.

Vous pouvez spécifier les dimensions, l'orientation, les marges, etc., d'une zone de page dans une règle @page. Les dimensions de la zone de page sont définies avec la propriété 'size'. Les dimensions de la zone de page sont les dimensions de la zone de page moins la zone de marge.

Par exemple, la règle @page suivante définit la taille de la zone de page sur 8,5 × 11 pouces et crée une marge de «2 cm» sur tous les côtés entre le bord de la zone de page et la zone de page -

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

Vous pouvez utiliser les propriétés margin, margin-top, margin-bottom, margin-left et margin-right dans la règle @page pour définir les marges de votre page.

Enfin, la propriété marks est utilisée dans la règle @page pour créer des repères de recadrage et d'enregistrement en dehors de la zone de page sur la feuille cible. Par défaut, aucune marque n'est imprimée. Vous pouvez utiliser un ou les deux mots-clés crop et cross pour créer respectivement des repères de coupe et des repères de repérage sur la page d'impression cible.

Définition de la taille de la page

La propriété size spécifie la taille et l'orientation d'une zone de page. Quatre valeurs peuvent être utilisées pour la taille de la page -

  • auto - La zone de page sera définie sur la taille et l'orientation de la feuille cible.

  • landscape- Remplace l'orientation de la cible. La zone de page a la même taille que la cible et les côtés les plus longs sont horizontaux.

  • portrait- Remplace l'orientation de la cible. La zone de page a la même taille que la cible et les côtés les plus courts sont horizontaux.

  • length- Les valeurs de longueur pour la propriété 'size' créent une zone de page absolue. Si une seule valeur de longueur est spécifiée, elle définit à la fois la largeur et la hauteur de la zone de page. Les valeurs de pourcentage ne sont pas autorisées pour la propriété 'size'.

Dans l'exemple suivant, les bords extérieurs de la zone de page s'aligneront sur la cible. La valeur en pourcentage de la propriété «margin» est relative à la taille cible. Par conséquent, si les dimensions de la feuille cible sont de 21,0 cm × 29,7 cm (c'est-à-dire A4), les marges sont de 2,10 cm et 2,97 cm.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

L'exemple suivant définit la largeur de la zone de page sur 8,5 pouces et la hauteur sur 11 pouces. La zone de page dans cet exemple nécessite une taille de feuille cible de 8,5 "× 11" ou plus.

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

Une fois que vous avez créé une mise en page nommée, vous pouvez l'utiliser dans votre document en ajoutant la propriété de page à un style qui sera ensuite appliqué à un élément de votre document. Par exemple, ce style rend toutes les tables de votre document sur des pages paysage -

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

En raison de la règle ci-dessus, lors de l'impression, si le navigateur rencontre un élément <table> dans votre document et que la mise en page actuelle est la mise en page portrait par défaut, il démarre une nouvelle page et imprime le tableau sur une page paysage.

Pages gauche, droite et première

Lors de l'impression de documents recto verso, les zones de page sur les pages gauche et droite doivent être différentes. Il peut être exprimé à travers deux pseudo-classes CSS comme suit -

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

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

Vous pouvez spécifier le style de la première page d'un document avec: première pseudo-classe -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Contrôle de la pagination

Sauf indication contraire, les sauts de page se produisent uniquement lorsque le format de page change ou lorsque le contenu déborde de la zone de page actuelle. Pour forcer ou supprimer les sauts de page, utilisez les propriétés page-break-before, page-break-after et page-break-inside .

Le saut de page avant et le saut de page après acceptent les mots clés auto, toujours, éviter, gauche et droite .

Le mot - clé auto est la valeur par défaut, il permet au navigateur de générer des sauts de page selon les besoins. Le mot-clé force toujours un saut de page avant ou après l'élément, tandis que eviter supprime un saut de page immédiatement avant ou après l'élément. Les mots-clés gauche et droit forcent un ou deux sauts de page, de sorte que l'élément est rendu sur une page de gauche ou de droite.

L'utilisation des propriétés de pagination est assez simple. Supposons que votre document ait des en-têtes de niveau 1 pour commencer de nouveaux chapitres avec des en-têtes de niveau 2 pour désigner les sections. Vous souhaitez que chaque chapitre commence sur une nouvelle page de droite, mais vous ne voulez pas que les en-têtes de section soient divisés en un saut de page à partir du contenu suivant. Vous pouvez y parvenir en utilisant la règle suivante -

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

Utilisez uniquement les valeurs auto et évitez avec la propriété page-break-inside . Si vous préférez que vos tableaux ne soient pas divisés en pages si possible, vous écririez la règle -

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

Contrôle des veuves et des orphelins

Dans le jargon typographique, les orphelins sont les lignes d'un paragraphe échouées en bas d'une page en raison d'un saut de page, tandis que les veuves sont les lignes qui restent en haut d'une page après un saut de page. En général, les pages imprimées ne semblent pas attrayantes avec des lignes simples de texte échouées en haut ou en bas. La plupart des imprimantes essaient de laisser au moins deux lignes de texte ou plus en haut ou en bas de chaque page.

  • le orphans property spécifie le nombre minimum de lignes d'un paragraphe qui doivent être laissées en bas d'une page.

  • le widows property spécifie le nombre minimum de lignes d'un paragraphe qui doivent être laissées en haut d'une page.

Voici l'exemple pour créer 4 lignes en bas et 3 lignes en haut de chaque page -

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