В CSS есть концепция вдов и сирот, поэтому в браузере есть способ узнать, сколько строк пересекают границу столбца (или, если печатается, страницы).
Есть ли способ узнать это в JavaScript?
Это может быть сделано очень неприятным и хрупким способом с использованием геометрии элементов, но это кажется довольно нежелательным результатом.
Например: 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) {}
}
)
В библиотеке, такой как Paged.js, есть концепция токена разрыва, который указывает, где в элементе происходит разрыв (если действительно есть разрыв). Я полагаю, что такого рода вещи могли бы стать возможными благодаря Гудини. Мне интересно посмотреть, есть ли способ опроса элемента, чтобы увидеть, переносится ли он на следующую страницу/столбец, используя обычные методы.
Случай использования
Я хочу знать, где происходит разрыв элемента, чтобы я мог увидеть, должен ли я вернуться к DOM и поставить разрыв перед предшествующим заголовком. Это частично обрабатывается вдовами и сиротами для самого элемента, но я хотел бы иметь возможность иметь более тонкое управление, чтобы, например, глава не начиналась прямо внизу страницы. Я бы согласился с двумя строками абзаца между двумя абзацами, но абзац, следующий за заголовком, должен получить немного больше передышки.
Обновить
Меня не интересуют решения для варианта использования, меня интересуют ответы на вопрос в заголовке. Вариант использования иллюстрирует одно из возможных применений интересующей меня информации, а не единственную причину вопроса.