Разрыв страницы в html-документе

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

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

<div style="page-break-before:always;">
СТРАНИЦА 2
</div>

Стиль «page-break-before» определяет разрыв перед страницей, поэтому перед второй страницей лента разрывалась, ну а в конце по завершении печати по настройкам самого принтера выполняется разрыв. Также можно указать что разрыв должен выполняться после страницы: «page-break-after» или «page-break-inside» внутри страницы.

Опишу значения:
always (всегда добавляет разрыв страницы)
auto (автоматически добавляет разрыв страницы если он требуется)
avoid (запрещает разрыв страницы)
left (пропускает одну или две страницы, чтобы следующая страница при печати была четной)
right (пропускает одну или две страницы, чтобы следующая страница при печати была нечетной)
inherit (наследует значение)

Стиль разрыва страницы можно указывать например в таблице:

<table style="page-break-after:always">
</table>

Либо в CSS:

table { page-break-after:always; }

Создание простого HTML шаблона

Приведу пример простого HTML шаблона.

Элемент указывающий тип документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Начало документа:

<HTML>

Начало заголовка документа:

<HEAD>

Указание языка документа, кодировки:

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="Краткое описание страницы">
<META NAME="Keywords" content="Ключевые слова через запятую">

Язык таблицы стилей CSS:

<META http-equiv="Content-Style-Type" content="text/css">

Начало описания стилей:

<STYLE type="text/css">

Цвет ссылок:

A:link {COLOR: green; TEXT-DECORATION: none}

Цвет посещенных ссылок:

A:visited {COLOR: red; TEXT-DECORATION: none}

Цвет ссылки при клике по ней:

A:active {COLOR: orange; TEXT-DECORATION: none}

Цвет ссылки при наведении на нее

A:hover {COLOR: black; TEXT-DECORATION: underline}

Цвет фона документа, параметры шрифта по умолчанию

BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 10pt}

Окончание таблицы стилей:

</STYLE>
<TITLE>Название документа</TITLE>

Конец заголовка:

</HEAD>

Начало тела документа:

<BODY>

Текст документа ….

Конец тела документа:

</BODY>

Последний тег обозначающий конец документа:

</HTML>

Также с помощью сторонних сервисов, например csstemplater.com можно генерировать готовые шаблоны.