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