Obsługa przeglądarek dla numerów stron CSS

Tak więc wiem o tej opcji: Page numbers with CSS/HTML.Obsługa przeglądarek dla numerów stron CSS

Wydaje się zdecydowanie najlepszym sposobem dodawania numerów stron do wersji drukowanej strony, ale nie mogę uzyskać żadnej odmiany tego do pracy w dowolnym miejscu. Próbowałem na moim komputerze z Windows 7 w Chrome, Firefox i IE9. Na podstawie niektórych linków wygląda na to, że może być obsługiwany w bardziej zastrzeżonym oprogramowaniu, takim jak Prince XML. Czy jest to obsługiwane przez przeglądarki internetowe dla wersji drukowanych?

Próbowałem dokonywania tylko pusty plik HTML i w głowie dodając ten pomiędzy dwoma tagami style:

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

Mam również uproszczone nawet po prostu użyć content: "TEXT"; aby zobaczyć, czy mogę coś pokazać w górę. Czy jest to obsługiwane w dowolnym miejscu? Przez "to" mam na myśli znaczniki @page i @bottom-right, ponieważ otrzymałem wiele treści do pracy.

Źródło

2013-04-03 David Fritsch

Wydaje się, że nie, pager nie jest obsługiwana przez Chrome lub Firefox (i może nie IE9 albo). CSS3 miał mieć pewne wsparcie dla stronicowanych mediów, ale nie byłem w stanie go uruchomić. –

To jest prawdopodobnie odpowiedź. Wciąż znajduję to w odpowiedziach i tutorialach, ale nie mogę znaleźć żadnej implementacji, która działa. Sądzę, że to kolejna rzecz, o której należy pamiętać w przyszłości. –

Jest możliwe, że są inne parametry wymagane do wyświetlania stronicowanych arkuszy stylów nośnika. Jeśli na stronie internetowej znajduje się wiele "stron", w jaki sposób deklarujesz stronę? –

To już nie działa. Wygląda na to, że działało to tylko przez krótki czas i obsługa przeglądarki została usunięta!

Liczniki należy zresetować przed użyciem, zgodnie z https://developer.mozilla.org/en-US/docs/CSS/Counters.

Można ustawić swój numer startowy na cokolwiek, domyślnym jest 0.

Przykład:

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

... w teorii. W prawdziwym świecie tylko PrinceXML obsługuje to.

Źródło

2013-04-06 21:34:22

Dobrze to wiedzieć, ale nadal nie mogę tego uzyskać. Czy możesz podać jakiś wgląd w tag '@ page'? Czy to faktycznie wyświetla się dla ciebie? –

Niestety strona @ nie jest obsługiwana w przeglądarce Firefox, ale jest obsługiwana w przeglądarkach Chrome 2.0+, IE 8.0+, Opera 6.0+ i Safari 5.0+. '@page: first' jest obsługiwane tylko w IE8 + i Opera 9.2+. To jest za [link] (http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/) Otrzymałem margines '@ page' pracują w FF, ale nic poza tym. –

Dokumentacja Mozilli stwierdza, że FF19.0 oferuje "Podstawową pomoc" dla '@ strony' [link] (https://developer.mozilla.org/en-US/docs/CSS/@page) u dołu strony, która pasuje do mojej niezdolności do pracy z '@ page' do pracy z wyjątkiem marginesu –

Nie używając @Page, ale mam zdobyć czystych numery stron CSS do pracy w Firefoksie 20:

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

Aby wydrukować, kliknij prawym przyciskiem w ramce wyników (na dole po prawej) i wybierz

to Frame -> Drukuj ramkę ...

CSS jest

#content { 
    display: table; 
} 

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

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

i HTML jest

<div id="content"> 
    <div id="pageFooter">Page </div> 
    multi-page content here... 
</div>

Źródło

2013-05-20 14:03:46

Ale to naprawdę nie jest stopka strony. Jeśli tekst kończy się na więcej niż jednej stronie, '# pageFooter' kończy się pod miejscem, w którym tekst kończy się na ostatniej stronie. – BoltClock

To prawda. Nie tak fajnie, jak gdyby strona w pełni działała. Przypuszczam, że jednym z hacków mogłoby być dodanie odstępów na końcu ostatniego elementu treści, aby przesunąć stopkę na ostatniej stronie. –

Jakie jest wsparcie dla tego rozwiązania dla przeglądarki? Na moim Macu z Chrome, Operą i Safari nagłówki i stopki tabeli są drukowane tylko na początku i na końcu tabeli. Firefox drukuje je na każdej stronie, ale licznik (strona) działa tylko przy pierwszym wyświetleniu. Czy to działa dla ciebie i robię coś złego? – Teepeemm

Próbuję zaimplementować mediów Paged, jak również i odkryli, według tej stronie Wikipedia, że nie ma wsparcia dla pól przeglądarka depozytów zabezpieczających, jak dotychczas. Nic dziwnego, że to nie zadziała!

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

Patrz tabela, gramatyki i zasad, sekcję pola margines. Pola marginesów są potrzebne do numerowania stron oraz do uruchamiania nagłówków i stopek. Wykonanie tej operacji pozwoliłoby zaoszczędzić mi czasu na przekształcenie drukowanych nośników w PDF.

Źródło

2013-07-19 17:52:39 Jimbo

Via Mozilla, (Printing a document)

Stawia to nagłówek i stopkę na każdej drukowanej stronie. Działa to dobrze w Mozilli, ale nie tak dobrze w IE i 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; 
}

Źródło

2016-03-25 22:40:00 user6115916

czy to działa dla wielu stron? – draw

Działa to w przeglądarce Firefox, co jest dobre. Ale nie znalazłem sposobu na sprawdzenie, czy działa w Chrome (53) lub IE (11) – tombam

Obsługa przeglądarek dla numerów stron CSS

Odpowiedz

Powiązane problemy