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

Так что я знаю об этой опции: Page numbers with CSS/HTML.Поддержка браузера для номеров страниц CSS

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

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

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

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

источник

2013-04-03 David Fritsch

Оказывается, что нет, выгружаемого носитель не поддерживается хром или Firefox (и, возможно, не IE9 либо). Предполагалось, что CSS3 будет иметь некоторую поддержку для постраничного мультимедиа, но мне также не удалось заставить его работать. –

Это, скорее всего, ответ. Я продолжаю находить это в ответах и учебниках, но не могу найти никакой реализации, которая работает. Угадайте, это еще одна вещь, которую нужно помнить в будущем. –

Возможно, существуют другие параметры, необходимые для отображения таблиц стилей подкачки. Если на странице есть несколько «страниц», как вы объявляете страницу? –

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

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

источник

2013-04-06 21:34:22

Это хорошо знать, но я до сих пор не получаю этого, чтобы выводить что-либо. Можете ли вы дать представление о теге '@ page'? Это действительно отображается для вас? –

К сожалению, @page не поддерживается в Firefox, но поддерживается в Chrome 2.0+, IE 8.0+, Opera 6.0+ и Safari 5.0+. '@page: first' поддерживается только в IE8 + и Opera 9.2+. Это по [link] (http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/) Я получил поле '@ page' для работать в FF, но больше ничего. –

Кроме того, в документации Mozilla говорится, что FF19.0 предлагает «базовую поддержку» для '@ page' [link] (https://developer.mozilla.org/en-US/docs/CSS/@page) нижней части страницы, которая соответствует моей неспособности работать с любым материалом '@ page', кроме поля –

Не используя @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>

источник

2013-05-20 14:03:46

Но это не действительно нижний колонтитул страницы. Если текст заканчивается более чем одной страницей, '# pageFooter' окажется ниже, где текст заканчивается на последней странице. – BoltClock

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

Какова поддержка браузера для этого решения? На моем Mac с Chrome, Opera и Safari верхние и нижние колонтитулы таблицы печатаются только в начале и в конце таблицы. Firefox печатает их на каждой странице, но счетчик (страница) работает только при первом отображении. Это работает для вас, и я просто делаю что-то неправильно? – Teepeemm

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

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

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

источник

2013-07-19 17:52:39 Jimbo

Via Mozilla, (Printing a document)

Это ставит верхний и нижний колонтитулы на каждой печатной странице. Это хорошо работает в 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; 
}

источник

2016-03-25 22:40:00 user6115916

Это работает для нескольких страниц? – draw

Это работает в Firefox, что хорошо. Но я не нашел способ заставить его работать в Chrome (53) или IE (11) – tombam

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

ответ

Смежные вопросы