webentwicklung-frage-antwort-db.com.de

Browser-Unterstützung für CSS-Seitenzahlen

Daher ist mir diese Option bekannt: Seitenzahlen mit CSS/HTML .

Es scheint bei weitem der beste Weg zu sein, einer Druckversion einer Seite Seitenzahlen hinzuzufügen, aber ich kann keine Variation davon bekommen, um irgendwo zu funktionieren. Ich habe es auf meinem Windows 7-Computer in Chrome, Firefox und IE9 versucht. Basierend auf einigen Links scheint dies in proprietärer Software wie Prince XML unterstützt zu werden. Wird dies von Webbrowsern für Druckversionen unterstützt?

Ich habe versucht, nur eine leere HTML-Datei zu erstellen und diese im Kopf zwischen zwei Style-Tags einzufügen:

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

Ich habe es auch vereinfacht, nur content: "TEXT"; um zu sehen, ob ich etwas zum Auftauchen bekomme. Wird das irgendwo unterstützt? Damit meine ich konkret das @page und @bottom-right-Tags, da ich Inhalte oft zum Arbeiten gebracht habe.

38
David Fritsch

Das scheint nicht mehr zu funktionieren. Scheint nur für kurze Zeit funktioniert zu haben und die Browserunterstützung wurde entfernt!

Zähler müssen gemäß https://developer.mozilla.org/en-US/docs/CSS/Counters zurückgesetzt werden, bevor sie verwendet werden können.

Sie können Ihre Startnummer auf einen beliebigen Wert einstellen. Die Standardeinstellung ist 0.

Beispiel:

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

... in der Theorie. In der realen Welt unterstützt dies nur PrinceXML.

3
John Biddle

Ich habe versucht, auch Seitenmedien zu implementieren, und laut dieser Wikipedia-Seite gibt es noch keine Browserunterstützung für Randfelder. Kein Wunder, dass es nicht klappen würde!

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

Siehe Tabelle, Grammatik und Regeln, Abschnitt Randfelder. Randfelder werden für die Seitennummerierung sowie für die Ausführung von Kopf- und Fußzeilen benötigt. Die Implementierung dieser Funktion erspart mir den Aufwand, die gedruckten Medien in PDF zu konvertieren.

16
Jimbo

@Page wird nicht verwendet, aber ich habe reine CSS-Seitenzahlen für Firefox 20 erhalten:

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

Klicken Sie zum Drucken mit der rechten Maustaste in den Ergebnisrahmen (rechts unten) und wählen Sie

Dieser Rahmen -> Rahmen drucken ...

Das CSS ist

#content {
    display: table;
}

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

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

und der HTML ist

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

Über Mozilla ( Dokument drucken )

Dadurch wird auf jeder gedruckten Seite eine Kopf- und Fußzeile eingefügt. Dies funktioniert gut in Mozilla, aber nicht ganz so gut in IE und 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>

Das 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