Formatage html pour l'impression

WRInaute occasionnel
Bonjour !
Je développe une application qui doit entre autres, générer des étiquettes afin qu'elles soient imprimées sur un papier adhésif, dont le format est bien déterminé.
Mon appli php génère donc en html des tableaux contenant tout un tas d'informations. Ces tableaux html sont formatés avec un
Code:
<link rel="style.css" media="print">
Un aperçu avant impression me confirme qu'ils apparaissent bien.
Mon pb est le suivant : mes étiquettes papier font 62 mm de hauteur. Comment régler la hauteur d'un tableau pour qu'à l'impression, il fasse également 62 mm de hauteur ? La résolution de l'écran utilisé n'entre-t-elle pas en ligne de compte ? Faut-il régler sa hauteur avec un bon vieil attribut html height="200" ou utiliser une unité de mesure px, em, ou autre en css ? Comment faire pour qu'en cas de texte trop important on "bloque" la hauteur fixée ?
Merci des tuyaux !
 
WRInaute occasionnel
xdeslandes a dit:
avec un bon vieril attribut html height="200"
Si tu ne précises pas l'unité, comme dans ton exemple, il va automatiquement choisir - à tort - le pixel.
Or "mm" est une unité tout à fait valable et conseillée pour le média print. Donc height="200mm" convient.

Cependant, il faut toujours avoir conscience que la hauteur d'un tableau est dépendante de celles de ses cellules. Il faudrait donc fixer la hauteur de chaque cellule.

Pour gérer les "dépassement", je pense que le mieux est de voir du côté de la propriété CSS "overflow".

Bonne chance :)
 
WRInaute occasionnel
Merci !
Je crois que je vais me pencher sur la solution purement css, car, même si les classes sont un outil formidable, je ne suis pas sûr que celle-ci me convienne. En effet, mes tableaux contiennent beaucoup d'infos, celles-ci sont disposées très précisément les unes par rapport aux autres, et il y a jusqu'à trois pictogrammes dessus.
@Sibelius : mon attribut height était dans la balise html, mais je crois que tu as raison, je vais régler la hauteur du tableau dans le css afin d'utiliser le mm comme unité. Que me conseilles-tu d'aller voir pour la règle css overflow ?
 
WRInaute passionné
Tu devrais faire une recherhce sur Google et peut-être encore mieux sur Alsacréation.

Tu as la possibilité de définir le format d'une page pourl'impression, --> certainement pour une étiquette.

La feuille CSS géré pour l'impression, tu la gère comme cela dans tes meta :
Code:
<link rel="stylesheet" type="text/css" media="print" href="tonFichier.css" />

J'utilise déjà ce principe pour l'impression des pages de mon site.

Si tu veux voir ce que cela donne, vois l'aperçu avant impression de ma page d'accueil par exemple.

Ce n'est qu'un petit aperçu de ce qu'il est possible de faire.
 
WRInaute occasionnel
Merci medium69 ! Mais mon problème est bien plus complexe que cela :wink: . Je désire que la hauteur et largeur de mon tableau soient TOUJOURS celles de mes étiquettes papier, qu'il y ait 4 étiquettes par page, et qu'elles ne soient pas coupées si on lance une impression de plus de quatre étiquettes (souvent 50 ou 100 d'ailleurs).
 
WRInaute occasionnel
J'ai fait cela :
Code:
<table class="etq">
mon étiquette
</table>
Et dans mon fichier css,
Code:
table.etq {border: 1px solid black; padding: 0; height: 58mm; page-break-inside: avoid;}
afin qu'une étiquette ne soit pas coupée à la fin d'une page à l'impression (du moins c'est ce que je crois que cette propriété css fait !). Mais rien n'y fait : j'ai une étiquette (la 5ème) qui est coupée en bas de page lorsque je fait "aperçu avant impression".
Qu'en pensez vous ?
 
Discussions similaires
Haut