2013-04-13 4 views
5

Я попытался поиграть с @page и counter(page) функциями CSS3, но я не вижу никаких номеров страниц, добавленных в вывод печати. Независимо от того, что я делаю, похоже, что это просто не работает.Номера страниц CSS не работают

Моя леска выглядит следующим образом:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
     <meta charset="utf-8"> 
     <style type="text/css"> 
     @page { 
      counter-increment: page; 
      counter-reset: page 1; 
      @top-right { 
       content: "Page " counter(page) " of " counter(pages); 
      } 
     } 
     </style> 
<head> 

<body> 
     <div> 

     Lorem ipsum dolor... 
     /* this gets long, 2 pages of text */ 
     </div> 
</body> 
</html> 

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

ОС: Linux Mint

браузеры: Chromium 25.0.1364.160, Firefox 20.0.1, Opera (последняя из менеджера пакетов)

Любые идеи?

+0

Вам не нужно было получать 'counter-reset: page 1' из декларации' @ page'? В противном случае он переустанавливает номер страницы для каждой страницы. – Juanjo

+0

Я переместил этот стиль в '', но это не помогло. Ничего не отображается в разделе «top-right» –

+0

Счетчик страниц автоматически создается и увеличивается, если ваш браузер поддерживает css3-страницы, что, насколько я могу судить, - ни один из них. – dsas

ответ

1

Поддержка браузера для этого не соответствует номиналу.

@page {margin: 2in} поддерживается в новых версиях Firefox, но не в других параметрах @page. Я считаю, что это относится и к другим браузерам.

+0

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

+0

Я ответил на аналогичный вопрос здесь [link] (http://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers/15856287#15856287), а в комментариях, связанных с несколькими интересными источниками, вы можете находят полезным. –

+0

John Biddle, я уже видел ваше сообщение, прежде чем публиковать свой собственный :) Итак, вы могли видеть сгенерированные счетчики страниц раньше, это правильно? Какой браузер вы использовали? –

0

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

Firefox, webkit, и я думаю, что опера тоже не поддерживает css3-страницы, поэтому она не работает. Но не более новые версии IE, несмотря на то, что MSDN подразумевает, что они это делают.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
     <meta charset="utf-8"> 
     <style type="text/css"> 
     @page { 
      @top-right { 
       content: "Page " counter(page) " of " counter(pages); 
      } 
     } 
     </style> 
<head> 

<body> 
     <div> 

     Lorem ipsum dolor... 
     /* this gets long, 2 pages of text */ 
     </div> 
</body> 
</html> 
Смежные вопросы