CSS et impression

le Visiteur · le 26 juillet 2004

Bonjour,

J'ai une page générée dynamiquement qui tient le plus souvent sur une seule page à l'impression.

Parfois ce n'est pas le cas et j'aimerais alors que le dernier élément (un tableau) soit précédé d'un saut de page au lieu de s'imprimer en partie sur la première page, et la suite dans l'autre.

J'ai fait appel à toutes les valeurs possibles de page-break-before sans succès. Y a t'il une solution ?

Merci.

KewlCat · le 28 juillet 2004

http://www.w3.org/TR/REC-CSS2/page.html#page-break-props

D'après ces specs de CSS2, ton tableau doit porter l'information de style "{ page-break-before: always; }" si tu veux forcer le saut de page systématique, sinon il faut utiliser "{ page-break-inside: avoid; }" si tu ne veux pas que ton tableau se retrouve "coupé" à l'impression (donc qu'il reste entier sur la première page, ou s'il ne tient pas, qu'il reste entier mais tout seul sur la seconde page)

Quelles combinaisons as-tu testées et quels furent les résultats obtenus ? (parce que là tu ne nous éclaires pas vraiment sur ce que tu as tenté...)

le Visiteur · le 28 juillet 2004

Salut,

Merci pour ta réponse. J'avais donc parcouru les spécifications CSS2 et découvert les deux propriétés que tu me proposes. Malheureusement aucune des valeurs possibles ne permet d'éviter que le tableau soit coupé.

En revanche le saut de page forcé fonctionne, mais bon ça m'arrange pas trop vu que dans la mesure du possible tout doit tenir sur une seule page.

Actuellement la seule solution que j'ai trouvé est un bouton sur lequel on doit cliquer, caché à l'impression, si l'aperçu du navigateur fait deux pages et qui positionne page-break-before à always ...

Je précise que j'ai testé avec IE 6, et Firefox 0.9.1 .

KewlCat · le 28 juillet 2004

Est-ce que tu peux détailler un peu cette histoire de bouton, je ne suis pas sûr df'avoir bien compris à quoi il sert...

Et si j'ai bien compris, ton tableau, même seul, ne tient pas sur une seule page à l'impression ?

le Visiteur · le 29 juillet 2004

Le document à imprimer, de longueur variable, contient plusieurs sections et plusieurs tableaux.

Il peut arriver que le dernier se retrouve à cheval sur une seconde page, ce que je cherche à éviter en forçant un saut de page seulement si nécessaire. Il se trouve malheureusement que les navigateurs actuels n'implémentent pas correctement les propriétés gérant cela (apparemment).

En revanche le saut de page systématiquement forcé fonctionne. J'en tire donc parti comme suit : j'ai créé un bouton juste au dessus du dernier tableau, caché à l'impression, qui positionne page-break-before à always pour le tableau. Il s'agit donc pour la personne qui cherche à imprimer de vérifier le nombre de pages occupées par le document via un aperçu navigateur, puis de cliquer sur le bouton s'il est de 2.

En fait j'ai substitué une action javascript manuelle à l'action automatiquemt des CSS? Si tu vois une meilleure solution ...

KewlCat · le 29 juillet 2004

Je ne suis pas certain de bien voir quels problèmes cela pose, étant donné que tu ne nous as rien révélé sur la structure de ta page... Tu as un exemple sous la main ?

Je suis surpris de voir que le fait de spécifier "page-break-inside: avoid;" sur les tableaux ne les empêche pas de se retrouver à cheval sur plusieurs pages...

Une intervention manuelle, c'est quand même pénible !

le Visiteur · le 31 juillet 2004

Tout à fait d'accord pour la pénibilité d'une action manuelle, ce dont j'aimerais m'affranchir. Quant à un exemple, en voici un très simple :

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script language="JavaScript">
for(i=0;i<50;i++){
document.write("aaaaaaaaaaaaaaaaaaaafffffff ffffffffd dddddddd<br>")
}
</script>
<div style="page-break-inside: avoid;">
<table border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" style="page-break-inside: avoid;">
 <tr>
   <td width="1">zzz</td>
   <td width="7">eeee</td>
 </tr>
 <tr>
   <td>dd</td>
   <td>dcc</td>
 </tr>
 <tr>
   <td>;;;;</td>
   <td>eee</td>
 </tr>
 <tr>
   <td>,,,</td>
   <td>,</td>
 </tr>
 <tr>
   <td>lllll</td>
   <td>!!!!!!</td>
 </tr>
</table>
</div>
</body>
</html>

Tu noteras que j'ai même encapsulé le tableau dans un div et doublé l'instruction de style au cas où ... Comme je le disais ni IE ni Firefox ne conserve le tableau intact

Connexion

Pas encore inscrit ?

CSS et impression

Messages recommandés

le Visiteur

KewlCat

le Visiteur

KewlCat

le Visiteur

KewlCat

le Visiteur

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer