Какой тег будет загружать стили для принтера

Обновлено: 02.07.2024

Таблицы стилей представляют собой большой прорыв для дизайнеров веб-страниц, расширяя их возможности по улучшению внешнего вида своих страниц. В научной среде, в которой был задуман Интернет, люди больше озабочены содержанием своих документов, чем их представлением. Когда люди из более широких слоев общества открыли для себя Интернет, ограничения HTML стали источником постоянного разочарования, и авторы были вынуждены обходить стилистические ограничения HTML. Хотя намерения были хорошими — улучшить представление веб-страниц — методы для этого имели неприятные побочные эффекты. Эти техники работают для некоторых людей некоторое время, но не для всех людей все время. К ним относятся:

• Использование проприетарных расширений HTML
• Преобразование текста в изображения
• Использование изображений для управления пустым пространством
• Использование таблиц для макета страницы
• Написание программы вместо использования HTML

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

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

Например, следующая короткая таблица стилей CSS (хранящаяся в файле special.css) задает зеленый цвет текста абзаца и окружает его сплошной красной рамкой:

Авторы могут связать эту таблицу стилей со своим исходным HTML-документом с помощью элемента LINK:

HTML 4 обеспечивает поддержку следующих функций таблиц стилей:

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

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

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

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

14.2 Добавление стиля в HTML

Примечание. Образец таблицы стилей по умолчанию для HTML 4, включенный в [CSS2], содержит общепринятую информацию о стиле по умолчанию для каждого элемента. Этот ресурс может оказаться полезным как для авторов, так и для разработчиков.

Документы HTML могут содержать правила таблиц стилей непосредственно в них или они могут импортировать таблицы стилей.

С HTML можно использовать любой язык таблиц стилей. Простого языка таблиц стилей может быть достаточно для нужд большинства пользователей, но другие языки могут больше подходить для узкоспециализированных нужд. В этой спецификации для примера используется язык стилей «Каскадные таблицы стилей» ([CSS1]), сокращенно CSS.

Синтаксис данных стиля зависит от языка таблицы стилей.

14.2.1 Установка языка таблицы стилей по умолчанию

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

Авторы должны использовать элемент META, чтобы установить язык таблицы стилей по умолчанию для документа. Например, чтобы установить по умолчанию CSS, авторы должны поместить следующее объявление в HEAD своих документов:

Пользовательские агенты должны определить язык таблицы стилей по умолчанию для документа в соответствии со следующими шагами (от самого высокого к самому низкому приоритету):

1. Если в каких-либо объявлениях META указан "Content-Style-Type", последний в потоке символов определяет язык таблицы стилей по умолчанию.
2. В противном случае, если какие-либо заголовки HTTP указывают "Content-Style-Type", последний заголовок в потоке символов определяет язык таблицы стилей по умолчанию.
3. В противном случае языком таблицы стилей по умолчанию является "text/css".

Документы, содержащие элементы, задающие атрибут стиля, но не определяющие язык таблицы стилей по умолчанию, неверны. Инструменты разработки должны генерировать информацию о языке таблицы стилей по умолчанию (обычно объявление META), чтобы пользовательские агенты не должны были полагаться на значение по умолчанию "text/css".

14.2.2 Информация о встроенном стиле

style = style [CN] Этот атрибут определяет информацию о стиле для текущего элемента.

Синтаксис значения атрибута стиля определяется языком таблицы стилей по умолчанию. Например, для встроенного стиля [[CSS2]] используйте синтаксис блока объявления, описанный в разделе 4.1.8 (без фигурных скобок-разделителей).

В этом примере CSS задается информация о цвете и размере шрифта для текста в определенном абзаце.

В CSS объявления свойств имеют форму "имя : значение" и разделяются точкой с запятой.

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

14.2.3 Информация о стиле заголовка: элемент STYLE

Начальный тег: обязателен, Конечный тег: обязателен

type = content-type [CI] Этот атрибут указывает язык таблицы стилей содержимого элемента и переопределяет язык таблицы стилей по умолчанию. Язык таблицы стилей указывается как тип содержимого (например, «текст/css»). Авторы должны предоставить значение для этого атрибута; для этого атрибута нет значения по умолчанию. media = media-descriptors [CI] Этот атрибут определяет целевой носитель для информации о стиле. Это может быть один дескриптор носителя или список, разделенный запятыми. Значение по умолчанию для этого атрибута — «экран».

Атрибуты, определенные в другом месте

Элемент STYLE позволяет авторам размещать правила таблиц стилей в заголовке документа. HTML допускает любое количество элементов STYLE в разделе HEAD документа.

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

Синтаксис данных стиля зависит от языка таблицы стилей.

Некоторые реализации таблиц стилей могут допускать большее количество правил в элементе STYLE, чем в атрибуте стиля. Например, в CSS правила могут быть объявлены в элементе STYLE для:

• Все экземпляры определенного элемента HTML (например, все элементы P, все элементы H1 и т. д.)
• Все экземпляры HTML-элемента, принадлежащие определенному классу (т. е. чей атрибут класса имеет определенное значение).
• Отдельные экземпляры HTML-элемента (т. е. чей атрибут id имеет определенное значение).

Правила приоритета и наследования правил стиля зависят от языка таблицы стилей.

Следующее объявление CSS STYLE помещает границу вокруг каждого элемента H1 в документе и центрирует его на странице.

Чтобы указать, что эта информация о стиле должна применяться только к элементам H1 определенного класса, мы изменим ее следующим образом:

Наконец, чтобы ограничить объем информации о стиле одним экземпляром H1, установите атрибут id:

Хотя информация о стиле может быть задана почти для каждого элемента HTML, два элемента, DIV и SPAN , особенно полезны, поскольку они не навязывают никакой семантики представления (кроме блочного или встроенного). В сочетании с таблицами стилей эти элементы позволяют пользователям бесконечно расширять HTML, особенно при использовании с атрибутами class и id.

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

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

14.2.4 Типы носителей

HTML позволяет авторам создавать документы, используя преимущества характеристик носителя, на котором документ должен отображаться (например,, графические дисплеи, телевизионные экраны, портативные устройства, речевые браузеры, тактильные устройства на основе Брайля и т. д.). Указав атрибут media, авторы позволяют пользовательским агентам выборочно загружать и применять таблицы стилей. Ознакомьтесь со списком распознаваемых дескрипторов мультимедиа.

Следующие примеры объявлений применяются к элементам H1. При проецировании на деловой встрече все экземпляры будут синими. При печати все экземпляры будут центрированы.

В этом примере к якорям добавляются звуковые эффекты для использования в речевом выводе:

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

14.3 Внешние таблицы стилей

Авторы могут отделять таблицы стилей от документов HTML. Это дает несколько преимуществ:

• Авторы и менеджеры веб-сайтов могут совместно использовать таблицы стилей для нескольких документов (и сайтов).
• Авторы могут изменять таблицу стилей без внесения изменений в документ.
• Пользовательские агенты могут выборочно загружать таблицы стилей (на основе описаний мультимедиа).

14.3.1 Предпочтительные и альтернативные таблицы стилей

HTML позволяет авторам связывать с документом любое количество внешних таблиц стилей. Язык таблиц стилей определяет, как взаимодействуют несколько внешних таблиц стилей (например, каскадные правила CSS).

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

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

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

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

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

14.3.2 Указание внешних таблиц стилей

Авторы указывают внешние таблицы стилей со следующими атрибутами элемента LINK:

• Задайте в качестве значения href местоположение файла таблицы стилей. Значением href является URI.
• Установите значение атрибута type, чтобы указать язык связанного ресурса (таблица стилей). Это позволяет пользовательскому агенту избежать загрузки таблицы стилей для неподдерживаемого языка таблиц стилей.
• Укажите, что таблица стилей является постоянной, предпочтительной или альтернативной:
  • Чтобы сделать таблицу стилей постоянной, задайте для атрибута rel значение "stylesheet" и не устанавливайте атрибут title.
  • Чтобы сделать таблицу стилей предпочтительной, установите для атрибута rel значение "stylesheet" и назовите таблицу стилей с помощью атрибута title.
  • Чтобы указать альтернативную таблицу стилей, задайте для атрибута rel значение "альтернативная таблица стилей" и назовите таблицу стилей с помощью атрибута title.

  Пользовательские агенты должны предоставлять пользователям средства для просмотра и выбора из списка альтернативных стилей. Значение атрибута title рекомендуется в качестве имени для каждого варианта.

  В этом примере мы сначала указываем постоянную таблицу стилей, расположенную в файле mystyle.css:

  Установка атрибута title делает эту таблицу стилей предпочтительной для автора:

  Добавление ключевого слова "alternate" к атрибуту rel делает его альтернативной таблицей стилей:

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

  Авторы также могут использовать элемент META для установки предпочтительной таблицы стилей документа. Например, чтобы установить предпочтительную таблицу стилей как «компактную» (см. предыдущий пример), авторы могут включить в HEAD следующую строку:

  Если два или более элемента LINK указывают предпочтительную таблицу стилей, приоритет имеет первый.

  14.4 Каскадные таблицы стилей

  Языки таблиц стилей, такие как CSS, позволяют смешивать информацию о стилях из нескольких источников. Однако не все языки таблиц стилей поддерживают каскадирование. Для определения каскада авторы указывают последовательность элементов LINK и/или STYLE.Информация о стиле каскадируется в том порядке, в котором элементы появляются в HEAD .

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

  В следующем примере мы указываем две альтернативные таблицы стилей с именами "compact". Если пользователь выбирает «компактный» стиль, пользовательский агент должен применить обе внешние таблицы стилей, а также постоянную таблицу стилей «common.css». Если пользователь выберет стиль "большой шрифт", будут применены только альтернативная таблица стилей "bigprint.css" и постоянный "common.css".

  Вот пример каскада, в котором участвуют элементы LINK и STYLE.

  14.4.1 Каскады, зависящие от носителя

  Каскад может включать таблицы стилей, применимые к разным носителям. И LINK, и STYLE могут использоваться с атрибутом media. Затем пользовательский агент отвечает за фильтрацию тех таблиц стилей, которые не применяются к текущему носителю.

  В следующем примере мы определяем каскад, в котором "корпоративная" таблица стилей предоставляется в нескольких версиях: одна подходит для печати, одна для использования на экране и одна для речевых браузеров (полезно, например, при чтении электронной почты в машина). Таблица стилей «techreport» применяется ко всем носителям. Правило цвета, определенное элементом STYLE, используется для печати и экрана, но не для звукового рендеринга.

  14.4.2 Наследование и каскадирование

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

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

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

  14.5 Скрытие данных стиля от пользовательских агентов

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

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

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

  В следующем примере слово "compact" применяется по умолчанию, поскольку в нем отсутствует ключевое слово "alternate" для атрибута rel.

  "Кто печатает веб-страницы?" Я слышу, как ты плачешь! Относительно небольшое количество страниц когда-либо будет воспроизведено на бумаге. Но учтите:

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

  К сожалению, печать страниц может быть неприятной:

  • текст может быть слишком маленьким, слишком большим или слишком бледным
  • столбцы могут быть слишком узкими, слишком широкими или выходить за пределы полей страницы
  • разделы могут быть обрезаны или полностью исчезать
  • чернила тратятся на ненужные цветные фоны и изображения
  • URL-адреса ссылок не видны
  • печатаются значки, меню и рекламные объявления, на которые нельзя щелкнуть!

  Многие разработчики выступают за доступность в Интернете, но мало кто помнит о доступности печатной сети!

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

  Печать таблиц стилей

  Печать CSS может быть:

  1. Применяется в дополнение к стилям экрана. Взяв за основу стили экрана, стили принтера при необходимости переопределяют эти значения по умолчанию.
  2. Применяется как отдельный стиль. Стили экрана и печати совершенно разные; оба начинают со стилей браузера по умолчанию.

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

  Таблица стилей для печати может быть добавлена ​​в HTML после стандартной таблицы стилей:

  Стили print.css будут применяться в дополнение к стилям экрана при печати страницы.

  Чтобы разделить экран и печатные носители, main.css должен ориентироваться только на экран:

  Кроме того, стили печати можно включить в существующий файл CSS с помощью правил @media. Например:

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

  Тестирование вывода на принтер

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

  Предварительный просмотр печати

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

  Кроме того, вы можете сохранить или просмотреть страницу, экспортировав ее в PDF.

  Инструменты разработчика

  Инструменты разработчика ( F12 или Cmd/Ctrl + Shift + I ) могут эмулировать стили печати, хотя разрывы страниц отображаться не будут.

  В Chrome откройте Инструменты разработчика и выберите Дополнительные инструменты, а затем Рендеринг в меню с тремя точками в правом верхнем углу. Измените Эмулировать CSS-носитель для печати в нижней части этой панели.

  В Firefox откройте Инструменты разработчика и щелкните значок «Включить моделирование печатных носителей» на панели стилей вкладки «Инспектор»:

  
  

  Взломайте свой медиа-атрибут

  Опять же, это не покажет разрывы страниц. Не забудьте восстановить атрибут media="print" после завершения тестирования.

  Удалить ненужные разделы

  Прежде чем делать что-либо еще, удалите и сверните лишнее содержимое с помощью display: none; . Типичные ненужные разделы на бумаге могут включать меню навигации, основные изображения, верхние и нижние колонтитулы, формы, боковые панели, виджеты социальных сетей и рекламные блоки (обычно все, что находится в iframe):

  Возможно, потребуется использовать display: none !important; если функции CSS или JavaScript отображают элементы в соответствии с определенными состояниями пользовательского интерфейса. Использование !important обычно не рекомендуется, но мы можем оправдать его использование в базовом наборе стилей печати, которые имеют приоритет над настройками экрана по умолчанию.

  Линеаризовать макет

  Мне больно это говорить, но Flexbox и Grid редко хорошо работают с макетами принтеров в любом браузере. Если у вас возникнут проблемы, рассмотрите возможность использования display: block; или аналогичные на полях макета и при необходимости отрегулируйте размеры. Например, установите ширину: 100%; на всю ширину страницы.

  Стили печати

  Теперь можно применять стиль для печати. Рекомендации:

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

  Дополнительные предложения включают…

  Применить столбцы CSS

  Стандартная бумага формата A4 и US Letter может привести к получению более длинных и менее читаемых строк текста. Рассмотрите возможность использования столбцов CSS в макетах для печати. Например:

  В этом примере столбцы будут созданы, когда по горизонтали останется не менее 37 эм. Нет необходимости задавать медиа-запросы; дополнительные столбцы будут добавлены на более широкой бумаге.

  Используйте границы вместо цветов фона

  В вашем шаблоне могут быть разделы или выноски, обозначенные более темными или инверсными цветовыми схемами:

  
  

  Экономьте чернила, представляя эти элементы рамкой:

  < бр />

  Удалить или инвертировать изображения

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

  В идеале печатные изображения должны использовать темные цвета на светлом фоне. Цвета SVG, встроенные в HTML, можно изменить в CSS, но возможны ситуации, когда у вас более темные растровые изображения:

  
  

  Фильтр CSS можно использовать для инвертирования и настройки цветов в таблице стилей печати. Например:

  
  

  Добавить дополнительный контент

  В печатных СМИ часто требуется дополнительная информация, которая не требуется на экране. Свойство содержимого CSS можно использовать для добавления текста к псевдоэлементам ::before и ::after. Например, отображать URL ссылки в скобках после текста:

  Или вы можете добавить сообщения только для печати:

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

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

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

  Свойства CSS3 break-before и break-after позволяют управлять поведением разрывов страницы, столбца или области до и после элемента. Поддержка отличная, но старые браузеры могут использовать аналогичные свойства разрыва страницы до и после разрыва страницы.

  Можно использовать следующие значения разрыва до и разрыва после:

  • auto : значение по умолчанию — перерыв разрешен, но не принудительен
  • avoid : избегайте разрыва страницы, столбца или области.
  • avoid-page : избежать разрыва страницы
  • страница: принудительный разрыв страницы
  • всегда : псевдоним страницы
  • слева: разрыв страницы, чтобы следующая страница была левой.
  • справа : принудительно разбить страницу, чтобы следующая была правильной страницей.

  Пример: принудительный разрыв страницы непосредственно перед любым

  Примечание: будьте осторожны с чрезмерным использованием разрывов страниц. В идеале вывод на принтер должен занимать как можно меньше страниц.

  Свойство break-inside (и более раннее свойство page-break-inside ) указывает, разрешен ли разрыв страницы внутри элемента. Обычно поддерживаемые значения:

  • auto : значение по умолчанию — перерыв разрешен, но не принудительен
  • avoid : по возможности избегайте внутреннего разрыва
  • avoid-page : по возможности избегайте внутреннего разрыва страницы

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

  Свойство widows определяет минимальное количество строк в блоке, которое должно отображаться вверху страницы. Представьте себе блок с пятью строками текста. Браузер хочет сделать разрыв страницы после четвертой строки, чтобы последняя строка отображалась вверху следующей страницы. Установка вдов: 3; разрывается на второй строке или перед ней, поэтому на следующую страницу переносятся как минимум три строки.

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

  Свойство box-decoration-break управляет границами элементов на страницах. Когда элемент с рамкой имеет внутренний разрыв страницы:

  • slice : по умолчанию разделяет макет. Верхняя граница отображается на первой странице, а нижняя — на второй.
  • clone: ​​копирует поля, отступы и границы. Все четыре границы отображаются на обеих страницах.

  Наконец, CSS Paged Media ( @page ) имеет ограниченную поддержку браузеров, но позволяет настраивать таргетинг на определенные страницы, чтобы можно было определить альтернативные поля или разрывы:

  Свойства разрыва страницы в CSS можно поместить в стили экрана или печати, поскольку они влияют только на печать, но для ясности я рекомендую использовать их в CSS для печати.

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

  Труды печати

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

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

  Добавление нескольких разрывов страниц и удаление ненужных разделов порадует пользователей и поднимет ваш сайт выше конкурентов. Добавьте это в свой список дел!

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

  Дополнительная литература на SmashingMag:

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

  Таблица стилей для печати полезна, а иногда даже необходима. Некоторые читатели могут захотеть сохранить вашу информацию локально в виде хорошо отформатированного PDF-файла, чтобы обращаться к ней позже, когда у них не будет подключения к Интернету. Однако в эпоху адаптивного веб-дизайна о стилях печати часто забывают. Хорошей новостью является то, что таблицу стилей для печати на самом деле очень легко создать: вы можете следовать паре простых приемов CSS, чтобы создать приятный опыт для читателей и показать им, что вы приложили дополнительные усилия, чтобы сделать пользователя немного лучше. опыт. Итак, с чего начать?

  Познакомьтесь с потрясающими онлайн-семинарами по внешнему интерфейсу и пользовательскому интерфейсу с практическими выводами, сеансами в прямом эфире, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, CSS/JS и UX. С Кэри Фишер, Стефаном Баумгартнером и многими другими.

  Начало работы

  Давайте рассмотрим процесс настройки таблицы стилей печати. Лучший способ — начать с нуля и полагаться на таблицу стилей браузера по умолчанию, которая по умолчанию довольно хорошо заботится о выводе на печать. В этом случае вставьте все объявления для печати в конце вашей основной таблицы стилей и заключите их в это отдельное правило:

  Чтобы это сработало, нам нужно подготовить две вещи:

  1. Включить все стили экрана в отдельное правило экрана @media;
  2. Не указывайте тип носителя для сокращенной таблицы стилей:

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

  Конечно, вы можете разделить объявления для экрана и печати на два файла CSS. Просто установите тип носителя для вывода на экран на media="screen" и тип носителя для печати на media="print" , опустив его для первого, если вы хотите использовать таблицу стилей экрана.

  Для иллюстрации я создал простой веб-сайт вымышленной винодельни Smashing Winery.

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

  Поэтому в первую очередь мы скроем весь беспорядок: а именно основную навигацию и нижний колонтитул.

  В зависимости от типа веб-сайта вы также можете скрыть изображения по умолчанию. Если изображения большие, это было бы разумно, чтобы сэкономить вашим пользователям некоторые расходы на печать. Но если изображения в основном поддерживают содержание, и их удаление повредит смыслу, просто оставьте их. Что бы вы ни решили, ограничьте изображения определенной шириной, чтобы они не растекались по бумаге. Я обнаружил, что 500 пикселей — это хороший компромисс.

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

  Возможно, вы захотите использовать простой прием, чтобы получить высококачественные изображения при печати. Просто предоставьте версию с более высоким разрешением для каждого необходимого изображения и измените его размер до исходного размера с помощью CSS. Подробнее об этом методе читайте в статье «Печать изображений с высоким разрешением» на сайте A List Apart.

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

  Подбор подходящего размера

  Чтобы определить поля страницы, вы можете использовать правило @page, чтобы просто применить поля по всей странице. Например:

  установит поля страницы со всех сторон равными 0,5 см. Вы также можете настроить поля для каждой второй страницы. Следующий код устанавливает левую страницу (1, 3, 5 и т. д.) и правую страницу (2, 4, 6 и т. д.).) поля независимо.

  Вы также можете использовать псевдокласс :first page, который описывает стиль первой страницы при печати документа:

  К сожалению, @page не поддерживается в Firefox, но поддерживается в Chrome 2.0+, IE 8.0+, Opera 6.0+ и Safari 5.0+. @page :first поддерживается только в IE8+ и Opera 9.2+. (спасибо за совет, Designshack)

  Теперь давайте изменим некоторые общие настройки шрифтов. Большинство браузеров по умолчанию устанавливают Times New Roman, потому что считается, что шрифты с засечками приятнее для глаз при чтении на бумаге. Мы можем использовать шрифт Georgia с размером шрифта 12 пунктов и немного большей высотой строки для лучшей читаемости.

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

  Кроме особых случаев (например,

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

  и вы всегда можете сбросить их поля:

  Или вы можете переопределить стиль маркеров по умолчанию в ненумерованных списках…

  …и заменить его собственным; например, двойная стрелка (и пустое место, чтобы дать ей немного места):

  Вы также можете немного выделиться, увеличив ее и выделив текст курсивом.

  < /ул>

  Заголовок

  В настоящее время в заголовке осталось рассмотреть

  Недостающее звено

  Статья Аарона в A List Apart "Улучшение отображения ссылок для печати" дает более полное представление об идее, лежащей в основе этого скрипта.

  Пока мы на этом, было бы вдумчиво сообщить читателям, откуда берутся цитаты, например те, что заключены в теги. Просто добавьте атрибут cite (который будет URL-адресом) после кавычек, например:

  Рядом

  Мы еще не рассмотрели содержимое боковой панели. Несмотря на то, что по умолчанию он появляется после основного контента, давайте уделим ему особое внимание. Чтобы она была различима, мы добавим боковой панели серую верхнюю границу и безопасный буфер размером 30 пикселей. Последнее свойство, display: block , обеспечивает правильное отображение границы.

  Чтобы еще больше отделить его, мы могли бы установить специальное свойство печати:

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

  То же самое можно сделать и с комментариями. Комментарии не отображаются в примере, но их все же стоит затронуть. Поскольку иногда они занимают много времени, может быть разумно исключить их из распечатки (просто установите display: none для всего контейнера). Если вы хотите, чтобы комментарии отображались, по крайней мере, установите page-break-before. Вы также можете использовать page-break-after: всегда, если есть содержимое для печати на новой странице. Свойства page-break-before и page-break-after поддерживаются во всех основных браузерах.

  Мы также можем использовать свойства вдов и сирот. Термины происходят от традиционной печати, и они принимают числа в качестве значений. Свойство widows устанавливает минимальное количество строк в абзаце, которые необходимо оставить в верхней части страницы, прежде чем полностью переместить их на новую страницу. Свойство orphans задает количество строк в нижней части страницы. Свойства сирот и вдов поддерживаются в IE 8+ и Opera 9.2+, но, к сожалению, не в Firefox, Safari или Chrome.

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

  Просто для развлечения

  Вы можете спросить: "Почему мы не можем просто разместить боковую панель рядом с основным содержанием, как на самом веб-сайте?" Ну, вывод на экран и на печать немного отличается. В отличие от первого, распечатки не очень широкие и поэтому не занимают много места для заполнения. Но в зависимости от размера шрифта длина строки может превышать 75 символов, что затрудняет чтение.

  В этом случае мы могли бы, конечно, ограничить ширину основного контента (желательно не слишком сильно — мы не должны устанавливать длину строки менее 55 символов), а затем полностью расположить боковую панель прямо под ней. , как на экране. Но описание этого метода выходит за рамки этой статьи, поэтому обратитесь к таблице стилей экрана примера веб-сайта (номера строк 112 и 141 и ниже).

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

  Предварительный просмотр стал проще

  Предварительный просмотр перед печатью Тима Коннелла – это небольшой удобный подключаемый модуль jQuery, который воспроизводит встроенную функцию предварительного просмотра перед печатью, но с одним отличием. Вместо того, чтобы открывать отдельную страницу, он показывает гладкий оверлей с кнопками «Закрыть» и «Печать» вверху. Он также имеет удобный ярлык «P». Вы также можете проверить демо-страницу.

  Упущенная возможность

  Представьте, что вы можете посетить любую страницу, нажать «Печать» и получить оптимизированную версию страницы для просмотра на бумаге. К сожалению, мы не живем в этом идеальном мире. Некоторые веб-сайты по-прежнему полагаются на JavaScript для создания версий для печати, а многим другим дизайнерам просто все равно. Но это упущенная возможность. Тщательно составленная таблица стилей печати может использоваться не только для печати, но и для оптимизации чтения с экрана.

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

  Будущее

  Хотя использование CSS3 для макетов экрана в настоящее время довольно распространено, в среде печати он еще не совсем зарекомендовал себя. У W3C есть обширное описание «Paged Media», но, к сожалению, на данный момент поддержка очень ограничена, Opera и Chrome — единственные браузеры, которые поддерживают некоторые связанные с ним свойства. При достойной поддержке можно было бы использовать правило @page для установки размеров страницы, переключения в альбомный режим, изменения полей и многого другого. Даже медиа-запросы были задуманы так, чтобы отвечать на разные размеры страниц.

  Веб-сайты, хорошо разработанные для печати

  Давайте рассмотрим несколько примеров веб-сайтов, оптимизированных для печати.

  Раздельный список Гладкий дизайн с несколькими столбцами упрощен до одного столбца во всю ширину, что интуитивно отражает разумную иерархию веб-сайта. Названия статей и авторы больше не являются активными ссылками. И красивая чистая типографика сохраняется нетронутой благодаря совместимым шрифтам и простым цветам; изменение шрифта не требуется, хотя значение размера шрифта немного увеличивается. Рекламные и партнерские стили скрыты, и в результате получается простая, чистая печатная страница, которая легко согласуется с любым принтером или настройкой страницы в документе. A List Apart является образцовым, за исключением одного важного момента: логотип нигде не появляется на распечатке.

  Ярмарки Затерянного Мира Гладкая печатная страница помогает нести визуальные эффекты веб-сайта Ярмарки Затерянного Мира. Основной заголовок и его красочный фон заменены на упрощенную версию в стиле предварительного просмотра. Однако некоторые изображения можно было удалить, чтобы сэкономить дорогие чернила для принтера. (Обновлено).

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

  Джеймс Ли Джеймс Ли разработал свой личный веб-сайт исключительно хорошо для этой цели, тщательно сохранив все пробелы и ключевые элементы. Логотип является частью печатного продукта, а навигационные ссылки — нет: они очень умны, потому что навигация не имеет ценности на печатной странице, если она не является информативной сама по себе. Невеб-шрифты преобразуются в простые печатные (см. «Другое…»). Блестяще выполнено для печати.

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

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

  Studio Mister Отличная работа функции предварительного просмотра перед печатью. Страница была тщательно разработана по сетке, и для ее подготовки к печати требуется совсем немного; некоторое внимание к цвету фона текста и не более того. К сожалению, логотип является фоновым изображением и поэтому исключен.

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

  OmniTI Компания OmniTI оптимизировала свой контент для печати не за счет уменьшения основного столбца, а за счет увеличения размера текста и предотвращения скопления изображений. Игривый вид соответствует хорошему интервалу. Единственный недостаток? Многие разрывы строк были удалены, из-за чего некоторые слова и предложения пересекались друг с другом.

  В заключение

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

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

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

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

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

  Использование таблицы стилей печати

  Добавьте следующее в свой тег.

  Использование медиазапросов для улучшения макета

  Обнаружение запросов на печать

  Некоторые браузеры (в том числе Firefox 6 и более поздних версий и Internet Explorer) отправляют события предварительной и последующей печати, чтобы контент мог определить, когда могла произойти печать. Вы можете использовать это для настройки пользовательского интерфейса, отображаемого во время печати (например, путем отображения или скрытия элементов пользовательского интерфейса во время процесса печати).

  Примечание. Вы также можете использовать window.onbeforeprint и window.onafterprint для назначения обработчиков этих событий, но предпочтительнее использовать EventTarget.addEventListener().

  Примеры

  Вот несколько типичных примеров.

  Открывать и автоматически закрывать всплывающее окно по завершении

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

  Распечатать внешнюю страницу, не открывая ее

  Если вы хотите распечатать внешнюю страницу, не открывая ее, вы можете использовать скрытый элемент (см. HTMLIFrameElement), автоматически удаляя его после того, как пользователь распечатает его содержимое. Ниже приведен возможный пример, в котором будет напечатан файл с именем externalPage.html:

  Примечание. Старые версии Internet Explorer не могут распечатать содержимое скрытого файла .

  Читайте также:

    
  • Типы компьютерных сканеров
    
  • Пиксельный принтер Starbound тормозит
    
  • Как распечатать удостоверение личности
    
  • В принтере Epson застряла бумага, как ее вытащить
    
  • Сколько можно напечатать на принтере без перерыва