Thursday, 10 January 2019

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

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) {}

    }
)



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

No comments:

Post a Comment