SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
Mises en page pour modes d'impression |
|
|
 | |
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 
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.
 |
@page (Définir une mise en page)Une mise en page est définie dans un passage style global.
<style type="text/css">
@page { /* mentions sur la mise en page */ }
</style>
|
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 size (Taille de la page), margin (Marges de la page) et si besoin est, également des mentions sur les marks (Traits de coupe et repères de montage). Ces mentions figurent dans les parenthèses
accolades à la suite de @page.
@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.
|
|
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.
<html><head><title>size</title>
<style type="text/css">
@page { size:landscape; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Cette page apparaît � l'écran exactement comme d'habitude. Si pourtant votre navigateur connaî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>
|
Avec size: vous pouvez définir à la suite de @page la taille de la page. Deux 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.
|
|
margin (Marges de la page)Vous pouvez fixer les espaces entre le bord de la feuille et le contenu de la feuille.
<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ît � l'écran exactement comme d'habitude.
Pour l'impression ont pourtant été fixés des espaces entre le contenu de la feuille et le bord de la feuille.</p>
</body></html>
|
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 mention numérique est permise.
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 Marges et espace.
|
|
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.
<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ît à l'écran exactement comme d'habitude.
Pour le traitement des modes d'impression, des repères de montage ont pourtant été posés.</p>
</body></html>
|
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.
|
|
Pages droite/gauche et première pageVous 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.
<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ère page.</p>
<p style="page-break-before:always">et voici l'autre (à cause du saut de page forcé)</p>
<p>Les deux pages ont des marges de page différentes.</p>
</body></html>
|
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.
|
|
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.
<html><head><title>page-break-before</title> </head><body bgcolor="#FFFFFF" text="#000000"> <h1>Première page</h1> <p>et son texte</p> <h1 style="page-break-before:always">Et deuxième page</h1> <p>et son texte</p> </body></html> |
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 Pages droite/gauche et première page insérer un saut de page, élément actuel sur la prochaine page de gauche.
right = avec 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).
|
|
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.
<html><head><title>page-break-after</title> </head><body bgcolor="#FFFFFF" text="#000000"> <h1>Première page</h1> <p style="page-break-after:avoid; height:22cm; border:thin solid black; padding:0.5cm">espace</p> <p>Commentaire à ce sujet</p> <h1>Nouveau titre</h1> <p>et son texte</p> </body></html> |
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 Pages droite/gauche et première page insérer un saut de page, élément suivant sur la prochaine page de gauche.
right = avec 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).
|
|
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.
<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és!</p>
</body></html>
|
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.
|
|
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.
<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és!</p>
</body></html>
|
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.
|
|
Pages nomméesPour des formats de pages spéciaux, vous pouvez définir différents types de pages nommées.
<style type="text/css">
@page italienne { size:landscape; }
div.recapitulatif { page:italienne; /* autres mentions CSS */ }
</style>
|
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.
|
| |
 |
Contrôle du son pour sortie vocale
|
 |
Positionnement et affichage d'éléments
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@selfhtml.com.fr
