[css-gcpm][css-break][css-pseudo] Generated content at page breaks

I work at a publisher that uses CSS Paged Media to produce print
books, and one use case that comes up occasionally (depending on the
book design) is the ability to insert generated content at the
location of page breaks. For example, we'll have a sidebar with a
border drawn around it whose content spans a pagebreak, e.g:

  <h6>Lorem Ipsum</h6>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat....</p>
  <p>Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica...</p>

aside {
  border: 3px solid red;

And what we'll want to do is split it into two separate boxes at the
page break, and in the bottom-right corner of the box that precedes
the page break, add text like "(continued on next page)".

The latest draft of CSS Fragmentation includes the
box-decoration-break property, which supports splitting the box into
two boxes, e.g.:

aside {
  border: 3px solid green;
  box-decoration-break: clone;

But I'm not aware of any existing draft specifications (or discussions
on this list) for adding generated content at the location of a page
break. The closest thing I could find is "Conditional content" in the
(https://books.spec.whatwg.org/#conditional-content), which cites the
following example:

 .tb:before { content: "***"; condition: at-page-break; margin: 1em 0;
text-align: center;  }
 .tb:after  { content: "\a\a\a"; condition: not-at-page-break }

  <div class=tb></div>

However, that doesn't really meet the needs of my use case, as it's
tied to the ::before and ::after pseudoelements, and to employ it for
controlling generated content within the sidebar, I'd need to do
something like add placeholder <div class=tb></div> elements between
each <p> in my <aside>, which is not ideal.

One idea for an alternative specification for doing generated content
at pagebreaks *within* an element might be to introduce a couple of
new pseudoelements for accessing the locations preceding and following
a page break--e.g., ::page-break-before and ::page-break-after. This
would make it theoretically possible to do the following:
aside::page-break-before {
  content: "(continued on next page)";
  text-align: right;

The selector would apply to any page-break locations within aside
elements, and would instruct the UA to insert the text "(continued on
next page)" before the break (I'm assuming a default of "display:

Similarly, you could generate content after the break that repeats the
sidebar title (which is also a use case that comes up in print
publishing) as follows:

aside h6 {
  string-set: SidebarTitle content(text);

aside::page-break-after {
  content: string(SidebarTitle) " (continued)"
  font-weight: bold;

Would be interested in hearing others' feedback on whether this sounds


Received on Wednesday, 8 April 2015 17:01:11 UTC