28172 sujets

CSS et mise en forme, CSS3

Problème sur Chrome avec display:inline-block et l'impression

Bonjour,
J'ai un petit problème avec display:inline-block sur Chrome lorsque je souhaite imprimer mon document depuis le navigateur.

Voici mon code (simplifié pour l'occasion) : 

<html>
<head>  
    <style>
    @page {margin:0.5cm 0;size:portrait;}
    div {margin:0;padding:0;} 
    .wrapper {margin:0 0 0 1cm;}
    .bloc {margin:2px 0;display:inline-block;width:6.3cm;height:8.8cm;background:red;}
    </style>
</head>

<body>
    <div class="wrapper">  
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>
            <div class="bloc"></div>    
    </div>      
</body>
</html>


Je souhaite avoir 9 blocs par page A4 lors de l'impression.

Si j'imprime la page avec le code ci-dessus (13 blocs) cela fonctionne très bien sur Chrome. J'ai bien 9 blocs sur la page 1 et les 4 blocs suivants sur la page 2.

Mais si je retire un bloc (12 blocs au total donc), je me retrouve avec 6 blocs sur la page 1 et 6 blocs sur la page 2.

Si je retire 3 autres blocs (9 blocs au total), j'ai bien les 9 blocs sur la même page. Smiley biggol

Je ne comprends pas pourquoi cela change ainsi. Smiley confus

Sur Firefox, tout fonctionne bien quelque soit le nombre de blocs : j'ai toujours mes 9 premiers blocs sur la page 1 et le reste sur la page suivante. Mais il semble que Chrome interprète le code différemment suivant le nombre de blocs. J'ai cherché des heures pour corriger ce souci, sans succès.

Comment puis-je résoudre ce problème s'il vous plaît ?

Merci d'avance pour vos réponses et votre aide.

Cordialement.
Modifié par bendeb (06 Apr 2022 - 12:27)
Modérateur
Bonjour

Pour forcer chrome a effectuer une cassure / un page-break . Il faut que cet élément soit de type block (display: block ou flex ou grid ou table ou list-item, ....) . Tes éléments sont formater en ligne(inline-block) .
exemple si tu fais :
@media print{.wrapper  :nth-child(9n) {page-break-after: always;display: block ;}

Alors Chrome fera une cassure tous les 9 élément trouvé dans .wrapper. Cela cassera aussi ta mise en page en passant le neuvième de chaque série à la ligne.

Un hack peut consister à repositionner ce neuvième élément via position:sticky en provoquant alors une page entierement blanche.
@media print{.bloc:nth-child(9n) {page-break-after: always;display: block ; position:sticky; bottom: 1.65cm; left:calc(100% - 6.95cm );}

Là ça devient franchement tiré par les cheveux et aléatoire.

Ton soucis ne semble pas avoir de solution, à part laisser chrome dispatcher tes éléments sur les feuilles ou envelopper tes blocks par groupe de 9 dans un div.wrapper . soit coté serveur si tu genere ta page depuis un script qui extrait des données, soit coté visiteur avec JavaScript pour reconstruire ta structure à la volée.

Cdt
Merci gcyrillus pour ta réponse Smiley smile

Je vois l'idée mais en effet c'est tiré par les cheveux et le fait que ça créé une page blanche n'est pas très satisfaisant non plus.
Le mieux serait comme tu dis d'envelopper 9 blocs à la fois dans mon wrapper.
Là pour le coup c'est du php dans mon template, je suis beaucoup moins à l'aise. Smiley ohwell

Je vais essayer.

Merci encore.
Sujet clos
Aller à