28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Dans le cas d'une imprimante et moyennant une feuille de style media-print comportant les définitions suivantes:

@page{ 
    size: A4 landscape;
    margin:4mm 4mm 4mm 11mm;}

html{
    margin:0px;
    width:100%;
    height:100%;}

Que représentent physiquement les 100% donnés à la propriété height du html ?

- Pour un navigateur interprétant la définition @page ?
- Pour un navigateur n'interprétant pas la définition @page ?

in extenso :

A- La hauteur de *une* page A4 paysage soit 21cm ?
B- La hauteur de *une* page A4 paysage moins les marges soit 21cm - 8mm ?
C- La hauteur de *une* page dont les infos de dimension de l'espace imprimable sont connues du navigateur suite à un dialogue avec le pilote d'impression ?
D- Presque rien du tout, de toutes façons c'est width qui compte et height sera ajusté automatiquement pour que width soit égal à la largeur d'une page ?
E- Rien du tout ? (i.e. pas de lien avec la hauteur d'une page physique)

Je demande parce que j'ai l'impression que Firefox & Chromium suivent (B) (ce que je souhaite) mais j'hésite pour Safari-5 entre (C)-(D) et (E).
Nota : J'ai bien dit que j'ai l'impression car en fait, alors que je croyais que mon Firefox 24.5.0 honorait @page, la browser-console me crache un "unknown property : size... Smiley confus

Donc en fait, complètement confus je suis.
Modifié par aCOSwt (12 Sep 2014 - 09:40)
Bonjour,

je vais répondre un peu à côté de ta question mais peut-être en t'apportant quelques éléments.

La balise html ne sert à mon avis strictement à rien dans ton css de type print.
Cette balise, si tu souhaites lui appliquer un style doit être déclarée dans ton css de type media.

J'opterai pour ta réponse D, par contre pour les marges c'est le pilote d'impression qui va les définir, et cela dépend aussi du navigateur, imprime avec les différents navigateurs actuels, les marges seront différentes.

Pour la largeur, je te conseille de la définir en mm. Par exemple tu pourras spécifier que la largeur max d'impression sera de 170mm, au moins tu es sûr que cela ne débordera pas. Concernant la hauteur, il faut faire une phase de test, si ça change de page par exemple sur un paragraphe quelconque, je te conseille d'utiliser dans ton css print "page-break-after:always;". A toi de définir quand tu souhaites faire ton saut de page.

A toi de bien préparer ta feuille de style pour l'impression, et ça passera par des tests tout simplement. Changer la taille des polices, afficher / masquer les blocs que tu souhaites imprimer, etc... c'est un travail de mise en page.

J'espère t'avoir aidé un peu, même si cela te paraît un peu vague, l'impression est une des fonctionnalités finale du site internet que je gère à mon boulot, pas si facile que cela en a l'air.

Il y a un tuto alsa sur le css print ici:
http://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html
Modifié par Pedrothelion (23 Sep 2014 - 16:50)