Supporto browser per numeri di pagina CSS

Quindi sono a conoscenza di questa opzione: Page numbers with CSS/HTML.Supporto browser per numeri di pagina CSS

Sembra essere di gran lunga il modo migliore per aggiungere numeri di pagina a una versione di stampa di una pagina, ma non posso ottenere alcuna variazione di questo per funzionare ovunque. Ho provato sul mio computer Windows 7 in Chrome, Firefox e IE9. Sulla base di alcuni link sembra che questo possa essere supportato in più software proprietario come Prince XML. Questo è supportato dai browser Web per le versioni di stampa?

Ho provato a fare solo un file HTML vuoto e nella testa l'aggiunta di questo tra due tag di stile:

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

ho anche semplificato ancora utilizzare solo content: "TEXT"; per vedere se riesco a ottenere qualcosa da mostrare su. È supportato ovunque? Con "questo" intendo specificamente i tag @page e @bottom-right, dal momento che ho ottenuto il contenuto di funzionare molte volte.

fonte

2013-04-03 David Fritsch

Sembra che no, i media di paging non è supportato da Chrome o Firefox (e forse non IE9 o). CSS3 avrebbe dovuto avere un supporto per i media paginati, ma non sono stato in grado di farlo funzionare. –

Questa è probabilmente la risposta allora. Continuo a trovarlo in risposte e tutorial ma non riesco a trovare alcuna implementazione che funzioni. Suppongo che sia un'altra cosa da ricordare per il futuro. –

È possibile che siano visualizzati altri parametri necessari per i fogli di stile del foglio di paging. Se più "pagine" si trovano su una pagina Web, come stai dichiarando una pagina? –

Questo non sembra funzionare più. Viene visualizzato solo per un breve periodo di tempo e il supporto del browser è stato rimosso!

I contatori devono essere ripristinati prima che possano essere utilizzati, in base a https://developer.mozilla.org/en-US/docs/CSS/Counters.

È possibile impostare il numero di partenza per qualsiasi altra cosa, il valore predefinito è 0.

Esempio:

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

... in teoria. Nel mondo reale solo PrinceXML supporta questo.

fonte

2013-04-06 21:34:22

Questo è bello sapere, ma in realtà non riesco ancora a ottenere questo risultato. Puoi fornire qualche informazione sul tag '@ page'? Questo in realtà viene visualizzato per te? –

Purtroppo, @page non è supportato in Firefox, ma supportato in Chrome 2.0+, IE 8.0+, Opera 6.0+ e Safari 5.0+. '@page: first' è supportato solo in IE8 + e Opera 9.2+. Questo è per [link] (http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/) Ho ottenuto il margine '@ page' su lavorare in FF ma nient'altro. –

Inoltre, la documentazione di Mozilla indica che FF19.0 offre "Supporto di base" per '@ page' [collegamento] (https://developer.mozilla.org/en-US/docs/CSS/@page) in fondo alla pagina che corrisponde alla mia incapacità di far funzionare una qualsiasi delle cose '@ page' eccetto il margine –

Non usando @ Page, ma hanno ottenuto i numeri di pagina CSS puro a lavorare in Firefox 20:

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

Per stampare, fare clic destro nel frame risultati (in basso a destra) e selezionare

Questo frame -> Stampa Telaio ...

Il CSS è

#content { 
    display: table; 
} 

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

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

e l'HTML è

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

fonte

2013-05-20 14:03:46

Ma non è proprio un piè di pagina. Se il testo finisce per più di una pagina, '# pageFooter' finirà sotto il punto in cui il testo finisce nell'ultima pagina. – BoltClock

È vero. Non bello come se @page funzionasse completamente. Suppongo che un trucco potrebbe essere quello di aggiungere spaziatura alla fine dell'ultimo elemento di contenuto per spingere il piè di pagina verso il basso sull'ultima pagina –

Qual è il supporto del browser per questa soluzione? Sul mio Mac con Chrome, Opera e Safari, le intestazioni e i piè di pagina delle tabelle vengono stampati solo all'inizio e alla fine della tabella. Firefox li stampa su ogni pagina, ma il contatore (pagina) funziona solo la prima volta che viene visualizzato. Funziona per te e sto solo facendo qualcosa di sbagliato? – Teepeemm

Ho cercato di implementare media a pagine come bene e ho trovato, in base a questa pagina di Wikipedia, che non c'è il supporto del browser per le caselle di margine ancora. Non c'è da stupirsi che non funzionerebbe!

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

vedere la tabella, grammatica e regole, la sezione scatole di margine. Le caselle di margine sono ciò che è necessario per la numerazione delle pagine e per l'esecuzione di intestazioni e piè di pagina. Ottenere questo implementato mi avrebbe risparmiato il sovraccarico di dover convertire il supporto stampato in PDF.

fonte

2013-07-19 17:52:39 Jimbo

Via Mozilla, (Printing a document)

Questo mette un intestazione e piè di ogni pagina stampata. Funziona bene in Mozilla, ma non così bene in IE e 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>

Il 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; 
}

fonte

2016-03-25 22:40:00 user6115916

funziona per più pagine? – draw

Questo funziona in Firefox, che è buono. Ma non ho trovato un modo per farlo funzionare in Chrome (53) o IE (11) – tombam

Supporto browser per numeri di pagina CSS

risposta

Problemi correlati