—»     —»   Используем CSS3 Page Break для организации страницы для печати
  Раздел: Подсказки   Нет комментариев  

Используем CSS3 Page Break для организации страницы для печати

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

Используем CSS3 Page Break для организации страницы для печати

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

@media print {
/* Style rules */
}

Есть несколько свойств, которые позволяют нам форматировать наш веб-контент, подготавливая его к печати, и сегодня мы с вами обсудим один из них: page-break.

Что делает это правило?

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

Используем CSS3 Page Break для организации страницы для печати

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

Использование

Используем CSS3 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>

Теперь вы можете видеть, что заголовок переносится на следующую страницу:

Используем CSS3 Page Break для организации страницы для печати

Висячие строки

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

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

Используя свойства “orphans” и “widows”, мы можем указать промежуток. В представленном примере кода мы можем указать, чтобы либо в самом низу, либо вначале каждого абзаца, где преломляется страница, оставалось 3 строки.

p {
orphans: 3;
widows: 3;
}

Подводя итог

Сегодня мы обсудили с вами базовое применение page break для печати вашего контента на бумагу, и надеемся, что это мотивирует вас использовать стилизацию печатного текста на вашем сайте.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4850   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031