SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
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.
Cela pourrait avoir à l'avenir de très importantes conséquences pour toute la
branche DTP. HTML et CSS deviennent grâce à ces enrichissements une
concurrence à prendre au sérieux pour les formats de fichiers dépendant d'un
logiciel comme par exemple Quark express, FrameMaker ou Ventura Publisher.
L'avantage de HTML/CSS par rapport aux formats dépendants d'un logiciel réside
dans la libre disposition et dans la stricte indépendance d'une plate-forme.
Personne ne penchera plus pour un certain logiciel DTP pour produire des
produits d'impression intéressants et à l'allure professionnelle comme les
revues, les manuels ou les brochures. Les problèmes avec une publication à
deux voies sur Internet et sur imprimante (mot clé: cross media
publishing) pourraient disparaître si HTML/CSS s'imposaient comme standard pour
les deux formes de publication. La possibilité d'éditer sur ces deux voies est
aussi soutenue par la possibilité de définir des
fichiers de feuilles de style pour divers modes de sortie.
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. Ces mentions de feuilles de style représentent aussi pour cette raison une attaque contre les logiciels de présentation pour l'écran comme par exemple contre PowerPoint MS. On remarque ici aussi: l'avantage de HTML/CSS, c'est leur indépendance par rapport à un logiciel et une plate-forme.
Tout cela n'est pourtant pour l'instant encore qu'une musique du futur. Les commandes de feuilles de style sont là, appartiennent toutefois au standard de langage 2.0 du langage CSS. De ces commandes à vrai dire, l' Explorer Internet MS 4.x interprète celles pour le saut de page.
 
|
Définir une mise en page (@page)Pour créer une mise en page, vous devez utiliser la commande CSS décrite ici.
<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 la taille
de la page (size), les marges
de la page (margin etc.) et si besoin est également les mentions pour
les marques
d'alignement (marks). Ces mentions figurent dans les parenthèses
accolades à la suite de @page.
Entre la commande de mise en page @page et les mentions entre
guillemets peut suivre aussi un double point. À la suite, vous pouvez noter des
mentions pour des pages droite/gauche et pour des lignes d'entête et de pied différentes.
La mention @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.
|
|
Taille de la page (size)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.
<style type="text/css">
@page { size:21.0cm 29.7cm; }
</style>
|
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 (dans l'exemple ci-dessus 21.0cm) et la deuxième mention
désigne la hauteur de la page (dans l'exemple ci-dessus 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.
|
|
Marges de la page (margin
etc.)Vous pouvez fixer les espaces entre le bord de la feuille/bord de l'écran et le contenu de la feuille.
<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>
|
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
feuilles de style correspondantes pour les marges.
|
|
Traits de coupe et repères de montage (marks)Les traits de coupes (en anglais:. crop marks) sont des lignes d'aide qui sont utilisées dans la photocopie et dans l'impression pour la coupe de pages.
Les repères de montage (en 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.
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross; }
</style>
|
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/gaucheVous 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.
<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>
|
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) ou right (pour désigner les pages de droite). 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.
D'autres types de page sont à l'étude, par exemple un type "première page". Dans la version 2.0 du langage CSS, ne sont pourtant prévus que les deux types de page gauche et droite.
|
|
Lignes d'entête et de piedVous pouvez définir pour un format de page des lignes d'entête et de pied
qui seront répétées sur toutes les pages. Si vous définissez une page
droite/gauche, vous pouvez définir pour les deux types de page des
lignes d'entête et de pied différentes.
<style type="text/css">
@page { size:21.0cm 14.85cm; }
@page :header
{ content: ,first(chapter), ; border-bottom:thin solid black; }
@page :footer
{ content: ,"page " decimal(pageno), ; border-top:thin solid black; }
</style>
|
<style type="text/css">
@page { size:21.0cm 14.85cm; }
@page :left { margin-left:1.5cm; margin-right:2cm }
@page :right { margin-left:2cm; margin-right:1.5cm }
@page :left :header
{ content: decimal(pageno),,first(chapter); border-bottom:thin solid black; }
@page :right :header
{ content: first(section),,decimal(pageno); border-bottom:thin solid black; }
@page :left :footer
{ content: "page " decimal(pageno); text-align:center; }
@page :right :footer
{ content: "page " decimal(pageno); text-align:center; }
</style>
|
Vous créez des lignes d'entête et lignes de pied en notant derrière @page, séparé par un espace, un double point suivi immédiatement du mot clé header (pour désigner la ligne d'entête) ou footer (pour désigner la ligne de pied). Si vous définissez des pages gauches et des pages droites vous pouvez combiner toutes les mentions. Les combinaisons suivantes sont possibles:
@page :header = ligne d'entête pour toutes les pages.
@page :footer = ligne de pied pour toutes les pages.
@page :left :header = ligne d'entête pour toutes les pages de gauche.
@page :right :header = ligne d'entête pour toutes les pages de droite.
@page :left :footer = ligne de pied pour toutes les pages de gauche.
@page :right :footer = ligne de pied pour toutes les pages de droite.
Ne définissez que les passages dont vous avez besoin. Si par exemple, vous ne voulez pas avoir de ligne de pied, ne mentionnez pas les définitions correspondantes.
Derrière :header ou. :footer vous pouvez définir le passage de la ligne d'entête ou de la ligne de pied. Pour ce faire, vous disposez de toutes les mentions de feuilles de style habituelles pour le formatage. Dans l'exemple ci-dessus les lignes d'entête reçoivent par exemple une ligne au dessous (border-bottom).
La mention la plus importante dans les parenthèses accolade est pourtant content:. Grâce à elle vous pouvez déterminer le contenu proprement dit des lignes d'entête/ de pied. Une ligne d'entête ou une ligne de pied peut contenir un, deux ou trois éléments. Le premier élément sera aligné à gauche, le deuxième centré et le troisième à droite. Les élément sont séparés par des virgules. Notez derrière content toujours deux virgules de préférence. Avant la première virgule, notez l'élément devant être aligné à gauche, entre les deux virgules l'élément qui doit être centré et derrière la dernière virgule l'élément à aligner à droite. Si vous ne désirez faire aucune mention pour un ou deux éléments, laissez les virgules en place sans faire de mention à l'endroit correspondant. Dans l'exemple 1 ci-dessus, vous pouvez voir comment par ce moyen pour la ligne d'entête et la ligne de pied un seul élément a été défini. Étant donné que l'élément doit être centré, il se trouve entre les deux virgules. Dans l'exemple 2 vous pouvez voir derrière @page :left :header, comment deux éléments sont définis - un à gauche et l'autre à droite. Le passage centré reste libre. C'est pour cette raison que vous avez deux virgules à la suite et à leur gauche t à leur droite les deux éléments.
Un élément permis derrière content: peut être un texte invariable. De tels textes invariables doivent être mis entre guillemets. Dans les exemples ci-dessus c'est par exemple le texte "page". À côté de tels textes invariables il y a encore une série de parties de texte variables de façon dynamique. Les mentions suivantes sont permises:
decimal(pageno) = numéro de la page actuelle sous forme décimale (1,2,3,4
etc...).
lower-roman(pageno) = numéro de la page actuelle en chiffres romains
minuscules (i,ii,iii,iv etc...).
upper-roman(pageno) = numéro de la page actuelle en chiffres romains
majuscules (I,II,III,IV etc...).
lower-alpha(pageno) = numéro de la page actuelle sous forme
alphabétique minuscules(a,b,c,d etc...).
upper-alpha(pageno) = numéro de la page actuelle sous forme
alphabétique majuscules (A,B,C,D etc...).
decimal(pages) = nombre total de pages sous forme décimale.
lower-roman(pages) = nombre total de pages en chiffres romains
minuscules.
upper-roman(pages) = nombre total de pages en chiffres romains
majuscules.
lower-alpha(pages) = nombre total de pages sous forme
alphabétique-minuscules.
upper-alpha(pages) = nombre total de pages sous forme
alphabétique-majuscules.
first(title) = Contenu du premier élément de la page avec running-head:title (voir
plus bas).
first(chapter) =contenu du premier élément de la page avec running-head:chapter (voir
plus bas).
first(section) = contenu du premier élément de la page avec running-head:section (voir
plus bas).
last(title) = Contenu du dernier élément de la page avec running-head:title (voir
plus bas).
last(chapter) = contenu du dernier élément de la page avec running-head:chapter (voir
plus bas).
last(section) = contenu du dernier élément de la page avec running-head:section (voir
plus bas).
previous(title) = Contenu du dernier élément noté avant avec running-head:title (voir
plus bas).
previous(chapter) = contenu du dernier élément noté avant avec running-head:chapter (voir
plus bas).
previous(section) = contenu du dernier élément noté avant avec running-head:section (voir
plus bas).
url = adresse URL du document.
date =date et heure locale.
|
|
Marquer des éléments HTML pour les lignes d'entête et de pied (running-head)Cette mention est importante si vous définissez des lignes
d'entête et de pied et définissez des contenus variables permis.
Il est par exemple judicieux de marquer les titres avec cette mention de
feuilles de style.
<html>
<head>
<title>Exemple</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; }
@page :header
{ content: first(title),,first(chapter); }
</style>
</head>
<body>
<h1 style="running-head:title">Titre du document</h1>
<h2 style="running-head:chapter">Un chapitre</h2>
contenu important
<h2 style="running-head:chapter">Un autre chapitre</h2>
contenu important
</body>
</html>
|
Avec running-head: vous pouvez marquer des contenus HTML
appropriés pour des lignes d'entête ou de pied variables. Dans l'exemple
ci-dessus une ligne d'entête est définie qui donne à gauche le titre du
document (first(title)) et à droite le numéro de chapitre
actuel (first(chapter)). Dans le texte un titre N°1 figurant au
début a été défini à cet effet avec running-head:title comme
titre pour la ligne d'entête. Les titres N°2 qui suivent dans le document ont
été définis comme chapitre avec running-head:chapter.
Les mentions suivantes sont permises pour running-head: :
title = Marque le contenu d'un élément HTML pour first(title), last(title)
ou previous(title).
chapter = marque le contenu d'un élément HTML pour first(chapter), last(chapter)
ou previous(chapter).
section = marque le contenu d'un élément HTML pour first(section), last(section)
ou previous(section).
none = ne marque pas le contenu d'un élément HTML (cas normal).
|
|
Saut de page avant un élément (page-break-before)Vous pouvez imposer ou empêcher un saut de page avant un élément HTML.
<h1 style="page-break-before:always">Titre avec saut de page avant</h1> |
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 un saut de page avant l'élément actuel.
left = Avec page
gauche/droite insérer un saut de page et mettre l'élément actuel sur
la prochaine page gauche.
right = Avec page
gauche/droite
insérer un saut de page et mettre l'élément actuel sur la prochaine page
droite.
auto = pas de mention pour le saut de page (réglage normal).
|
|
Saut de page après un élément (page-break-after)Vous pouvez imposer ou empêcher un saut de page après un élément HTML.
<p style="page-break-after:avoid">paragraphe de texte sans saut de page après</p> |
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 un saut de page après l'élément actuel.
left = Avec page
gauche/droite insérer un saut de page et mettre l'élément suivant sur
la prochaine page gauche.
right = Avec page
gauche/droite
insérer un saut de page et mettre l'élément suivant sur la prochaine page
droite.
auto = pas de mention pour le saut de page (réglage normal).
|
|
Lignes seules en fin de page - orphelines (orphans)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.
<style type="text/css">
p,blockquote,div { orphans:3; }
</style>
|
Avec orphans: vous pouvez spécifier combien de lignes d'un texte courant 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.
|
|
Lignes seules en début de page - veuves (widows)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.
<style type="text/css">
p,blockquote,div { widow:3; }
</style>
|
Avec widow: vous pouvez spécifier combien de lignes d'un texte courant 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.
|
| |
après: |
Mentions de feuilles de style: contrôle du son pour sortie vocale
|
avant: |
Mentions de feuilles de style: texte sur plusieurs colonnes
|
SELFHTML/Quickbar
Mentions de feuilles de style
Serge François, 13405@free.fr
