Уже много лет у нас есть возможность оформлять текст на веб-страницах, предназначенный для печати. Это можно сделать при помощи правила @media в таблицах стилей следующим образом:
@media print {
/* Style rules */
}
Есть несколько свойств, которые позволяют нам форматировать наш веб-контент, подготавливая его к печати, и сегодня мы с вами обсудим один из них: page-break.
Что делает это правило?
Если вы когда-нибудь работали с текстовыми процессорами Microsoft Word и Pages, то меню Page Break вам покажется знакомым. Это правило позволяет вам разбивать контент на страницы.
Читать текст гораздо удобнее, если в нем не встречается случайных «забытых» заголовков на страницах в то время, как контент, относящийся к этим заголовкам, находится уже на следующей странице.
Использование
Чтобы реализовать это, мы можем использовать свойство page-break-after и установить значение на “always”, чтобы каждый последующий элемент принудительно переносился на следующую страницу.
.page-break {
page-break-after: always;
}
Затем, вы можете либо создать новый элемент с классом между элементами, либо задать класс в предшествующем элементе следующим образом:
<p class="page-break">With the <strong>Eraser</strong> feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t. </p>
<h3>The phone to travel With</h3>
<p><strong>S Translator </strong>is going to be a great tool for your travels as ... </p>
Теперь вы можете видеть, что заголовок переносится на следующую страницу:
Висячие строки
Вышеприведенный метод может показаться утомительным, если у вас большой объем контента. Так что, вместо того, чтобы принудительно преломлять контент, возможно стоит указать минимальный промежуток для висячих строк.
В шрифтах висячие строки – это немного не подходящие названия, которые используются для обозначения слов и коротких строк, которые как бы отрываются от остального контента, и попадают на другую строку.
Используя свойства “orphans” и “widows”, мы можем указать промежуток. В представленном примере кода мы можем указать, чтобы либо в самом низу, либо вначале каждого абзаца, где преломляется страница, оставалось 3 строки.
p {
orphans: 3;
widows: 3;
}
Подводя итог
Сегодня мы обсудили с вами базовое применение page break для печати вашего контента на бумагу, и надеемся, что это мотивирует вас использовать стилизацию печатного текста на вашем сайте.