Blocs pour éviter les veuves et orphelines

Bonjour à tous !

J'ai remis dernièrement mon CV à jour. Dans l'idée de suivre ce que je fais, je l'ai réalisé sous forme de page web "tout en un" (donc JavaScript et CSS directement dans le code de la page). J'avais fait en sorte qu'à l'impression, ce ne soit pas complètement illisible et mal organisé (donc quelques styles @media print), mais il y avait un truc qui m'a posé problème, et qui me le pose encore. Je l'avais réglé en spécifiant un page-break-before: always sur un élément où je pouvais passer sur une autre page.

Le problème, c'est au niveau de ce page-break-before forcé que ça me gène. A chaque ajout conséquent, je dois donc voir ce qu'il se passe à l'impression, et le déplacer au besoin.
Je me demandais s'il y avait un moyen de définir des blocs qui passent à la page suivante automatiquement, sans que leur contenu ne soit réparti sur plusieurs pages ?

Merci d'avance 

Apparemment, c'est supporté à partir de IE 8 et Fx 19 pour les plus en retard, donc ça devrait le faire.

J'étais passé totalement à côté, merci beaucoup 

Je savais que j'avais bien fait de ne pas signaler le sujet comme résolu 

A un moment, j'ai une structure comme celle-ci dans mon CV :

1
2
3
4
5
6

<section class="experience vcalendar">
    <h2 id="Career">Work experience</h2>
    <div id="…" class="vevent">
        <!-- … -->
    </div>
    <!-- … -->

Le souci que j'ai désormais, c'est que si les blocs .vevent ne sont plus répartis sur plusieurs pages, ils sont orphelins, donc le titre est seul à la fin de la page précédente. Est-ce qu'il y a moyen de faire en sorte qu'il reste avec le premier .vevent sans changer la structure HTML ?
Actuellement, j'ai ce CSS :

1
2
3
4
5
6
7

section>h2 {
    page-break-after: avoid;
}
.half, .section, .vevent, .vcard {
    page-break-inside: avoid;
    page-break-before: avoid;
}

Est-ce que les .vevent d'une <section> remplissent la hauteur d'une page ? Si oui je pense que le problème vient d'un "conflit" entre leur page-break-before: avoid; et le page-break-after: avoid; de <h2>, du coup la logique voudrait qu'on supprime page-break-before: avoid;

Non, les .vevent remplissent une demi-page à tout casser, justement.

On peut voir la page en ligne ?

Je t'envoie le lien par MP, un instant

Ah en fait c'est juste que l'ensemble des règles est trop contraignant du coup le navigateur coupe où il peut. Il faudrait que les instructions de coupure se trouvent sur des éléments de hauteur limitée.

Mmm… J'ose te demander ce que tu as essayé ? Parce que j'aurais envie de mettre des page-break-before: avoid sur les différents blocs .half:first-child, .section:first-child, .vevent:first-child, .vcard:first-child

Edit

Ah, mais c'est inutile ainsi, j'ai les titres avant ce que je souhaiterais cibler 

Coucou,

Alors que je cherchais tout à fait autre chose, je suis tombée (rassurez-vous, je me suis pas faite mal) sur cet article d'Alsacréations sur le média-print qui y fait allusion avec les propriétés "orphans" et "widows"

Ça pourrait peut être répondre à ton besoin

Le problème c'est que ces éléments sont trop hauts, du coup tu ne laisses pas de choix au navigateur qui coupe où il peut. Si tu remplaces ton

1
2
3
4

.half, .section, .vevent, .vcard {
    page-break-inside: avoid;
    page-break-before: avoid;
}

par

1
2
3

.what {
    page-break-inside: avoid;
}

je pense que tu comprendras.

Oui, effectivement. Mais je me rends compte que je gère mal ces blocs .what, je devrais y avoir des séparations dans le HTML entre chaque trucs qui s'y trouvent, et là, ce n'est pas le cas : j'ai stupidement mis des <br /> 

Je modifie pour avoir des "sous-blocs", et je vais regarder avec ces orphans et widows, qui pourraient effectivement m'aider dans ce sens. Appliquées sur les bons blocs et conjointement à des page-break-before: avoid, je pourrais avancer peut-être…

Edit

Cette histoire de sous-blocs m'a permis de mieux répartir mes données, donc le problème n'était pas vraiment dans la mise en page, mais dans la sémantique