Is there a column break in my paragraph? How many lines in is it?

Question

CSS has a concept of widows and orphans, so the browser has a way of knowing how many lines cross the column (or, if printing, page) boundary.

Is there a way to know this in JavaScript?

It could be done in a very unpleasant & brittle way using the geometry of the elements, but this seems like a pretty undesirable outcome.

For example: https://codepen.io/notionparallax/pen/BvLZeB

document.querySelectorAll("p, h1, h2, h3, h4, h5").forEach(
    (x) => {

      let boxW    = Math.round(x.getBoundingClientRect().width);
      let clientW = Math.round(x.clientWidth);
      if (boxW !== clientW) {
        console.log(x);
        x.classList.add("has-break");
      }

      try {
        if (x.nextElementSibling.offsetLeft !== x.offsetLeft) {
          console.log(x);
          x.classList.add("end-of-column");
        }
      } catch(error) {}

    }
)

In a library like Paged.js they have a concept of a break token that indicates where in the element the break occurs (if indeed there is a break). I'd imagine that this is the kind of thing that might be made possible by Houdini eventually. I'm interested to see if there's way of interrogating an element to see if it wraps to the next page/column, using conventional methods.

Use case

I want to know where the element breaks so that I can see if I ought to walk back up the DOM an put a break in ahead of the preceding header. This is partially handled by widows and orphans for the element itself, but I'd like to be able to have a finer grain of control so that—for instance—a chapter doesn't start right at the bottom of a page. I'd be fine with two lines of a paragraph between two paragraphs, but a paragraph that follows a heading should get a bit more breathing room.

Update

I'm not interested in solutions to the use case, I'm interested in answers to the question in the title. The use case illustrates one possible application of the information that I'm interested in, not the sole reason for the question.

Answer 1

You can add page-break-before: always; to a tag, this will set a page break before the tag. For example, adding this CSS to h1 will create a new page before each h1 title

h1 {
  page-break-before: always;
}

<div>
  <h1>Page 1</h1>
  <p>content here</p>
  <h1>Page 2</h1>
  <p>content here</p>
</div>

UPDATE

It sounds like you want to find a way to identify, not set a printing page break, but note that the page size can vary, the scale and also the printing margins can be changed which obviously affect the page's content and the page break location. You don't have a way to find the page break in a generic way.

UPDATE 2

Each browser implements its own logic of how to divide the pages. For example, I tried to print this page from Chrome, Firefox and IE. There is a few line difference between them, and I didn't set anything, just used the default settings

Chrome:

Firefox:

IE: