Сайт Романа ПарпалакаБлог20230211

Запрет висячих заголовков в CSS

11 февраля 2023 года, 00:38

Пару лет назад я сделал стили для печати в своем редакторе математических текстов Upmath. Тогда же я отмечал проблемы подхода, в частности, «висячие заголовки». Не уверен, что такой термин существует, под ним я имею в виду заголовок, расположенный последним на странице и оторванный от следующего текста.

В CSS есть свойства, которые управляют запретом на разбиение страниц. Но мне так и не удалось заставить их работать. Я предположил, что это баг в браузерах, и добавил в трекер периодически всплывающую задачу «проверить запрет разбиения страницы после заголовка». Наконец, сегодня проверка показала, что в Хроме свойства заработали!

Есть два варианта синтаксиса, сейчас работают оба:

h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
}

Результат применения выглядит так (было — стало):

Проверил еще Firefox, в нем запрет разбиения не заработал. А больше браузеров-то и не осталось.

Поделиться

Cистема рекомендаций на сайте Ctrl Как разработать систему рекомендаций

Читайте также

Переносы в вебе
В черновике CSS 3 для переносов строк есть свойство hyphens.
2012
О браузерах
В ходе разработки системы редактирования записей в блоге обнаружил, что она работает заметно быстрее в Firefox, чем в Опере. Меня это удивило, ведь есть расхожее мнение, что Опера — самый быстрый браузер.
2007

Оставьте свой комментарий


Формулы на латехе: $$f(x) = x^2-\sqrt{x}$$ превратится в $$f(x) = x^2-\sqrt{x}$$.
Выделение текста: [i]курсивом[/i] или [b]жирным[/b].
Цитату оформляйте так: [q = имя автора]цитата[/q] или [q]еще цитата[/q].
Других команд или HTML-тегов здесь нет.

Записи