Re: [css3-break] fragment selectors

I think Joshua's recommendation of `:orphan` and `:widow` is better naming.

And Florian -- thank you for taking the time to write out a workaround.  I
could see if getting a little crazy to cover the top/bottom with white
since my actual use case has rounded corners on the top/bottom AND
sometimes has a caption box, etc... etc...

What if, instead of `:orphan` and `:widow` targeting the broken element,
they target new pseudo-elements (like `:before` and `:after`) that exist
before and after page breaks?

On Tue, Apr 19, 2016 at 9:11 AM, Florian Rivoal <florian@rivoal.net> wrote:

>
> > On Apr 15, 2016, at 01:55, Matt Haggard <haggardii@gmail.com> wrote:
> >
> > The box-decoration-break property lets me have an element broken across
> pages where the first half of the element lacks a bottom border and the
> last half of the element (on page 2) lacks a top border.  This is a good
> step, but I'd really like to have control over the styling of the fragments
> separately.  Something like:
> >
> > div:breaks-on-to-next-page {
> >   ...
> > }
> > div:breaks-from-prev-page {
> >   ...
> > }
> >
> > (My naming is terrible, yes).  This would let me make the breakage more
> obvious as shown in this image:
> >
> > <scissors.png>
>
> This is an interesting use case, with a good news and a bad news.
>
> The bad news is that you cannot solve this using the kind of pseudo class
> you suggested. Imagine that you write this:
>
> div:breaks-on-to-next-page { width: 1px; height 1px; overflow: hidden; }
>
> Now your element is so small that it no longer breaks onto the next page.
> So the pseudo class no longer applies. So it is no longer small, so it
> breaks onto the next page, so the pseudo class applies... Oops.
>
> This is inherent to the way pseudo classes work, so we cannot have a
> pseudo class which matches or not depending on the result of layout.
>
> The good news is that this use case is solvable with properties already
> specified. It's somewhat non obvious, but it works, assuming the properties
> needed are (properly) implemented of course, which isn't the case today:
>
> * use border-image to draw scissors on the top and bottom edge of the box
>
> * use box-decoration-break:clone to repeat the scissors at the tom and
> bottom edge of each fragment of the box
>
> * use div::before and div::after, which are not repeated on each fragment,
> to hide the scissors at the top of the first fragment and at the bottom of
> the last fragment.
>
> Assuming a long and 10px tall scissors image, that would be something like
> this.
>
> div {
>   border-width: 10px 0;
>   border-style: solid;
>   border-image: url("my-lovely-scissors.png") 10 0 repeat;
>   box-decoration-break: clone;
>   position:relative;
> }
>
> div::before,
> div::after {
>  content: "";
>  position: absolute;
>  left:0; right: 0;
>  height: 10px;
>  background: white;
> }
> div::before { top: -10px; }
> div::after { bottom: -10px; }
>
> > (Did I send this to the right place?)
>
> Yes, this is the One True Place to propose and discussion changes to the
> css language
>
> Cheers,
> Florian