Браузерная поддержка номеров страниц CSS

Так что я знаю об этой опции: Номера страниц с CSS / HTML.

Это, безусловно, лучший способ добавить номера страниц в печатную версию страницы, но я не могу заставить это работать в любом месте. Я пробовал на своем компьютере с Windows 7 в Chrome, Firefox и IE9. Судя по некоторым ссылкам, похоже, что это может поддерживаться в более проприетарном программном обеспечении, таком как Prince XML. Поддерживается ли это веб-браузерами для печатных версий?

Я попытался сделать просто пустой HTML-файл и в голове добавить это между двумя тегами стиля:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

Я также упростил его даже просто использовать content: "TEXT"; чтобы увидеть, смогу ли я получить что-нибудь, чтобы показать. Это поддерживается где-нибудь? Под "этим" я конкретно подразумеваю @page а также @bottom-right теги, так как я получил контент для работы много раз.

Источник

5 ответов

Решение

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

Счетчики должны быть сброшены перед использованием, согласно https://developer.mozilla.org/en-US/docs/CSS/Counters.

Вы можете установить свой стартовый номер на что угодно, по умолчанию 0.

Пример:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... теоретически. В реальном мире только PrinceXML поддерживает это.

Источник

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

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

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

Источник

Не использую @page, но я получил чистые номера страниц CSS для работы в Firefox 20:

http://jsfiddle.net/okohll/QnFKZ/

Для печати щелкните правой кнопкой мыши в окне результатов (внизу справа) и выберите

This Frame -> Print Frame...

CSS это

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

и HTML это

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>
Источник

Via Mozilla, ( Печать документа)

Это помещает верхний и нижний колонтитулы на каждую напечатанную страницу. Это хорошо работает в Mozilla, но не так хорошо в IE и Chrome.

<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
  Heading for paged media
</div>
<div id="print-foot">
  Page: 
</div>
</body>
</html>

CSS:

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {

h1 {
   page-break-before: always;
   padding-top: 2em;
}

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
}

#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;

    font-size: 200%;
    text-align: center;
}

#print-foot {
   display: block;
   position: fixed;
   bottom: 0pt;
   right: 0pt;

  font-size: 200%;
}

#print-foot:after {
    content: counter(page);
    counter-increment: page;
}
Источник

Если вы хотите добавить номера страниц при печати в Chrome / Chromium, одно из простых решений - использовать Paged.js.

Эта библиотека JS берет ваш HTML / CSS и разрезает его на страницы, готовые к печати в виде книги, которую вы будете предварительно просматривать в своем браузере. Это делает @page и большинство спецификаций CSS3 работают для Chrome.

Решение 1 (простое), если вы согласны разрезать изображение на страницы, готовые к печати

Просто добавьте их CDN в head тег вашей страницы:

      <link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

Затем вы можете добавить номера страниц с помощью автоматического счетчика page. Пример :

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

      <div class="page-number"></div>

CSS, чтобы число появилось в div:

      .page-number{
  content: counter(page)
}

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

Решение 2 (сложнее), если вы хотите отображать числа (и разрывы страниц) только при печати

В этом случае вам нужно применять CDN Paged.js только при печати документа. Один из способов, который я могу придумать, - это добавить print me кнопка, запускающая Javascript для:

  1. добавить CDN на страницу
  2. а затем выполнить window.print(); для запуска подсказки печати навигатора
Источник
Другие вопросы по тегам