Media print css: CSS печатной версии страницы / Хабр

Leave a Comment / Css / By /

Содержание

@page ⚡️ HTML и CSS с примерами кода

Правило @page используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS свойства с @page. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.

Правило @page доступно через интерфейс объектной модели CSS CSSPageRule.

@-правила
  • @charset
  • @import
  • @namespace
  • @media
  • @supports
  • @document
  • @page
  • @font-face
  • @keyframes
  • @viewport
  • @counter-style
  • @font-feature-values
Страницы
  • page-break-after
  • page-break-before
  • page-break-inside
  • @page
  • :blank
  • :first
  • :left
  • :right

Синтаксис

@page {
  margin: 1cm;
}
@page :first {
  margin: 2cm;
}

size

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

/* Keyword values for scalable size */
size: auto;
size: portrait;
size: landscape;
/* <length> values */
/* 1 value: height = width */
size: 6in;
/* 2 values: width then height */
size: 4in 6in;
/* Keyword values for absolute size */
size: A4;
size: B5;
size: JIS-B4;
size: letter;
/* Mixing size and orientation */
size: A4 portrait;

Значения:

auto
Браузер сам выбирает размер листа.
landscape
Содержимое страницы отображается в альбомной ориентации
portrait
Содержимое страницы отображается в портретном режиме. Это ориентация по умолчанию.
<length>
Любое значение длины. Первое значение соответствует ширине поля страницы, а второе соответствует его высоте. Если указано только одно значение, оно используется как для ширины, так и для высоты.
<page-size>
A5 (148mm x 210mm), A4 (210mm x 297mm), A3 (297mm x 420mm), B5 (176mm x 250mm), B4 (250mm x 353mm), JIS-B5 (182mm x 257mm), JIS-B4 (257mm x 364mm), letter (8.5in x 11in), legal (8.5in x 14in), ledger (11in x 17in).

marks

Добавляет обрезку и/или регистрационные отметки в документ.

@page {
  /* Keyword values */
  marks: none;
  marks: crop;
  marks: cross;
  marks: crop cross;
}

Значения:

crop
Будут напечатаны отметки для обрезки
cross
Будут напечатаны крестики
none
Никаких отметок не будет напечатано

bleed

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

/* Keyword values */
bleed: auto;
/* <length> values */
bleed: 8pt;
bleed: 1cm;

Пример

HTMLprint. css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>@page</title>
    <link
      rel="stylesheet"
      href="/example/css/print.css"
      media="print"
    />
  </head>
  <body>
    <h2>Метод ловли льва в пустыне</h2>
    <h3>Метод последовательного перебора</h3>
    <p>
      Пусть лев имеет габаритные размеры LxWxH, где L —
      длина льва от кончика носа до кисточки хвоста, W —
      ширина льва, а H — его высота. После чего пустыню
      разбиваем на ряд элементарных прямоугольников, размер
      которых совпадает с шириной и длиной льва. Учитывая,
      что лев может находиться не строго на заданном
      участке, а одновременно на двух из них, клетку для
      ловли следует делать повышенной площади, а именно
      2Lx2W. Благодаря этому мы избежим ошибки, когда в
      клетке окажется пойманным лишь половина льва или, что
      хуже, только его хвост.
    </p>
    <p>
      Далее последовательно накрываем каждый из размеченных
      прямоугольников пустыни клеткой и проверяем, пойман
      лев или нет.
  Как только лев окажется в клетке,
      процедура поимки считается завершенной.
    </p>
  </body>
</html>

body {
  font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
h2,
h3,
p {
  color: #000; /* Черный цвет текста */
}
@page :first {
  margin: 1cm; /* Отступы для первой страницы */
}
@page :left {
  margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */
}
@page :right {
  margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */
}

Спецификации

  • CSS Logical Properties and Values Level 1
  • CSS Paged Media Module Level 3
  • CSS Level 2 (Revision 1)

См. также

  • :blank
  • :first
  • :left
  • :right

Ссылки

  • @page MDN (рус.)

Медиа типы в CSS

Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы. Вы можете определять тип медиа в теге <link> для внешней таблицы стилей и внутри тега <style> для внедряемых таблиц стилей. 



<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css" media="all">

/* rules */

</style>

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

  • all – стили для всех типов медиа
  • aural – для синтезаторов речи
  • braille – для устройств чтения символов Брайля
  • embossed – для устройств печати символов Брайля
  • handheld – для портативных устройств
  • print – для печати на принтере
  • projection – для демонстрации с помощью проекторов
  • screen – для показа на экране монитора
  • tty – для показа на терминалах и телетайпах
  • tv – для показа на экране ТВ

Код ниже демонстрирует как применить CSS для дизайна различных медиа:

Пример кода


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Media</title>
<style type="text/css" media="screen">
	.warning {color:#ff0000}
	h2.warning {text-decoration:underline}
	p.warning {font-weight:bold}
	.printDisplay {display:none}
	</style>
	<style type="text/css" media="print">
	.warning {color:#660000;}
	h2.warning {text-decoration:underline; font-size:1in;}
	p.warning {font-weight:bold; font-size:.5in;}
	.screenDisplay {display:none}
</style>
</head>
<body>
	<h2>WARNING</h2>
	<p>Don't go there!</p>
	<p>This is the print version.</p>
	<p>This is the screen version.</p>
</body>
</html>

Указанный выше CSS-файл может быть прикреплен к любому количеству HTML-страниц. Тег <link>, расположенный в секции head каждой веб-страницы, может использоваться для прикрепления внешней каскадной таблицы стилей к любой странице вашего сайта.

Пример кода


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<h2>WARNING</h2>
	<p>Don't go there!</p>
</body>
</html>

Атрибуты <link>

Атрибуты Описание
href указывает на местонахождение внешней каскадной таблицы стилей
rel атрибут должен устанавливать значение stylesheet для ссылки на таблицу стилей
type должно быть установлено text/css для ссылки на таблицу стилей

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

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

Встроенные стили


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Styles</title>
</head>
<body>
	<p>Common Greetings</p>
	<ul>
	<li>Hello</li>
	<li>Hi</li>
	<li>Howdy</li>
</ul>
  • 2.84
  • 1
  • 2
  • 3
  • 4
  • 5

Голосов: 1524 | Просмотров: 5563

Как использовать медиа-запросы CSS для печати веб-страниц


Веб-страницы можно распечатать , но вы, вероятно, уже это знаете. Вы, вероятно, не делаете это очень часто, потому что… ну, они часто некрасивые, слишком длинные или полный беспорядок. Но вы, возможно, не знали, что мы можем определить отдельные стили CSS, используя медиа-запросов для веб-страниц, которые переводятся в документ Letter или A4.

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

Давайте кратко рассмотрим, как мы можем писать медиа-запросы для печатного и экспортируемого содержимого. Это очень просто, это займет всего минуту! Мы будем использовать эту шпаргалку по сочетанию клавиш Adobe XD из моего блога/веб-сайта в качестве примера.

Вот как статья выглядит в Интернете:

А вот как это выглядит в формате PDF до оптимизации CSS:

К вашему сведению: вы можете печатать из Интернета, используя сочетание клавиш Ctrl/cmd+P .

Шаг 1: Медиа-запросы CSS для печати

Прежде всего, мы определяем медиа-запрос:

 @media print {
    /* стили здесь */
}

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

Если нет, попробуйте использовать правило !important .

Шаг 2: Укрытие избыточности

При загрузке веб -страниц в качестве PDF пользователи не нужны:

  • Элементы пользовательского интерфейса
  • Заголовок/нижний колонти нужно скрыть эти элементы, используя display:none; .

    Тогда наш код становится ( в качестве примера ):

     @media print {
    верхний колонтитул, нижний колонтитул, в стороне, форма, … {
        дисплей: нет;
    }
}

    Тогда наш пример выглядит так:

    Неплохо, но вверху есть нежелательный интервал.

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

    , следовательно:

     @media print {
  верхний колонтитул, нижний колонтитул, в стороне, форма, … {
    дисплей: нет;
  }
  статья {
    ширина: 100%! важно;
    заполнение: 0! важно;
    маржа: 0! важно;
  }
}

    Шаг 3: Настройка полей страницы

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

    Тогда наш код станет таким:

     @media print {
  верхний колонтитул, нижний колонтитул, в стороне, форма, … {
    дисплей: нет;
  }
  статья {
    ширина: 100%! важно;
    заполнение: 0! важно;
    маржа: 0! важно;
  }
}
@страница {
  поле: 2 см;
}

    Как видно из приведенного выше примера кода, поля определяются с помощью at-правила @page , , а не , путем добавления полей к элементу , поскольку существует только один раз и охватывает высоту всех страниц вместе . С помощью этого декларатива мы можем даже определить отдельные поля для первой, последней, левой и правой страниц (в случае, если указанный экспортируемый объект занимает больше одной страницы), например:

     @страница: первая {
    поле: 0 см;
}
@страница:последняя {
    поля: 5см;
}
@страница:слева {
    поля: 2 см 1,5 см 2 см 2 см;
}
@страница:право {
    поля: 2 см 2 см 2 см 1,5 см;
}

    Ссылки по-прежнему доступны для кликов в PDF-файлах, но для тех пользователей, которые могут захотеть физически удерживать содержимое, нам нужно придумать что-то более творческое. Именно Бен Фрейн познакомил меня с этим действительно простым, супер-крутым трюком .

     @media печать {
  а: после {
    содержимое: "("attr(href)")";
  }
}

    Это берет значение атрибута href и отображает его в квадратных скобках после ссылки, например: css3-media-queries)

    ———

    Я оставлю вас с последним советом: оставьте что-нибудь в печатной версии, на которой есть ваше имя и необходимая информация об авторских правах!

    Sympli — это Saas-компания, которая создает инструменты для совместной разработки, передачи и управления версиями. За более чем 5 лет работы на рынке мы помогли тысячам дизайнеров и разработчиков работать вместе, предоставив единый источник достоверной информации и сократив обмен информацией, что привело к более быстрой доставке.

    HTML — @Media print css

    спросил

    Изменено 5 лет, 5 месяцев назад

    Просмотрено 48 тысяч раз

    У меня есть HTML-страница со следующей структурой:

     
<голова>
<тело>
<навигация>
  .... меню навигации

   <дел>
         <дел>
         <дел>
            
    Мой div для отображения в режиме печати
     
    
           <раздел>
               <статья>....содержание....
<дел>
<дел> .... HTML-элементы

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

  • html
  • css
  • печать
  • медиа

Если это точная структура вашего html, то это будет работать для вас.

 @media печать {
  навигация,
  div > div: не (.to-print),
  div + div: не (.to-print) {
      дисплей: нет;
  }
}

/* Таким образом, вы можете видеть, как стили работают с элементами, которые вы хотите скрыть за пределами печати */
  навигация,
  div > div: не (.to-print),
  div + div: не (.to-print) {
      красный цвет;
  } 
 <навигация> .... меню навигации <дел> <дел> <дел>
Мой div для отображения в режиме печати
 <раздел> <статья>....содержание....