Создание текста водяного знака в CSS Paged Media

У меня есть водяной знак, который мне нужно повторять на каждой странице PDF. Исходный текст представляет собой div в моем HTML:

<div id="all"> (outermost container)
     <div id="background">
        <p id="watermark">Internal Use Only - Do Not Duplicate</p>
     </div>
    (more divs with the content of the book)
</div>

В моем CSS у меня есть следующие объявления:

#background {
   position: absolute;
   display: block;
   top: 30mm;
   left: 10mm;
   bottom: 30mm;
   right: 10mm;
   z-index: -1;
   overflow: visible;
}
#watermark {
    color: cmyk(0,0,0, 0.4);
    font-size: 24pt;
    transform: rotate(-45deg);
}

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

Я использую Antennahouse для преобразования HTML + CSS в PDF.


css css-paged-media antenna-house
person Hobbes    schedule 23.03.2015    source источник
comment
Почему бы вам не связаться с их службой поддержки?   -  person Liam    schedule 23.03.2015
comment
Потому что я не уверен, является ли это ошибкой или просто неправильной таблицей стилей.   -  person Hobbes    schedule 23.03.2015
comment
для начала, если вы используете #backgounrd и #watermark, это селектор unqiue ID, он повлияет только на первый ID, который он увидит. Я могу предложить вам изменить его на .watermark и .background и убедиться, что каждый div страницы имеет класс = фон и водяной знак соответственно.   -  person Ziv Weissman    schedule 23.03.2015
comment
В конечном счете, то, как отображаются страницы, зависит от клиента, клиентом в данном случае является Antennahouse, поэтому без этого программного обеспечения будет очень сложно (если не невозможно) вам помочь.   -  person Liam    schedule 23.03.2015
comment
@Ziv, хорошая мысль, но HTML, который входит в Antennahouse, не имеет разрывов страниц, это просто длинный список тем. Antennahouse решает, где разбить страницу (на основе подсказок в CSS, таких как стили, которые указывают page-break-after=avoid).   -  person Hobbes    schedule 23.03.2015
comment
Хорошо, тогда вы должны использовать повтор для фона...   -  person Ziv Weissman    schedule 23.03.2015

Ответы (5)


arrow_upward
2
arrow_downward

Этот вопрос был задан некоторое время назад, но я думаю, что лучший ответ — справиться с этим с помощью правила @page.

Из W3C:

Авторы могут указать различные аспекты страничного блока, такие как его размеры, ориентация и поля, в правиле @page. Правила @page разрешены везде, где разрешены наборы правил. Правило «@page» состоит из ключевого слова «@page», необязательного списка селекторов страниц, разделенных запятыми, и блока объявлений (говорят, что они находятся в контексте страницы). Правило @page также может содержать другие at-правила, чередующиеся между объявлениями. Текущий уровень этой спецификации разрешает только правила поля внутри ‘@page’. подробнее...

Одним из решений является определение @page в вашей таблице стилей и использование свойства содержимого css для размещения водяного знака. Пример:

@page:right {

    @top-left{
        content: 'Internal Use Only - Do Not Duplicate';
        font-size: 9pt;
        color: #000;
    }
}

Каждая страница будет содержать водяной знак в левом верхнем углу.

person pwavg    schedule 18.01.2016
comment
Да, это обходной путь, о котором я упоминал в своем посте ниже. - person Hobbes; 18.01.2016
comment
Я не видел никаких примеров, поэтому я разместил его здесь для аналогичных проблем. Если это не решение, я не знаю, что вам нужно сделать. - person pwavg; 18.01.2016
comment
Я обнаружил, что если я помещу водяной знак в текстовую область, водяной знак будет размещен поверх текста, а не под ним. Поэтому мой текст стал менее разборчивым. - person Hobbes; 18.01.2016

arrow_upward
0
arrow_downward

Если вы используете position : fixed в качестве водяного знака, вы сможете заставить его работать в Firefox, Opera и Internet Explorer.

Firefox, Opera и Internet Explorer повторяют элементы с position: fixed на каждой печатной странице.

К сожалению, в браузерах Webkit (Chrome, Safari) такой возможности нет. Даже при использовании position : fixed эти браузеры будут отображать элемент только на первой печатной странице.

person John Slegers    schedule 16.01.2016

arrow_upward
0
arrow_downward

Мне пока не удалось заставить это работать.
У меня есть обходной путь: я могу поместить текст в одно из полей на левой стороне страницы. Когда я указываю высоту и ширину этого блока так, чтобы он перекрывал область тела, я могу создать эффект водяного знака.
У этого метода есть один недостаток: несмотря на то, что указан z-index = -1, водяной знак будет размещен поверх области изображения. основной текст, а не под ним. Это означает, что мой текст стал менее разборчивым.

person Hobbes    schedule 03.04.2015

arrow_upward
0
arrow_downward

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

@page {
  @left-middle {
    height: 0;
    content: 'DRAFT';
    color: #eee;
    font-size: 200pt;
    z-index: -1;
    transform: rotate(45deg);
    margin-left: 20mm;
    margin-top: -140mm;
  }
}

Обратите внимание, что вы также можете настроить водяной знак на переднем плане, установив в своем XML-файл параметров антенного дома:

<?xml version="1.0"?>
<formatter-config>
  <formatter-settings
      watermark-text="DRAFT" />
</formatter-config>
person David    schedule 29.03.2021
comment
Еще в 2015 году, несмотря на указание z-index = -1, водяной знак размещался поверх основного текста. Возможно, это была ошибка в текущей на тот момент версии Antennahouse Formatter, которая с тех пор была исправлена. - person Hobbes; 29.03.2021

arrow_upward
0
arrow_downward

Используйте position: running(Watermark) вместо div, а в одном из полей поля страницы используйте content: element(Watermark). (Имя не имеет значения, если оно одинаково в обоих местах.)

Посмотрите, как создаются вкладки в Introduction to CSS for Page Media книге на https://www.antennahouse.com/css

person Tony Graham    schedule 14.05.2021