Разрывы страниц

В следующих разделах описана модель форматирования страницы, используемая в CSS2. Для указания агенту пользователя места, где он может или должен осуществить разрыв страницы, и страницы (левой или правой), на которой он должен продолжить вывод содержимого, используется пять различных свойств. Каждый разрыв страницы прерывает отображение содержимого в текущем страничном блоке и инициирует вывод оставшейся части дерева документа в новом страничном блоке.

Разрывы до и после элементов: "page-break-before", "page-break-after", "page-break-inside" "page-break-before"

Начальное значение: auto
Наследование: нет
Процентное задание: N/A

"page-break-after"

Значение: auto | always | avoid | left | right | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

"page-break-inside"

Значение: avoid | auto | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Значения данных свойств имеют следующий смысл:

auto

Не инициирует и не запрещает разрыва страницы до (после или внутри) генерируемого блока.

always

Всегда инициирует разрыв страницы до (после) генерируемого блока.

avoid

Отменяет разрыв страницы до (после или внутри) генерируемого блока.

left

Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как левая страница.

right

Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как правая страница.

Потенциально возможное местоположение разрыва страницы определяется свойством "page-break-inside" родительского элемента, свойством "page-break-after" предшествующего элемента и свойством "page-break-before" последующего элемента. Если значения этих свойств отличны от "auto", то значения "always", "left" и "right" превосходят по приоритету значение "avoid". В разделе о допустимых разрывах страниц указаны четкие правила, позволяющие инициировать или запрещать разрывы страниц с помощью этих свойств.

Использование именованных страниц: "page" "page"

Значение: | auto
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Свойство "page" может использоваться для определения конкретного типа страницы, на которой будет отображен элемент.

В этом примере все таблицы будут помещены по правую сторону страницы (называемой "rotated"), имеющей альбомную ориентацию:

TABLE {page: rotated; page-break-before: right}

Действие свойства "page" осуществляется следующим образом: если значение свойства "page" страничного блока, содержимое которого принадлежит строковому уровню, отличается от значения аналогичного свойства предшествующего страничного блока, содержимое которого также принадлежит строковому уровню, то между ними вставляется один или два разрыва страницы, после которых вывод производится в именованном страничном блоке. См. ниже раздел о принудительных разрывах страниц.

В следующем примере две таблицы отображаются на страницах с альбомной ориентацией (естественно, на одной и той же странице, если они обе умещаются на ней), тип страницы "narrow" не используется вообще, несмотря на то, что он установлен для элемента DIV.

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}

используются в документе

...
...

Разрывы страниц внутри элементов: "orphans", "widows" "orphans"

Значение: | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

"widows"

Значение: | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Свойство "orphans" определяет минимальное количество строк абзаца, которые должны быть оставлены в нижней части страницы. Свойство "widows" определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы. Примеры использования данных свойств для управления разрывами страниц приводятся ниже.

Подробную информацию о форматировании абзацев можно получить в разделе о линейных блоках.

Допустимые разрывы страниц

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

В пространстве, отведенном для вертикальных полей между структурными блоками. Если разрыв страницы осуществляется в этом месте, то вычисляемые значения соответствующих свойств "margin-top" и "margin-bottom" устанавливаются равными "0".

Между линейными блоками внутри блока структурного уровня.

Разрывы рассматриваемого типа удовлетворяют следующим правилам:

• Правило А: Разрыв (1) разрешен, только если значения свойств "page-break-after" и "page-break-before" всех элементов, порождающих блоки, встречающиеся в месте разрыва, допускают его осуществление, что имеет место тогда, когда по крайней мере одно из них имеет значение "always", "left" или "right", или все они одновременно имеют значение "auto".
• Правило Б: Тем не менее, если все эти свойства имеют значение "auto", а свойство "page-break-inside" ближайшего общего для всех названных элементов предка имеет значение "avoid", то разрыв страницы в этом месте запрещается.
• Правило В: Разрыв страницы (2) разрешен, только если количество линейных блоков между разрывом и началом заключительного структурного блока равно значению свойства "orphans" или превышает его, а количество линейных блоков между разрывом и концом блока равно значению свойства "widows" или превышает его.
• Правило Г: Более того, разрыв страницы (2) разрешен, только если свойство "page-break-inside" имеет значение "auto".

Если приведенные выше правила не позволяют вставить достаточное количество разрывов, то во избежание выхода содержимого за пределы страничного блока правила Б и Г не учитываются, что позволяет создать дополнительные разрывы.

Если и после этого не удается достигнуть достаточного количества разрывов, то для поиска дополнительных точек разрыва не учитываются правила А и В.

Разрывы страницы не могут осуществляться в абсолютно позиционируемых блоках.

Принудительные разрывы страниц

Разрыв страницы должен осуществляться (1), если хотя бы одно из всех свойств "page-break-after" и "page-break-before" элементов, порождающих блоки, встречающиеся в месте разрыва, принимает значение "always", "left" или "right".

Разрыв страницы также должен осуществляться (1), если значения свойства "page" линейных блоков, находящихся непосредственно до и после разрыва, различны.

"Наилучшие" разрывы страниц

Язык CSS2 не определяет, какой именно разрыв страницы из множества допустимых разрывов должен использоваться; CSS2 не запрещает агентам пользователей вставлять разрывы страниц в любом месте или вообще не использовать их. Но в спецификации CSS2 настоятельно рекомендуется, чтобы агенты пользователей соблюдали следующие эвристические правила (до тех пор, пока не окажется, что они иногда противоречат друг другу):

• разрыв страниц должен производиться как можно реже;
• все страницы, которые не заканчиваются принудительным разрывом, должны быть примерно одинаковой высоты;
• не должно быть разрывов внутри блока, у которого есть граница;
• не должно быть разрывов внутри таблицы;
• не должно быть разрывов внутри перемещаемого объекта.

Предположим, что таблица стилей содержит свойства "orphans: 4" и "widows: 2", а в нижней части текущей страницы доступно 20 строк (линейных блоков):

• если последний абзац текущей страницы содержит не более 20 строк, то он должен остаться на текущей странице;
• если абзац содержит 21 или 22 строки, а вторая часть абзаца не должна нарушать ограничения, устанавливаемого свойством "widows", то в силу этого его вторая часть должна состоять из двух строк;
• если в абзаце более 23 строк, то первая его часть должна состоять из 20 строк, а вторая часть должна включать все остальные строки.

Теперь предположим, что значение свойства "orphans" равно "10", значение свойства "widows" равно "20", а в нижней части текущей страницы доступно 8 строк:

• если абзац в конце текущей страницы содержит не более 8 строк, то он должен остаться на текущей странице;
• если абзац содержит более 9 строк, то его нельзя делить (т.к. при этом будет нарушено ограничение, устанавливаемое свойством "orphans"). Поэтому его следует переместить на следующую страницу в виде блока.

Как справляться с разрывами страниц при печати большой таблицы HTML (8)

У меня есть проект, который требует печати таблицы HTML со многими строками.

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

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

Используйте эти свойства CSS:

Page-break-after page-break-before

Например:

@media print { table {page-break-after:always} } ....

Ни один из ответов здесь не работал для меня в Chrome. AAverin на GitHub создал для этого полезный Javascript, и это сработало для меня:

Просто добавьте js к вашему коду и добавьте класс splitForPrint в таблицу, и он аккуратно разделит таблицу на несколько страниц и добавит заголовок таблицы на каждую страницу.

Примечание: при использовании разрыва страницы: всегда для тега он создает разрыв страницы после последнего бита таблицы, каждый раз создавая абсолютно пустую страницу! Чтобы исправить это, просто измените его на page-break-after: auto. Он сломается правильно и не создаст лишнюю пустую страницу.

@media print { table { page-break-after:auto } tr { page-break-inside:avoid; page-break-after:auto } td { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group } tfoot { display:table-footer-group } } ....

Принятый ответ не работал для меня во всех браузерах, но после того, как css действительно работал для меня:

Tr { display: table-row-group; page-break-inside:avoid; page-break-after:auto; }

Структура html была:

...

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

Из-за проблем с заголовком я в конечном итоге закончил:

#theTable td * { page-break-inside:avoid; }

Это не помешало рядам сломаться; только содержимое каждой ячейки.

Я закончил с подходом @ vicenteherrera, с некоторыми настройками (которые, возможно, являются бутстрапом 3).

В принципе; мы не можем сломать tr s или td s, потому что они не являются элементами уровня блока. Поэтому мы вставляем div s в каждый и применяем наши правила page-break-* для div . Во-вторых, мы добавляем некоторые дополнения к вершине каждого из этих divs, чтобы компенсировать любые артефакты стиля.

@media print { /* avoid cutting tr"s in half */ th div, td div { margin-top:-8px; padding-top:8px; page-break-inside:avoid; } } $(document).ready(function(){ // Wrap each tr and td"s content within a div // (todo: add logic so we only do this when printing) $("table tbody th, table tbody td").wrapInner(""); })

Поправки и корректировки дополнений были необходимы, чтобы компенсировать какой-то джиттер, который вводился (по моему предположению - из бутстрапа). Я не уверен, что я представляю новое решение из других ответов на этот вопрос, но, возможно, это поможет кому-то.

Я недавно решил эту проблему с хорошим решением.

AvoidBreak { border: 2px solid; page-break-inside:avoid; }

Function Print(){ $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") }); $(".tableToPrint tr").wrap(""); window.print(); }

Работает как шарм!

Я проверил множество решений, и никто не работал хорошо.

Поэтому я попробовал небольшой трюк, и он работает:

tfoot со стилем: position: fixed; bottom: 0px; position: fixed; bottom: 0px; помещается внизу последней страницы, но если нижний колонтитул слишком высок, он перекрывается содержимым таблицы.

tfoot только с: display: table-footer-group; не перекрывается, но не находится в нижней части последней страницы...

Положим два tfoot:

TFOOT.placer { display: table-footer-group; height: 130px; } TFOOT.contenter { display: table-footer-group; position: fixed; bottom: 0px; height: 130px; } your long text or high image here

Один резервирует место на не последних страницах, второй - в вашем личном нижнем колонтитуле.

Test table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } thead { display:table-header-group } tfoot { display:table-footer-group }

heading

notes

x

x

x

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

Основное внимание в ходе веб-разработки приковано к электронным версиям сайтов. Страницы приходится проверять во множестве браузеров, испытывать на разных размерах окон… До принтеров ли тут. А может, я забыл о стилях для печати потому что сам редко делаю бумажные копии страниц. Как бы там ни было, я почувствовал, что ситуацию надо срочно исправлять.

Печатный вариант веб-страницы имеет такое же право на существование, как и электронный. И, если мы стремимся к тому, чтобы сделать наши материалы как можно доступнее, не стоит пренебрегать бумажными носителями информации. Кроме того, не следует делать предположений о пользователях и об их поведении. Люди всё ещё распечатывают веб-страницы на принтерах. Просто представьте себе статьи или посты в блогах, страницы с рецептами, контактными сведениями, схемами проезда или со списками объявлений. Рано или поздно кто-нибудь непременно попытается распечатать что-то из того, что вы разместили в интернете.

Вот что говорит по этому поводу Хейдон Пикеринг, автор книги «Inclusive Design Patterns»: «Я уже давно не пользуюсь домашними принтерами. Дело тут в том, что у меня возникает ощущение, будто они ломаются минут через десять после того, как запустишь печать. Но я – не все».

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

1. Использование CSS-стилей для печати Лучший способ подключить к странице стили для печати – это объявить правило @media в вашем основном CSS-файле.

Body { font-size: 18px; } @media print { /* здесь будут стили для печати */ body { font-size: 28px; } }
Как вариант, можно вынести стили для печати в самостоятельный файл и подключить его в HTML, но при таком подходе понадобится дополнительный запрос при загрузке страницы.

2. Тестирование Как оценить внешний вид веб-страницы, подготовленной для печати? Любому ясно, что выводить её на бумагу после каждого изменения стиля – не лучшее решение. К счастью, возможностей браузеров вполне достаточно для «безбумажной» проверки печатных вариантов страниц.

В зависимости от браузера, можно экспортировать страницу в PDF, воспользоваться функцией предварительного просмотра или даже отлаживать страницу прямо в веб-обозревателе.

Для отладки стилей печати в Firefox, откройте Панель разработчика , воспользовавшись комбинацией клавиш Shift + F2 или выполнив команду меню Разработка → Панель разработки . Введите в командной строке, расположенной в нижней части окна, следующее: media emulate print , завершив ввод нажатием Enter . Активная вкладка будет действовать так, если бы для неё media type было бы print , до тех пор, пока вы не закроете или не обновите страницу.

Эмуляция печати в Firefox

В Chrome тоже имеется подобная возможность. Откройте Инструменты разработчика , для чего, в MacOS, можно воспользоваться комбинацией клавиш CMD + Opt + I , в Windows – Ctrl + Shift + I , или выполните команду меню Дополнительные инструменты → Инструменты разработчика . После этого откройте панель рендеринга. Один из способов сделать это заключается в том, чтобы, нажав на клавишу Esc , вывести панель Console , а затем, через меню, открыть панель Rendering . В панели рендеринга установите флаг Emulate CSS Media и выберите Print .

Эмуляция печати в Chrome

Ещё о тестировании печатных версий веб-страниц можно почитать на StackOverflow .

3. Абсолютные единицы измерения Абсолютные единицы измерения не очень подходят для экранных вариантов страниц, но для печати они – это как раз то, что нужно. В стилях для печати совершенно безопасно, более того – рекомендовано использовать абсолютные единицы измерения , наподобие cm , mm , in , pt , или pc .

Section { margin-bottom: 2cm; }

4. Свойства страниц Для управления свойствами страниц, вроде их размеров, ориентации и полей, можно использовать правило @page . Это оказывается очень кстати, скажем, когда надо, чтобы у всех печатных страниц были одинаковые поля.

@media print { @page { margin: 1cm; } }
Правило @page – это часть стандарта Paged Media Module , который предлагает множество замечательных вещей, вроде выбора первой страницы для печати, настройки пустых страниц, позиционирования элементов в углах страницы и . Его можно использовать даже для того, чтобы готовить к печати книги .

5. Управление разрывами страниц Так как печатные листы, в отличие от веб-страниц, не бесконечны, содержимое веб-страниц рано или поздно обрывается на одном листе бумаги и продолжается на следующем. Для управления разрывами страниц имеется пять свойств.▍Разрыв страницы перед элементом Если нужно, чтобы некий элемент всегда находился в начале страницы, можно поставить перед ним принудительный разрыв страницы с помощью свойства page-break-before .

Section { page-break-before: always; }

▍Разрыв страницы после элемента Свойство page-break-after позволяет задать принудительный разрыв страницы после элемента. С помощью этого свойства можно и запретить разрыв.

H2 { page-break-after: always; }

▍Разрыв страницы внутри элемента Свойство page-break-inside окажется очень кстати, если нужно избежать разделения некоего элемента между двумя страницами.

Ul { page-break-inside: avoid; }

▍Верхние и нижние висячие строки Иногда в принудительном разрыве страниц нет нужды, но требуется управлять выводом абзацев на границах страниц.

Например, если последняя строка абзаца на текущей странице не помещается, на следующей странице будут напечатаны последние две строки этого абзаца. Это происходит из-за того, что свойство, которое это контролирует (widows , то есть – «верхние висячие строки») по умолчанию установлено в значение 2. Это можно изменить.

P { widows: 4; }
Если возникла другая ситуация и лишь одна строка абзаца помещается на текущей странице, весь абзац будет напечатан на следующей странице. Свойство, ответственное за нижние висячие строки (orphans), по умолчанию так же установлено в 2.

P { orphans: 3; }
Смысл вышеприведённого кода заключается в том, что для того, чтобы абзац не переносился целиком на следующую страницу, как минимум три строки должны поместиться на текущей странице.

Для того, чтобы лучше в этом разобраться, взгляните на пример, подготовленный с помощью CodePen . А вот – отладочная версия того же примера, её удобнее тестировать.

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
Кстати, CSS-стили для печати – одно из немногих исключений, где директива!important – это абсолютно нормально;)

7. Удаление ненужного контента Для того, чтобы впустую не тратить чернила, следует убирать из печатного варианта страницы всё ненужное, вроде огромных красивых слайдов, рекламы, средств навигации по сайту и прочего подобного. Сделать это можно с помощью установки свойства display в значение none у ненужных элементов. Вполне возможно, что вы сочтёте правильным показать лишь основное содержимое страницы, а всё остальное – скрыть:

Body > *:not(main) { display: none; }

8. Вывод адресов ссылок Ссылки, в том виде, в котором они обычно присутствуют на веб-страницах, при печати совершенно бесполезны, если только читателю бумажной версии документа не известно, куда они ведут.

Для того, чтобы вывести адреса ссылок после их текстовых представлений, достаточно воспользоваться следующим стилем:

A:after { content: " (" attr(href) ")"; }
Конечно, при таком подходе «расшифровано» будет много лишнего. Например, относительные ссылки, абсолютные ссылки на том же сайте, где размещена печатаемая страница, ссылки с якорями и так далее. Для того, чтобы не засорять печатную страницу, лучше будет использовать примерно такую конструкцию:

A:not():after { content: " (" attr(href) ")"; }
Выглядит это, конечно, безумно. Поэтому объясню смысл данного правила обычным языком: «Отобразить значение атрибута href около каждой ссылки, у которой есть такой атрибут, который начинается с http , но не содержит mywebsite.com ».

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

Abbr:after { content: " (" attr(title) ")"; }

10. Принудительная печать фона Обычно браузеры, формируя страницу для печати, не выводят фоновый цвет и фоновые изображения, если им это явно не указать. Однако, иногда всё это печатать надо. Здесь нам поможет нестандартизированное свойство print-color-adjust , которое позволяет переопределить, для некоторых браузеров, настройки по умолчанию.

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

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

@media screen and (min-width: 48em) { /* только для экрана */ }
Почему это так? Всё дело в том, что CSS-правила применяются только в том случае, если значение min-width равно 48em , и если media-type – это screen . Если избавиться в этом медиа-запросе от ключевого слова screen , то он окажется ограниченным лишь значением min-width .

@media (min-width: 48em) { /* все типы средств отображения информации */ }

12. Распечатка карт Текущие версии Firefox и Chrome умеют выводить на печать карты, но, например, Safari этого не может. Как же быть при печати карт? Один из универсальных вариантов – использовать, вместо динамических, статические карты .

Map { width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true"); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коды Вывод на печать QR-кодов, содержащих важные ссылки, может значительно повысить удобство работы с бумажными версиями веб-страниц. Вот материал в The Smashing Magazine, где можно найти полезные советы на эту тему. Один из них заключается в том, чтобы включать в печатные страницы их адреса в виде QR-кодов. В результате пользователю, для того чтобы открыть в браузере страницу, с которой была сделана распечатка, не придётся набирать на клавиатуре её полный адрес.14. О печати неоптимизированных страниц Занимаясь темой печати веб-страниц, я обнаружил отличный инструмент, который позволяет удобно готовить к выводу на принтер неоптимизированные страницы. С помощью Printliminator

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

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

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

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

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

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

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

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

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

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

Чтобы это сделать, мы используем свойство page-break-after и зададим ему значение always , чтобы заставить следующий элемент перейти на следующую страницу.

Page-break { page-break-after : always ; }

Затем вы можете создать между элементов новый элемент с классом, или назначить класс предыдущему элементу таким образом.

With the Eraser feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t.

The phone to travel With

S Translator is going to be a great tool for your travels as ...

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

Верхние и нижние висячие строки

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

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

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

P { orphans : 3 ; widows : 3 ; }

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

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

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