Поддержка браузера для номеров страниц CSS

Поэтому я знаю эту опцию: Номера страниц с CSS/HTML.

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

Я попытался сделать только чистый html файл, и в голове добавлено это между двумя тегами стиля:

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

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

Ответ 1

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

Счётчики должны быть reset, прежде чем их можно будет использовать, в соответствии с 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 поддерживает это.

Ответ 2

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

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

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

Ответ 3

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

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

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

Этот кадр → рамка печати...

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>

Ответ 4

Через 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;
}