2013-04-13 2 views
5

Ho provato a giocare con le funzioni @page e counter(page) di CSS3, ma non riesco a vedere nessun numero di pagina aggiunto all'output di stampa. Non importa quello che faccio, sembra che questo semplicemente non funzioni.Numeri di pagina CSS non funzionanti

mio impalcatura si presenta così:

<!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> 

Il modo in cui sto testando questo fuori è che sto aprendo la pagina nel browser, la stampa in un file PDF e, infine, sto verificando la contenuto. In diversi browser l'output è leggermente diverso, ma da nessuna parte riesco a vedere i numeri di pagina corretti.

SO: Linux Mint

browser: Chromium 25.0.1364.160, Firefox 20.0.1, Opera (ultima da Package Manager)

Tutte le idee?

+0

Non sarebbe necessario ottenere 'counter-reset: page 1' fuori dalla dichiarazione' @ page'? Altrimenti sta reimpostando il numero di pagina per ogni pagina. – Juanjo

+0

Ho spostato questo stile su '' ma questo non ha aiutato. Nulla viene mostrato nella sezione 'top-right' –

+0

Il contatore di pagine viene creato e incrementato automaticamente se il tuo browser supporta le pagine css3, che per quanto ne so non sono nessuna di queste. – dsas

risposta

1

Il supporto del browser per questo non è il massimo.

@page {margin: 2in} è supportato nelle nuove versioni di Firefox, ma non altri parametri di @page. Credo che questo sia vero anche per altri browser.

+0

Questa è anche la mia ipotesi, ma le persone stanno scrivendo di sperimentare con questo markup, quindi sono perso. Non mi dispiacerebbe usare un browser specifico, ma non ho idea di quale dei due funzionerebbe! –

+0

Ho risposto a una domanda simile qui [collegamento] (http://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers/15856287#15856287) e nei commenti collegati a diverse fonti interessanti che potresti trovare utile –

+0

John Biddle, ho già visto il tuo post prima di postare il mio :) Quindi sei stato in grado di vedere i contatori di pagine generati prima, è corretto? Quale browser hai usato? –

0

Il tuo file dovrebbe assomigliare al seguente. Si noti che il contatore di pagine è speciale e non necessita di impostazione e incremento.

Firefox, webkit e penso che anche l'opera non supporti le pagine di css3, quindi non funziona. Nemmeno le versioni più recenti di IE, nonostante MSDN implichi che facciano.

<!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>