Je travaille actuellement sur l'impression de quelque chose. J'ai une page dynamique où il a des nombres variables d'éléments de niveau de bloc. Certains peuvent être une ligne, et certains peuvent être plus de 100 lignes.Travailler autour de page-break-inside: éviter
<div class='myclass'><span id="id1">1</span>text 1 line....</span></div>
<div class='myclass'><span id="id2">2</span>text 10 lines....</span></div>
<div class='myclass'><span id="id3">3</span>text 3 lines....</span></div>
<div class='myclass'><span id="id4">4</span>text 100+ lines....</span></div>
...
Je connais le saut de page: avoid; quand il est implémenté (supporté par Opera, Chrome, et IE7 + en mode html strict seulement), supposons d'empêcher un élément de niveau bloc de contourner 2 pages. Étant donné que cette balise css ne supporte pas les navigateurs, je me demande s'il y a encore du travail à faire? J'ai essayé d'utiliser jquery, post-rendu, et de mesurer chaque élément par page, en additionnant la hauteur, et quand le dernier élément ajouté pour être supérieur à la hauteur de la page, j'ajoute un saut de page- avant: toujours à cet élément, mais cela ne fonctionne que si je suppose une certaine taille de page, et ce n'est jamais une bonne hypothèse.
sudo code only
document.ready(function(){
var pagesize = 100;
var currentheight;
$('.myclass').each(function(){
if (currentheight + this.getHeight() > pagesize || this.getHeight > pagesize) {
this.css('page-break-before', 'always');
currentheight = this.getHeight() % pagesize;
}
});
});
Et je ne veux pas ajouter simplement la page-break-before/after: toujours à chaque élément, car n'a pas de sens d'avoir une doublure 1 sur une seule page.
Avez-vous trouvé une solution? –
Non, et nous allons utiliser JS pour formater la page de manière à insérer manuellement le saut de page. CSS n'a tout simplement pas un bon moyen de mettre en forme le saut de page avec élégance, au moins pas de manière cohérente à travers les navigateurs. – Churk