Поддержка css свойств в PDF

Поддержка css свойств в PDF

Печать html-документов

1. Правило @page

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

@page {
margin: 2in;
}

Можно задавать отдельные поля документа внутри правила @page, такие как margin-topmargin-rightmargin-bottommargin-left:

@page {
margin: 1in;
margin-left: 1.5in;
}

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

Управлять разрывами страниц можно с помощью свойств page-break-beforepage-break-after и page-break-inside. Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static.

page-break-before
Значения:  
auto Значение по умолчанию, задает автоматические разрывы страниц.
always Всегда добавляет разрыв страницы перед элементом.
avoid Отменяет размещение разрыва перед элементом, если это возможно.
left Добавляет один или два разрыва страниц перед элементом, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right Добавляет один или два разрыва страниц перед элементом. Элемент будет печататься, начиная с верха правой границы. Следующая страница будет форматироваться как правая страница.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
h1 {page-break-before: always;}
}
page-break-after
Значения:  
auto Значение по умолчанию, задает автоматические разрывы страниц.
always Всегда добавляет разрыв страницы после элемента.
avoid Отменяет добавление разрыва после элемента, если это возможно.
left Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как правая страница. Элемент будет печататься, начиная с верха правой границы.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
footer {page-break-after: always;}
}

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

page-break-inside
Значения:  
auto Значение по умолчанию. Автоматический разрыв страницы.
avoid Запрещает разрыв страницы внутри элемента, если это возможно.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
img {
display: block;
page-break-inside: avoid;
}
}

Поддержка background в css свойствах PDF

Background-сolours, background -gradient и background-image могут применяться ко всем блочным элементам HTML в PDF, включая всю страницу, в то время как встроенные элементы HTML поддерживают только свойство фона.

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

  • background
  • background-image
  • background-position
  • background-repeat
  • background-color
  • background-size
  • background-image-resolution
  • background-image-opacity

Background Colour

Цвет фона может быть задан с использованием свойств background or background-color CSS. Следующие определения цветов поддерживаются и могут использоваться для установки background-color:

  • rgb(255, 255, 255)
  • rgba(255, 255, 255, 1) – последнее значение является альфа-прозрачностью и должно быть между 0-1.
  • rgb(100%, 100%, 100%)
  • hsl(360, 100%, 100%)
  • hsla(360, 100%, 100%, 1) – последнее значение является альфа-прозрачностью и должно быть между 0-1.
  • cmyk(100, 100, 100, 100)
  • cmyka(100, 100, 100, 100, 1) – последнее значение является альфа-прозрачностью и должно быть между 0-1.
  • spot(PANTONE 534, 100%, 85, 65, 47, 9) – определяется как: : name, tint, C, M, Y, K.
<!-- Стандартный Hex Backgronud colour -->
<div style="background: #4a85e7">
    Здесь мой контент
</div>

<!-- RGB() Background Colour -->
<div style="background: rgb(74, 133, 231)">
    Здесь мой контент
</div>

<!-- RGBA() Background Colour (Transparency) -->
<div style="background: rgba(74, 133, 231, 0.5)">
    Здесь мой контент
</div>

<!-- CMYK() Background Colour -->
<div style="background: cmyk(100, 100, 100);">
   Здесь мой контент
</div>

<!-- Inline background Colour -->
This is inline content <span style="background: yellow">that should be highlighted</span> and go and do this.

Background Gradient

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

Большинство свойств в этой спецификации поддерживаются, в том числе: multiple colour-stops, opacity, gradient axis (linear) and shape and extent (radial). Однако некоторые определения градиентной линии, такие как to right corner  или to bottom left, не работают должным образом, но right, left или 45degs работают правильно.

Linear Gradient Examples

<!-- Background Linear Gradient -->
<div style="background-image: linear-gradient(red, orange); height: 20mm">
    Здесь мой контент
</div>

<!-- Left-To-Right Background Linear Gradient -->
<div style="background-image: linear-gradient(right, red, orange); height: 20mm">
    Здесь мой контент
</div>

<!-- Diagonal Background Linear Gradient -->
<div style="background-image: linear-gradient(45deg, red, orange); height: 20mm">
    Здесь мой контент
</div>

<!-- Multi-colour Linear Gradient -->
<div style="background-image: linear-gradient(left, red, #f06d06, rgb(255, 255, 0), green); height: 20mm">
    Здесь мой контент
</div>

Radial Gradient Examples

<!-- Стандартный Radial Gradient -->
<div style="background-image: radial-gradient(yellow, orange); height: 20mm">
    Здесь мой контент
</div>

<!-- Radial Gradient с окружностью -->
<div style="background-image: radial-gradient(circle, yellow, orange); height: 20mm">
    Здесь мой контент
</div>

<!-- Radial Gradient с окружностью которая не расширяется мимо контейнера-->
<div style="background-image: radial-gradient(circle closest-side, yellow, orange); height: 20mm">
    Здесь мой контент
</div>

<!-- Radial Gradient с окружностью в верху с права -->
<div style="background-image: radial-gradient(circle at top right, yellow, orange); height: 20mm">
   Здесь мой контент
</div>

Background Images

Background images могут быть включены с использованием URL или полного локального пути - предпочтительного метода с использованием одной из абсолютных констант пути - к изображению. Для управления отображением изображения можно использовать background или background-image, background-position, background-size и background-repeat CSS свойства. В настоящее время неподдерживается несколько фоновых изображений на контейнер.

<!-- Простой Background Image без ограничений -->
<div style="background: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha3.png); height: 40mm">
    Здесь мой контент
</div>

<!-- Простой Background Image with a y-ограничением -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha3.png); background-repeat: repeat-y; height: 40mm">
    Здесь мой контент
</div>

<!-- Не повторяющийся Background Image центрируемый по горизонтали и вертикали -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha3.png) background-repeat: no-repeat; background-position: 50% 50%; height: 40mm">
    Здесь мой контент
</div>

<!-- Стандартный background используемый большое изображение -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); height: 40mm">
    Здесь мой контент
</div>

<!-- Большой плиточный background image -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-size: 300px 200px; height: 40mm">
    Здесь мой контент
</div>

<!-- Убедитесь, что контейнер содержит background image -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-size: contain; height: 40mm">
    Здесь мой контент
</div>

Наряду со стандартными свойствами фона, заданными с помощью CSS, существует также свойство background-image-resize, которое позволяет вам более детально контролировать сжатие или изменение размера изображения в соответствии с контейнером. Доступны следующие опции для изменения размера фона:

  • 0 – не изменяется размер (по-умолчанию)
  • 1 – усадка для установки ширины контейнера (сохранить пропорции)
  • 2 – усадка для установки высоты контейнера (сохранить пропорции)
  • 3 – усадка для установки ширины контейнера и / или высоты (сохранить пропорции)
  • 4 – изменение размера контейнера в соответствии с шириной контейнера (сохранить пропорции)
  • 5 – изменение размера для высоты контейнера (сохранить пропорции)
  • 6 – изменение размера по ширине и высоте

Использование background-image-resize похоже на любое другое свойство CSS:

<!-- Уменьшить изображение до ширины контейнера (сохранить пропорции) -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-image-resize: 1; background-repeat: no-repeat; height: 40mm">
    Здесь мой контент
</div>

<!-- Усадка для установки высоты контейнера (сохранить пропорции) -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-image-resize: 2; background-repeat: no-repeat; height: 40mm">
    Здесь мой контент
</div>

<!-- Усадка для установки ширины контейнера и / или высоты (сохранить пропорции) -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-image-resize: 3; background-repeat: no-repeat; height: 40mm">
    Здесь мой контент
</div>

<!-- Изменение размера по ширине контейнера (сохранить пропорции) -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-image-resize: 4; background-repeat: no-repeat; height: 40mm">
    Здесь мой контент
</div>

<!-- Изменение размера для высоты контейнера (сохранить пропорции) -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-image-resize: 5; background-repeat: no-repeat; height: 40mm">
    Здесь мой контент
</div>

<!-- Изменение размера по ширине и высоте -->
<div style="background-image: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha.png); background-image-resize: 6; background-repeat: no-repeat; height: 40mm">
    Здесь мой контент
</div>

Наконец, фоны могут применяться ко всем страницам с помощью селектора CSS @page.

<style>
    @page {
        background: url(<?php echo PDF_PLUGIN_DIR; ?>resources/images/alpha3.png) no-repeat 0 0;
        background-image-resize: 4; /* see http://mpdf.github.io/css-stylesheets/supported-css.html for details on this option */
    }
</style>

Нужно больше примеров? и по яснее? Пиши!

Что почитать?



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *