Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
Pour obtenir une sortie imprimée au formatage idéal, il est possible de mettre en œuvre une programmation côté serveur qui élimine les passages superflus du code source HTML, ajoute les informations complémentaires etc...Ce n'est cependant qu'exceptionnellement nécessaire pour des transformations fondamentales étant donné que les CSS offrent la possibilité de fixer différentes mises en page selon les
médias de sortie
– il n'est donc pas indispensable d'établir une page HTML spéciale. Grâce aux méthodes exposées ci-après, la mise en page pour la sortie imprimée peut être optimisée.
Cet article traite de l'établissement d'une mise en page pour la sortie imprimée, vous n'êtes cependant pas obligé d'imprimer impérativement pour voir le résultat. En choisissant les points suivants du menu et les raccourcis clavier, vous obtenez l'aperçu avant impression de votre navigateur qui correspond à la sortie effective:
- Camino: File / Print (touche de commande P), puis le bouton „Preview“
- Explorer Internet 5.0 Mac: Fichier / Aperçu avant impression
- Explorer Internet 5.x Win: Fichier / Aperçu avant impression
- Explorer Internet 6.0 Win: Fichier / Aperçu avant impression
- Konqueror: document / imprimer ... / [x] Aperçu (activer)
- Mozilla (Netscape 6 et 7): Fichier / Aperçu avant impression ou bien [Alt][f], [v]
- Omniweb: File / Print (touche de commande P), et là le bouton „Preview“
- Opera: Fichier / Aperçu avant impression ou bien [p]
- Safari: document/imprimer (touche de commande P), puis le bouton „aperçu“
Pour le cas où le soutien des CSS par votre navigateur était insuffisant (ce qui est avant tout le cas pour Netscape 4 et l'Explorer Internet), chaque exemple présente une capture d'écran.
Il y a plusieurs méthodes d'incorporer des feuilles de style pour différents médias de sortie. Soit vous incororez
diverses feuilles de style séparées pour différents médias de sortie
ou bien vous regroupez tous les types de médias
dans une feuille de style. La deuxième méthode est certes plus claire mais n'est malheureusementpas très fiable. Pour l'incorporation au moyen de la syntaxe CSS (import url() ou bien. @media ... {}) l'Explorer Internet 5 fonctionne mal que ce soit dans la version Windows ou bien Mac. Netscape 4 déclare ici purement et simplement forfait.
La syntaxe HTML qui consiste à incorporer une feuille de style par type de média avec <link rel= ... > fonctionne par contre avec la plupart des navigateurs, raison pour laquelle elle a été privilégiée pour l'établissement des exemples. L'incorporation a l'aspect suivant:
| Texte source |
Explication |
<link rel="stylesheet" type="text/css" href="selfhtml.css" media="all" /> |
Ce repère HTML dans l'entête de la page <head> incorpore une feuille de style nommée selfhtml.css pour tous les types de médias. De la sorte les définitions qu'elle contient s'appliquent toujours. |
<link rel="stylesheet" type="text/css" href="moniteur.css" media="screen" /> |
Ce repère HTML dans l'entête de la page <head> incorpore une feuille de style nommée moniteur.css pour le type de média screen. De la sorte les définitions qu'elle contient s'appliquent pour l'affichage sur le moniteur. |
<link rel="stylesheet" type="text/css" href="impression.css" media="print" /> |
Ce repère HTML dans l'entête de la page <head> incorpore une feuille de style nommée impression.css pour le type de média print. De la sorte les définitions qu'elle contient s'appliquent pour l'imprimante. |
|
Attention:
Si la feuille de style universellement valable „selfhtml.css“ contient des définitions génant l'impression, celles-ci doivent être explicitement écrasées dans la feuille de style d'impression „impression.css“. C'est pourquoi il est avantageux de n'écrire qu'exclusivement pour l'affichage sur le moniteur les définitions nécessaires dans „moniteur.css“.
Remarque:
Dans les exemples de texte source qui suivent, le code pour l'incorporation de la feuille de style n'est pas toujours énoncé séparément,une ligne de commentaire indique cependant de quelle feuille de style les définitions font partie. La feuille de style universellement valable de SELFHTML actuel s'appelle selfhtml.css.
Il est judicieux de mettre en œuvre pour l'impression d'autres formatages que ceux utilisés pour l'affichage à l'écran. Ceci s'applique avant tout aux passages positionnés, ainsi qu'à la composition des couleurs et aux polices d'écriture.
Exemple d'affichage: aperçu
Extrait du texte source:
| texte source |
Explication |
| selfhtml.css |
h1{
font-size:26px;
margin-bottom:18px;
}
|
Tout d'abord sont définies les propriétés universellement valables, dans l'exemple, c'est le titre N° 1 qui est formaté. Ceci s'applique à tous les types de média. |
| moniteur.css |
h1 {
text-align:right;
border-bottom:3px dashed #00f;
color:#008;
background-color:inherit;
}
|
La validité de toutes les lignes notées dans ce fichier est limitée au type de média screen, ce fichier est utilisé pour l'affichage à l'écran. |
| impression.css |
h1, ... {
color:#000;
background-color:#fff;
}
|
Dans la dernière feuille de style enfin, impression.css, sont rassemblées toutes les définitions significatives pour l'impression. Dans l'exemple, une police noire sur fond blanc est affectée à la plupart des éléments. |
|
Attention:
La plupart des pilotes d'imprimante permettent d'effectuer une impression en nuances de gris pour économiser les cartouches de couleurs onéreuses. L'inverse n'est pas possible – Si vous formatez la mise en page à l'impression en nuances de gris, l'impression ne contiendra pas de couleurs, même si vos visiteurs le désirent. Il s'agit ici de mesurer à quel point vous désirez répondre aux attentes de vos visiteurs sans les tenir en tutelle. De plus, la plupart des navigateurs ignorent à l'impression les couleurs et images d'arrière-plan que vous avez fixées afin d'économiser ici de la couleur ou du toner. Ce qui est judicieux et délibéré, sans pouvoir pour cette raison être détourné par une voie normale.
L'empattement est constitué par les tirets aux extrémités des lettres. Alors qu'à l'écran des polices sans empattement sont plus lisibles, il est préférable de recourir à des polices avec empattement pour l'établissement de la mise en page à l'impression.
Exemple d'affichage: aperçu
| Texte source |
Explication |
| moniteur.css |
* {
font-family:verdana,arial,sans-serif;
}
|
La sortie de tous les éléments à l'écran est faite avec une police sans empattement, ... |
| impression.css |
* {
font-family:"times new roman",times,serif;
text-align:justify;
}
|
...mais se fait avec empattement et avec justification à l'impression. |
|
Les deux lettres de gauche représentent la police „Verdana“ (sans empattement), Celles de droite „Times New Roman“
(avec empattement, marqué en rouge).
Au moyen de
display:none,
il est possible de faire disparaître des éléments qui ne sont pas nécessaires à l'impression, par exemple des formulaires, mais aussi des passages complets, comme par exemple la navigation. Pour faire disparaître des parties constituantes de la page, s'offrent plusieurs possibilités:
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
#id {
display:none;
}
|
Le premier selecteur #id est approprié quand des passages qui ne doivent pas être imprimés on été clairement délimités avec un ID. |
element {
display:none;
}
|
Le deuxième sélecteur concerne des repères qui ne sont pas nécessaires à l'impression comme par exemple des formulaires. |
.classe {
display:none;
}
|
Le troisième sélecteur s'applique à tous les éléments auxquels une classe correspondante a été affectée. |
#id, element, .classe {
display:none;
}
|
Ces différentes méthodes peuvent être combinées sans problème. |
|
De la même façon, il est possible de ne prendre en compte des éléments qu'exclusivement à l'impression. Affectez display:none à l'élément désiré dans la feuille de style universellement valable et, dans la mise en page à l'impression „impression.css“, vous l'écrasez avec
display:block|inline|....
Attention:
Les navigateurs texte et les moteurs de recherche ignorent les CSS et ne tiennent donc pas compte des disparitions que vous avez définies. Donc même en renonçant complétement aux CSS, l'élaboration du document rester logique.
visibility:hidden
n'est pas approprié ici, le résultat aboutit certes également à occulter des éléments, mais l'espace réservé pour l'élément n'est pas libéré et donne pour cette raison des surfaces vides. display:none
par contre élimine complétement les passages du flux d'éléments – comme s'ils étaient également absents du texte source.
Si vous voulez forcer ou empêcher un saut de page, vous pouvez le faire au moyen de
page-break-before
ou de
page-break-after.
Si une disposition relativement large doit tenir sur une feuille de papier parcequ'elle contient ébentuellement un tableau avec de nombreuses colonnes, il est possible de définir la sortie à l'imprimante en orientation paysage au moyen de @page { size:landscape }. SELFHTML contient une description ainsi qu'un
exemple.
Attention:
Les exemples de contenus générés
cités dans cet article fonctionnent avec
Mozilla
et Opera
Konqueror/Safari?.
L'Explorer Internet ne maîtrise ni les contenus générés, ni les
formats liés à l'attribut,
qui ont été également employés, Netscape 4 bute déjà lors de l'incorporation. Toutefois, aucune erreur ne peut se produire lors de la mise en œuvre de ces techniques pour les navigateurs cités, les passages dans la feuille de style sont tout simplement ignorés. Rien ne s'oppose donc dans la pratique à une mise en œuvre sans restriction.
Lors de l'impression de pages Web, une des caractéristiques les plus importantes de l' hypertexte disparaît – les liens. Avec les contenus générés, il est cependant possible de rendre visible sur le papier l'attribut href qui contient la cible du lien:
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
a[href]:after {
content:" <"attr(href)">";
color:#888;
background-color:inherit;
font-style:italic;
size:80%;
}
|
À tous les éléments a qui ont pour attribut href est ajouté, après un espace, le contenu de cet attribut entre parenthèses pointues (plus grand que, moins grand que). Les autres définitions correspondent à celles de cet exemple et des suivants et peuvent varier à souhait. |
|
Non seulement les cibles des liens se perdent à l'impression, mais c'est normalement le cas des ancres posées dans le document. La définition suivante dans la feuille de style permet de restituer celles-ci:
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
*[name]:after {
content:" [#"attr(name)"]";
color:#888;
background-color:inherit;
font-style:italic;
size:80%;
}
|
À tous les éléments qui présentent un attribut name et qui servent ainsi d'ancre est ajouté le contenu de cet attribut sous la forme „[#nom_ancre]“. |
|
Remarque:
Cet exemple convient aussi pour une utilisation dans la feuille de style de l'écran.
Dans XHTML 1.1 l'attribut name n'est plus prévu et il est remplacé par les IDs. Dans ce cas on remplace [name] par [id] dans le sélecteur et pour la propriété content: la valeur attr(name) par la valeur attr(id). Étant donné que le contenu généré est ainsi ajouté à toutes les IDs du document, il est indiqué de limiter le sélecteur aux titres.
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
h1[id]:after, h2[id]:after, ... {
content:" [#"attr(id)"]";
color:#888;
background-color:inherit;
font-style:italic;
size:80%;
}
|
Tous les titres qui présentent un attribut id et qui servent ainsi d'ancre est ajouté le contenu de cet attribut sous la forme „[#nom_ancre]“. |
|
Quand vous vous servez de l'attribut title pour permettre d'accéder à des informations complémentaires dans une bulle d'aide, vous n'êtes pas obligé d'y renoncer lors de l'impression.
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
*[title]:after {
content:" ("attr(title)")";
color:#888;
background-color:inherit;
font-style:italic;
size:80%;
}
|
À tous les éléments qui présentent un attribut title, est ajouté le contenu de cet attribut. Le contenu généré se compose d'un espace et du contenu de l'attribut entre parenthèses: „ (attribut title)“ |
|
Remarque:
Grâce à cette méthode, des abréviations telles que abbr et
acronym, mais aussi des images, liens etc...peuvent être assortis d'un texte d'explication complémentaire.
Dans l'attribut alt, prescrit impérativement pour les images, doit être inséré un texte alternatif qui décrit le contenu de l'image. Si vous désirez en tenir compte aussi lors de la mise en page à l'impression, vous pouvez utiliser les définitions suivantes:
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
img[alt]:after {
content:" ("attr(alt)")";
}
|
Le contenu de l'attribut alt est affiché entre parenthèses après chaque image: „ (attribut alt)“ |
|
Si vous voulez afficher le contenu généré sous les images, vous pouvez insérer un passage à la ligne grâce à „\A “ dans la valeur de la propriété content::
| Texte source |
Explication |
| impression.css |
img[alt]:after {
content:"\A ("attr(alt)")";
}
|
„\A “ crée le changement de paragraphe désiré. |
|
L'attribut longdesc
contient l'adresse d'une source où on peut obtenir une description de l'image plus complète. Les navigateurs texte affichent à cet endroit un lien correspondant. On insère cet attribut pour qu'il soit visible dans le document de la façon suivante:
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
img[longdesc]:after {
content:"\A (description: "attr(longdesc)")";
}
|
Le contenu de l'attribut longdesc est écrit dans le document après un passage à la ligne et un espace: „ (Description: attribut longdesc)“ |
|
L'élément q prévu pour de courtes citations et l'élément blockquote destiné à des blocs de citation plus longs peuvent se voir afferter l'un et l'autre l'attribut cite qui contient une source sous la forme d'une URI. Il est possible de visualiser le contenu de l'attributavec un contenu généré:
Exemple d'affichage: aperçu
| Texte source |
Explication |
| impression.css |
*[cite]:after {
content:close-quote" (source: "attr(cite)")";
font-size:80%;
}
|
Derrière chaque élément présentant un attribut cite , La source de la citation est ajoutée sous forme d'URI: „ (source: http://exemple.com/) “ |
|
Attention:
Les „guillemets“ dont vous disposez sur votre clavier ne sont pas conformes à la typographie française. La forme correcte aurait cet aspect „ “ comme guillemets doubles et ‚ ‘ comme guillemets simples. Ce qui peut aussi s'obtenir avec un contenu généré:
| Texte source |
Explication |
| impression.css |
* {
quotes: "\201E" "\201C" "\201A" "\2018";
}
|
D'abord les guillemets corrects sont affectés à tous les éléments. Ils ont été définis en Unicode. |
q:before, blockquote:before {
content:open-quote;
}
|
Enfin les guillemets d'ouverture sont placés devant tous les repères q et blockquote... |
q:after, blockquote:after {
content:close-quote;
}
|
...et les guillemets de fermeture sont placés après. |
|
L'article
œuvrez les guillemets
traite ce thème de façon exhaustive.
Les réglages concernant l'impression des lignes d'entête et de pied de page incombent à l'utilisateur du navigateur.
Le concepteur de page ne peut influer sur celles-ci avec CSS2. Il est probable que cela devienne possible avec CSS3.
| Syntaxe: |
Netscape 4 |
MSIE 5.0
Windows |
MSIE 5.5
Windows |
MSIE 6.0
Windows |
MSIE 5.0
Mac |
Konqueror |
Safari |
Mozilla,
Netscape 6,7 |
Opera 6 |
Opera 7 |
<link rel="" media=""> |
défectueux |
oui |
oui |
oui |
oui |
oui |
oui |
oui |
oui |
oui |
@media ... |
non |
oui |
oui |
oui |
non |
oui |
oui |
oui |
oui |
oui |
@import url("bla.css") |
non |
non |
non |
non |
oui |
oui |
oui |
oui |
oui |
oui |
*[attribut] |
non |
non |
non |
non |
non |
oui |
oui |
oui |
oui |
oui |
:before |
non |
non |
non |
non |
non |
non |
non |
oui |
oui |
oui |
:after |
non |
non |
non |
non |
non |
non |
non |
oui |
oui |
oui |
Les adresses qui suivent sont recommandées pour mieux comprendre les exemples ci-dessus ou pour approfondir et apprendre d'autres possiblités.
Numérotation automatique
CSS2 Media Tests
W3C: Description des pseudo-éléments :before et :after
Conception Web: la forme d'un site web
Typographie - Caractère sans empattement
© 2005 Informations
SELFHTML actuel 
Roland Skop
