SELFHTML

Mises en page pour modes d'impression

Page d'information: vue d'ensemble

vers le bas Généralités sur mise en page et saut de page
vers le bas @page (Définir une mise en page)
vers le bas size (Taille de la page)
vers le bas margin (Marges de la page)
vers le bas marks (Traits de coupe et repères de montage)
vers le bas Pages droite/gauche et première page
vers le bas page-break-before (Saut de page avant un élément)
vers le bas page-break-after (Saut de page après un élément)
vers le bas orphans (Lignes seules en fin de page - orphelines)
vers le bas widows (Lignes seules en début de page - veuves)
vers le bas Pages nommées

 vers le bas 

Généralités sur mise en page et saut de page

Les mentions de feuilles de style décrites ici ouvrent à HTML et à son langage de complément CSS des horizons tout à fait nouveaux car avec ces mentions, il devient possible de définir des mises en page à l'impression. La possibilité d'une édition à deux voies est aussi soutenu par la possibilité de définir différentes feuilles de style pour différents modes de sortie, comme il est décrit dans la partie expliquant comment Autre page d'information incorporer des feuilles de style en HTML.

Les mentions de feuilles de style pour les mise en page et saut de page ne sont toutefois pas seulement intéressantes pour des produits d'impression. Un outil de présentation correspondant ou un navigateur WWW mis au point pour le faire pourrait utiliser ces mentions également pour une présentation de pages destinée à l'écran.

Tout cela n'est pourtant pour l'instant encore qu'une musique du futur. Les commandes de feuilles de style existent, pourtant les navigateurs ne les soutiennent pas encore. L'Explorer Internet MS depuis la version 4.x interprète de ces commandes celles qui concernent le saut de page.

 vers le hautvers le bas 

CSS 2.0 @page (Définir une mise en page)

Une mise en page est définie dans un passage style global.

Exemple:

<style type="text/css">
  @page { /* mentions sur la mise en page */ }
</style>

Explication:

Avec @page vous pouvez établir une mise en page. La mention est un réservoir pour des mentions distinctes pour l'aspect de la mise en page. En font partie des propriétés comme la vers le bas size (Taille de la page), vers le bas margin (Marges de la page) et si besoin est, également des mentions sur les vers le bas marks (Traits de coupe et repères de montage). Ces mentions figurent dans les parenthèses accolades à la suite de @page.

Attention:

@page vérifie que les définitions de mise en page dans les guillemets accolade concernent uniquement des pages imprimées et des pages écran et qu'elles ne seront pas interprétées par erreur par le navigateur comme définitions pour l'apparence normale du fichier HTML à l'écran. Ainsi vous pouvez grâce à cette mention indépendamment de toute autre mention de feuille de style dans le même passage, établir une mise en page pour l'impression de vos pages Web.

 vers le hautvers le bas 

CSS 2.0 size (Taille de la page)

Vous pouvez déterminer quelle largeur et quelle hauteur doit avoir votre mise en page. Pour des documents à imprimer, vous définissez ainsi le format du papier désiré. Pour des présentations destinées à l'écran, vous pouvez déterminer la taille de toutes les pages écran.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>size</title>
<style type="text/css">
  @page { size:landscape; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>Cette page appara&icirc;t à l'&eacute;cran exactement comme d'habitude. Si pourtant votre navigateur conna&icirc;t les mentions de feuilles de style pour la mise en page, essayez donc d'imprimer ce fichier par la commande normale "imprimer" de votre navigateur.</p>

</body></html>

Explication:

Avec size: vous pouvez définir à la suite de @page la taille de la page. Deux Autre page d'information mentions numériques, sont permises, séparées par un espace. La première mention désigne la largeur de la page (par exemple 21.0cm) et la deuxième mention désigne la hauteur de la page (par exemple 29.7cm). De plus, les mentions suivantes sont permises:

auto = Le format normal du mode de sortie (réglage normal).
landscape = Le format normal du mode de sortie, pour un format rectangulaire paysage (ou à l'italienne).
portrait = Le format normal du mode de sortie, pour un format rectangulaire portrait.

 vers le hautvers le bas 

CSS 2.0 margin (Marges de la page)

Vous pouvez fixer les espaces entre le bord de la feuille et le contenu de la feuille.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>margin (page)</title>
<style type="text/css">
@page { size:21.0cm 14.85cm;
        margin-top:1.7cm;
        margin-bottom:1.4cm;
        margin-left:2cm;
        margin-right:2cm
}
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>Cette page appara&icirc;t à l'&eacute;cran exactement comme d'habitude.
Pour l'impression ont pourtant &eacute;t&eacute; fix&eacute;s des espaces entre le contenu de la feuille et le bord de la feuille.</p>

</body></html>

Explication:

Pour définir séparément les marges de pages, vous disposez des mentions suivantes:

margin-top = marge supérieure.
margin-bottom = marge inférieure.
margin-left = marge gauche.
margin-right = marge droite.

Si vous voulez définir une valeur unique pour les quatre marges, vous pouvez utiliser à la place de ces mentions, la mention margin.

Pour toutes les mentions de marges, une Autre page d'information mention numérique est permise.

Attention:

Ces mentions n'ont aucune influence sur les marges de page pour la présentation normale du navigateur à l'écran, étant donné qu'elles se trouvent derrière la mention de mise en page @page. Pour la présentation HTML normale sur le navigateur WWW, il y a des mentions de Autre page d'information Marges et espace.

 vers le hautvers le bas 

CSS 2.0 marks (Traits de coupe et repères de montage)

Les traits de coupes (en anglais cut marks) sont des lignes d'aide qui sont utilisées dans la photocopie et dans l'impression (massicot) pour la coupe de pages.

Les repères de montage (anglais cross marks ou register marks) sont des marques pour l'alignement exact de la page pour la photocopie et l'impression.

Quand par exemple vous définissez un format de papier de 10.8cm par 18.2cm et que vous imprimez sur du papier DIN A 4, vous pouvez poser de telles marques qui apparaissent à l'impression et qui désignent pour la photocopie ou pour l'imprimerie, le format exact du papier.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>marks</title>
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross;  }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>Cette page appara&icirc;t &agrave; l'&eacute;cran exactement comme d'habitude.
Pour le traitement des modes d'impression, des rep&egrave;res de montage ont pourtant &eacute;t&eacute; pos&eacute;s.</p>

</body></html>

Explication:

Avec marks: vous pouvez définir à la suite de @page des traits de coupe et des repères de montage. Les mentions suivantes sont permises:

none = pas de traits ni de repères(réglage normal).
crop = poser des traits de coupe.
cross = poser des repères de montage.

Les mentions crop et cross peuvent être définies toutes les deux, séparées par des espaces. Alors les deux types de marque seront pris en compte.

 vers le hautvers le bas 

CSS 2.0 Pages droite/gauche et première page

Vous pouvez noter pour les pages de gauche et de droite des mentions différentes. Ainsi par exemple, vous pouvez égaliser les marges pour l'agrafage ou pour la reliure.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Pages droite/gauche</title>
<style type="text/css">
  @page { size:21.0cm 14.85cm; margin-top:1.5cm; margin-bottom:2cm  }
  @page :left { margin-left:1.5cm; margin-right:2cm  }
  @page :right { margin-left:2cm; margin-right:1.5cm  }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>Voici la premi&egrave;re page.</p>
<p style="page-break-before:always">et voici l'autre (&agrave; cause du saut de page forc&eacute;)</p>
<p>Les deux pages ont des marges de page diff&eacute;rentes.</p>

</body></html>

Explication:

Vous créez des pages droite et gauche différentes en notant derrière @page, séparé par un espace un double point suivi immédiatement de l'un des mots clés left (pour désigner les pages de gauche), right (pour désigner les pages de droite) ou first (pour désigner la première page). Derrière vous pouvez noter dans les parenthèses accolade des mentions sur la taille, les marges de page, les traits de coupe et repères de montage pour les deux types de page. Dans la pratique la différenciation est utile avant tout (comme dans l'exemple ci-dessus) pour mentionner des valeurs inversement symétriques pour la marge gauche et la marge droite: Il est ainsi possible d'égaliser les marges pour l'agrafage ou la reliure.

 vers le hautvers le bas 

CSS 2.0MS IE 4.0 page-break-before (Saut de page avant un élément)

Vous pouvez imposer ou empêcher un saut de page avant un élément HTML.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>page-break-before</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Premi&egrave;re page</h1>
<p>et son texte</p>
<h1 style="page-break-before:always">Et deuxi&egrave;me page</h1>
<p>et son texte</p>

</body></html>

Explication:

Avec page-break-before: vous pouvez imposer ou empêcher un saut de page avant l'élément actuel. Les mentions suivantes sont permises:

always = toujours insérer un saut de page avant l'élément actuel.
avoid = ne jamais insérer de saut de page avant l'élément actuel.
left = avec vers le haut Pages droite/gauche et première page insérer un saut de page, élément actuel sur la prochaine page de gauche.
right = avec vers le haut Pages droite/gauche et première page insérer un saut de page, élément actuel sur la prochaine page de droite.
inherit = prendre la mention de saut de page de l'élément parent (hériter).
auto = pas de mention de saut de page (réglage normal).

 vers le hautvers le bas 

CSS 2.0MS IE 4.0 page-break-after (Saut de page après un élément)

Vous pouvez imposer ou empêcher un saut de page après un élément HTML.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>page-break-after</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Premi&egrave;re page</h1>
<p style="page-break-after:avoid; height:22cm; border:thin solid black; padding:0.5cm">espace</p>
<p>Commentaire &agrave; ce sujet</p>
<h1>Nouveau titre</h1>
<p>et son texte</p>

</body></html>

Explication:

Avec page-break-after: vous pouvez imposer ou empêcher un saut de page après l'élément actuel. Les mentions suivantes sont permises:

always = toujours insérer un saut de page après l'élément actuel.
avoid = ne jamais insérer de saut de page après l'élément actuel.
left = avec vers le haut Pages droite/gauche et première page insérer un saut de page, élément suivant sur la prochaine page de gauche.
right = avec vers le haut Pages droite/gauche et première page insérer un saut de page, élément suivant sur la prochaine page de droite.
inherit = prendre la mention de saut de page de l'élément parent (hériter).
auto = pas de mention de saut de page (réglage normal).

 vers le hautvers le bas 

CSS 2.0 orphans (Lignes seules en fin de page - orphelines)

Vous pouvez empêcher que des sauts de page dans du texte courant se fassent si malencontreusement qu'une seule ligne se trouve sur une page et toutes les autres lignes du paragraphe sur la page suivante.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>orphans</title>
<style type="text/css">
 p,blockquote { orphans:3; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Au sujet de cette page</h1>
<p>Sur cette page, il y a des paragraphes de texte.</p>
<blockquote>et des citations</blockquote>
<p>et tous ont une chose en commun: ils ne seront pas malencontreusement coup&eacute;s!</p>

</body></html>

Explication:

Avec orphans: vous pouvez spécifier combien de lignes d'un texte courant plus long doivent au minimum figurer sur la page avant le saut de page. Un chiffre est permis qui exprime le nombre de lignes. Le réglage par défaut est 2.

 vers le hautvers le bas 

CSS 2.0 widows (Lignes seules en début de page - veuves)

Vous pouvez empêcher que des sauts de pages dans du texte courant se fassent si malencontreusement qu'une seule ligne se trouve sur la nouvelle page et que toutes les autres lignes du paragraphe se trouvent sur la page précédente avant le saut de page.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>widows</title>
<style type="text/css">
 p,blockquote { widows:3; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Au sujet de cette page</h1>
<p>Sur cette page, il y a des paragraphes de texte.</p>
<blockquote>et des citations</blockquote>
<p>et tous ont une chose en commun: ils ne seront pas malencontreusement coup&eacute;s!</p>

</body></html>

Explication:

Avec widows: vous pouvez spécifier combien de lignes d'un texte courant plus long doivent au minimum figurer sur la page après le saut de page sur la nouvelle page. Un chiffre est permis qui exprime le nombre de lignes. Le réglage par défaut est 2.

 vers le hautvers le bas 

CSS 2.0 Pages nommées

Pour des formats de pages spéciaux, vous pouvez définir différents types de pages nommées.

Exemple:

<style type="text/css">
  @page italienne { size:landscape; }
  div.recapitulatif { page:italienne; /* autres mentions CSS */ }
</style>

Explication:

En notant derrière @page un nom que vous attribuez vous-même - dans l'exemple ci-dessus le nom est italienne - vous pouvez établir une mise en page spéciale. Dans les parenthèses accolades, vous pouvez noter les mentions habituelles concernant la mise en page. Les pages nommées ne sont pourtant pas utilisées systématiquement, mais seulement quand est placé un élément pour lequel est noté la propriété CSS page:. Dans l'exemple il est stipulé que les éléments div avec le nom de classe recapitulatif utilisent le type de page italienne. Si donc dans le code source HTML on trouve:
<div class="recapitulatif">...</div>,
alors le type de page italienne est imposé pour la représentation de cet élément.

 vers le haut
page suivante Autre page d'information Contrôle du son pour sortie vocale
page précédente Autre page d'information Positionnement et affichage d'éléments
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org