Six CSS Layout Features To Look Forward To - CSS Essentials - page 257

Here, @media paged indicates that the browser understands paged media
and that all of the selectors specified for it should have their styles applied
when paged media is supported. Then, you indicate which selector you
want to be paged (in the above example, the selector is the html element
itself) by specifying the property overflow-style: paged-x. This will
simply make the content paged; if you want paged controls to be visible,
you need to specify overflow-style: paged-x-controls .
The properties break-before, break-after break-inside can be
used to control where the content falls within the pages. For example, if you
want headings to only appear with their corresponding content and never at
the end of the page or standing alone, you can specify that:
h3, h2 {
break-after: avoid;
}
This ensures that if a heading occurs on the last line of a page, it will be
pushed to the next page with the content that it introduces.
API
Two properties are available on an element whose content is paged:
currentPage and pageCount . You can set the currentPage property
via JavaScript, which would trigger a page change on that element. This
would then trigger an onpagechange event on that element, which you
could use to run other scripts that are required when the page changes. The
pageCount property stores the total number of pages in the paged
element. These properties are useful for implementing callbacks that should
be triggered on page change; for example, to render notes for a particular
slide in a slide deck.