Veuves et orphelines au sein d'un bloc div

Bonjour à toutes et à tous !

Est-il possible en css de définir des veuves et orphelines (pour un document imprimé) au sein d'un bloc div ?

Par exemple, si j'ai une section div commençant par un titre et un paragraphe composé d'une seule ligne

<div class="Section">
<h3>Titre de la section</h3>
<p>Court texte introductif composé d'une seule ligne</p>

, je veux éviter de voir affichés au bas d'une page juste le titre et le paragraphe-ligne.

Mettre une valeur pour orphans et widows dans la déclaration de la div

div.Section
{
orphans: 4;
widows: 4;
}

ne semble pas permettre d'obtenir le résultat escompté (titre et paragraphe-ligne reportés en page suivante)

Pouvez-vous me suggérer une solution ?

Merci par avance
Modifié par cadbor (30 Nov 2011 - 16:11)

Bonjour,

il existe effectivement des propriétés spécifiques pour le print. Tu peux consulter la présentation ( et les liens utiles, à la fin ) dans cet article.

Beaucoup de proriétés existent en css1, 2 et 2.1, mais leur compatibilité est très loin d'être parfaite. D'ailleurs de mémoire, IE est un des meilleurs dans ce domaine, comme quoi tout est possible !

Merci de ta réponse, Ten

J'ai suivi tes conseils et ai lu l'article que tu mentionnes — que je connaissais déjà — ainsi que ceux cités en liens. Je n'y ai malheureusement pas trouvé la réponse à mon besoin.

La difficulté vient du fait que, semble-t-il, css ne permet pas de définir deux (ou plus) éléments html comme étant solidaires.
(Dans l'exemple que je mentionne, il faudrait rendre solidaires le titre, le paragraphe-ligne et l'élément suivant le paragraphe-ligne, en l'occurrence une courte liste à puces).

On peut cependant contourner la difficulté en enveloppant les petites parties qui risquent de poser problème par un bloc div ayant pour attribut style "page-break-inside: avoid".


PS : En fait, je suis peu concerné par la compatibilité des navigateurs par rapport aux propriétés css pour le print. Je conçois en effet des documents xhtml d'emblée prévus pour le format papier et utilise pour cela PrinceXML qui me permet de réaliser des documentations élaborées et sophistiquées, bien au-delà de ce que permettent les navigateurs.

PrinceXML c'est bien.

cadbor a écrit :
On peut cependant contourner la difficulté en enveloppant les petites parties qui risquent de poser problème par un bloc div ayant pour attribut style "page-break-inside: avoid".

Et pour se passer de conteneur supplémentaire, est-ce que page-break-before et page-break-after ne feraient pas ce que tu souhaites?

Spec CSS 2.1 pour la route:
http://www.w3.org/TR/CSS2/page.html#page-breaks

Merci de ta réponse, fvsch

Bien sûr, je peux en vérifiant le pdf généré par PrinceXML repérer les coupures de pages non désirées et placer sur la balise du xhtml source page-break-before ou page-break-after.

Cependant, dans la mesure où le document xhtml soumis à PrinceXML est le résultat d'une moulinette écrite en PHP générant une documentation xhtml contextuelle (si tel critère, telle information, si tel autre critère telle autre information), je ne peux savoir à l'avance où se produira la coupure de page.
Or vérifier et corriger chaque documentation générée peut rapidement être une tâche fastidieuse et longue (la documentation traduite en 5 langues de 5 produits déclinés chacun en 4 versions représente 5 x 5 x 4 = 100 documents...)

D'où, à mon sens, la nécessité d'englober dans un conteneur <div style="page-break-inside: avoid"> les parties courtes formant une entité sémantique distincte et pouvant entraîner des coupures de page inconfortables.

cadbor a écrit :
Bien sûr, je peux en vérifiant le pdf généré par PrinceXML repérer les coupures de pages non désirées et placer sur la balise du xhtml source page-break-before ou page-break-after.

Tu parles de rajouter des sauts de page manuellement. Je pensais plutôt à utiliser page-break-before:avoid ou page-break-after:avoid. Mais j'ai peut-être mal compris la spec (ça ne fait peut-être pas ce à quoi je pense...), ou bien PrinceXML ne supporte peut-être pas ces déclarations?
Modifié par fvsch (01 Dec 2011 - 22:46)

Bien sûr, PrinceXML supporte page-break-before:avoid et page-break-after:avoid.

Les possibilités de PrinceXML sont véritablement riches : il supporte la quasi totalité des propriétés CSS 2.1 applicables à un document papier ainsi qu'une bonne partie de CSS 3. De plus, il offre des propriétés spécifiques (précédées du préfixe "prince-") lorsque les propriétés CSS actuelles ne suffisent pas.
Il interprète aussi MathML, ce qui permet d'introduire des expressions mathématiques dans les documents, ainsi que SVG.

C'est vraiment un bel outil permettant de réaliser des documents de haut niveau de mise en page. Je le recommande vivement à ceux qui désirent réaliser des documents pdf exigeants à partir de documents xhtml.


Pour revenir au sujet du post, je ne sais pas a priori à quel endroit se fera la coupure de page.

Par exemple, le saut de page peut intervenir n'importe où dans ce petit bout de texte :

<div class="Section">
<h3>Titre de la section</h3>
<p>Court texte introductif composé d'une seule ligne</p>
<ul>
  <li>1er item (1 ligne)</li>
  <li>2ème item (1 ligne)</li>
</ul>
[...]

A un autre endroit, je peux avoir un petit bloc composé différemment. Comment donc utiliser page-break-before:avoid et page-break-after:avoid ?


PS : Je me rends compte a posteriori que le sujet de mon post est mal libellé. Un titre plus juste serait "comment rendre des petits éléments html solidaires ?". En effet, ce n'est pas un problème de veuves ou d'orphelines, et le fait que le texte soit contenu ou non dans un conteneur div ne change rien au problème.

Bah je pensais tout bêtement à:

h3 {page-break-after: avoid;}

Mais je dois avoir mal compris soit la spec, soit ton besoin.

Certes, mais

h3 {page-break-after: avoid;}

permet de s'assurer qu'il n'y a pas de saut de page juste après un titre de niveau 3.

Il faudrait aussi pouvoir écrire

h3 + p[dont le nombre de lignes est inférieur à 2 (ou 3)] {page-break-after: avoid;}

et

h3 + p + ul li[si li 1er ou 2ème item d'une ou deux lignes d'une liste comprenant plusieurs items] {page-break-after: avoid;}

En fait, je pense qu'en dehors de conteneurs div placés préventivement,

div.Termes_solidaires
{page-break-inside: avoid}

le problème posé semble ne pas avoir de solution.