web-dev-qa-db-fra.com

Prise en charge du navigateur pour les numéros de page CSS

Je connais donc cette option: Numéros de page avec CSS/HTML .

Cela semble de loin être le meilleur moyen d'ajouter des numéros de page à une version imprimée d'une page, mais je ne peux obtenir aucune variation de cela pour fonctionner n'importe où. J'ai essayé ma machine Windows 7 dans Chrome, Firefox et IE9. Sur la base de certains des liens, il semble que cela puisse être pris en charge dans des logiciels plus propriétaires comme Prince XML. Est-ce pris en charge par les navigateurs Web pour les versions imprimées?

J'ai essayé de faire juste un fichier html vierge et dans la tête en ajoutant ceci entre deux balises de style:

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

Je l'ai également simplifié pour n'utiliser que content: "TEXT"; pour voir si je peux faire apparaître quelque chose. Est-ce pris en charge n'importe où? Par "ceci", je veux dire spécifiquement le @page et @bottom-right tags, car j'ai fait fonctionner le contenu plusieurs fois.

cssprintingcross-browsercss-paged-media
38
David Fritsch

Cela ne semble plus fonctionner. Apparemment, cela n'a fonctionné que pendant une courte période et la prise en charge du navigateur a été supprimée!

Les compteurs doivent être réinitialisés avant de pouvoir être utilisés, selon https://developer.mozilla.org/en-US/docs/CSS/Counters .

Vous pouvez définir votre numéro de départ à n'importe quoi, la valeur par défaut est 0.

Exemple:

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

... en théorie. Dans le monde réel, seul PrinceXML le prend en charge.

3
John Biddle

J'ai également essayé d'implémenter des médias paginés et j'ai découvert, selon cette page Wikipedia, qu'il n'y a pas encore de navigateur pour les zones de marge. Pas étonnant que ça ne marche pas!

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

Voir le tableau, Grammaire et règles, section des zones de marge. Les zones de marge sont nécessaires pour la numérotation des pages ainsi que pour l'exécution des en-têtes et pieds de page. Faire en sorte que cela soit mis en œuvre me permettrait d'économiser les frais généraux liés à la conversion des supports imprimés en PDF.

16
Jimbo

Ne pas utiliser @page, mais j'ai obtenu des numéros de page CSS purs pour fonctionner dans Firefox 20:

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

Pour imprimer, faites un clic droit dans le cadre de résultats (en bas à droite) et sélectionnez

Ce cadre -> Cadre d'impression ...

Le CSS est

#content {
    display: table;
}

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

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

et le HTML est

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

Via Mozilla, ( Impression d'un document )

Cela met un en-tête et un pied de page sur chaque page imprimée. Cela fonctionne bien dans Mozilla, mais pas si bien dans IE et 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>

Le 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;
}
2
user6115916