Impression CSS : Éviter les DIV coupés en deux entre les pages ?

Question

J'écris un plug-in pour un logiciel qui prend une grande collection d'éléments et les affiche en HTML dans une WebView en Cocoa (qui utilise WebKit comme moteur de rendu, donc en gros vous pouvez supposer que ce fichier HTML est ouvert dans Safari).

Les DIVs qu'il crée sont de hauteur dynamique, mais ils ne varient pas trop. Elles sont généralement autour de 200px. Quoi qu'il en soit, avec environ six cents de ces éléments par document, j'ai beaucoup de mal à les faire imprimer. À moins que j'aie de la chance, il y a une entrée coupée en deux en bas et en haut de chaque page, ce qui rend l'utilisation des impressions très difficile.

J'ai essayé la rupture de la page avant, la rupture de la page après, la rupture de la page à l'intérieur, et des combinaisons des trois, sans succès. Je pense que c'est peut-être parce que WebKit ne rend pas correctement les instructions, ou peut-être est-ce mon manque de compréhension de la façon de les utiliser. Quoi qu'il en soit, j'ai besoin d'aide. Comment puis-je éviter que mes DIV ne soient coupés en deux lors de l'impression ?

Answer 1

Utilisation de par effraction devrait fonctionner :

@media print {
  div {
    break-inside: avoid;
  }
}

Il fonctionne sur tous les principaux navigateurs :

• Chrome 50+.
• Bordure 12
• Firefox 65
• Opéra 37+.
• Safari 10+

Utilisation de page-break-inside: avoid; au lieu de cela devrait fonctionner aussi, mais a été exactement déprécié par break-inside: avoid .

Answer 2

Seulement une solution partielle : La seule façon d'obtenir ce résultat pour IE était d'envelopper chaque div dans son propre tableau et de définir la page-break-inside sur le tableau pour l'éviter.

Answer 3

Page-break-inside : avoid ; ne fonctionne absolument pas dans webkit, en fait c'est un problème connu depuis plus de 5 ans maintenant. https://bugs.webkit.org/show_bug.cgi?id=5097

D'après mes recherches, il n'existe aucune méthode connue pour y parvenir (je travaille à la mise au point de mon propre hack).

Le conseil que je peux vous donner est le suivant : pour réaliser cette fonctionnalité dans FF, enfermez le contenu que vous ne voulez jamais interrompre à l'intérieur d'un DIV (ou de n'importe quel conteneur) avec overflow : auto (faites juste attention à ne pas provoquer l'apparition de barres de défilement bizarres en dimensionnant le conteneur trop petit).

Malheureusement, FF est le seul navigateur dans lequel j'ai réussi à accomplir cela, et webkit est celui qui m'inquiète le plus.

Answer 4

J'ai le même problème mais pas encore de solution. page-break-inside ne fonctionne pas sur les navigateurs autres que Opera. Une alternative pourrait être d'utiliser page-break-after : éviter ; sur tous les éléments enfants du div pour les garder ensemble ... mais dans mes tests, l'attribut avoid ne fonctionne pas, par exemple dans Firefox ...

Ce qui fonctionne dans tous les navigateurs populaires, ce sont les sauts de page forcés, en utilisant, par exemple, la fonction d'ouverture de page. page-break-after : always

Answer 5

Les valeurs possibles pour page-break-after sont : auto, always, avoid, left, right

Je pense que vous ne pouvez pas utiliser la propriété page-break-after sur des éléments positionnés de manière absolue.