Хотя мы живем в цифровую эпоху, где все может быть легко доступно, все еще есть много людей, которые предпочитают читать длинный текст с бумаги. Есть вероятность, что часть пользователей распечатает текст с вашего сайта, чтобы читать его не за компьютером.

Возможность приведения содержимого в вид, подходящий для печати, существовала давно. Мы можем сделать это, используя правило @media в таблице стилей, следующим образом:

@media print { 
    /* Правила стиля */
}

Есть несколько свойств, позволяющих оформить содержимое веб-страницы для приведения  в вид, подходящий для печати, и мы расскажем об одном из них: разрыве страницы.

Что оно делает? 

Если вы работали с текстовыми редакторами, такими как Microsoft Word и Pages, вам должно быть знакомо меню разрыва страницы, которое позволяет перенести текст на следующую страницу.

Этот модуль делает то же самое, позволяя управлять тем, как будет переносится содержимое веб-страницы, страница за страницей.

Использование разрыва страницы 

Для примера мы создали демонстрационную страницу, которую собираемся распечатать. Мы нашли на ней неудачный перенос, как вы можете видеть ниже.

Будет лучше выглядеть, если заголовок и нижняя висячая строка начнутся на следующей странице.

Чтобы это сделать, мы используем свойство 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 (верхняя висячая строка) мы можем задать минимальный порог. В приведенном ниже примере мы задаем, чтобы как минимум три строки остались внизу или в начале абзаца, где происходит разрыв страницы.

p {
    orphans: 3;
    widows: 3;
} 

Дополнительные источники 

Мы рассмотрели основы использования разрыва страницы на печати для текстов на сайте, и мы надеемся, что это вдохновит вас обдумать стили для печати вашего сайта, чтобы содержимое хорошо выглядело как на экране, так и на бумаге.

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

• Создание измельчителя бумаги с кнопкой удаления при помощи CSS3
• Создание эффектов загрузки страницы
• Создание анимированной гистограммы с использованием CSS3