W3C home > Mailing lists > Public > www-style@w3.org > April 2016

Re: [css3-break] fragment selectors

From: Florian Rivoal <florian@rivoal.net>
Date: Wed, 20 Apr 2016 00:11:46 +0900
Cc: CSS WG <www-style@w3.org>, Lea Verou <lea@verou.me>
Message-Id: <EDA39452-5BA5-48A2-9171-0730156DC14F@rivoal.net>
To: Matt Haggard <haggardii@gmail.com>

> 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
Received on Tuesday, 19 April 2016 15:12:12 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:02 UTC