Seitennummerierung in printversion eines HTML Dokumentes

[mbr]

Hallo Forum,
ich habe ein - per PHP - dynamisch generiertes HTML Dokument, bei dem ich im Ausdruck unten eine Seitennummerierung in etwa nach folgendem Muster einfügen möchte:

Seite x von y

Ich bin mir bewußt, dass ich dieses Feature im Browser bereits habe (und nach Belieben ein/ausschalten kann). Ich würde die Seitennummerierung aber gerne selbst steuern. Hintergrund: in einer späteren Erweiterung sollen evtl. mehrere Dokumente zu einem HTML-Dokument zusammengefasst werden, wobei trotzdem jedes Einzeldokument seine eigene Seitennummerierung haben soll.

Ich hatte zunächst an eine Lösung mit Javascript gedacht, bin aber schon an der korrekten Ermittelung der Anzahl Seiten für ein einzelnes Dokument gescheitert. Bei meiner Suche im Netz habe ich diverse Seiten gefunden, die sich mit diesem Thema auseinandersetzen und bin dabei darauf gestoßen, dass es mit CSS funktionieren könnte. Leider hat folgender CSS-Schnipsel in meinem Druckstylesheet bei mir keinerlei Auwirkungen gehabt

@page {  
    @bottom {  
	content: "Page " counter(page) " of " counter(pages)  
    }  
}

Ich hatte erwartet, dass ich zumindest in der Druckvorschau dann

Page x of y

sehe (die dann noch nötigen Anpassungen hätte ich mir noch zugetraut ;-)). Das Problem ist, dass ich überhaupt keinen footer text sehe (getestet in IE10 und FF24.0). Mich würde interessieren, ob mein Vorhaben überhaupt realisierbar ist. Und falls ja, mit CSS oder doch eher mit Javascript? Ich hatte sogar darüber nachgedacht, Serverseitig PDF-Dateien zu generieren... Wäre für Denkanstöße sehr dankbar.

Falls noch jemand mein Javascript Versuch interessiert (obwohl ich als Thema jetzt CSS gewählt habe, da mir schien, dass Javascript vielleicht ein Holzweg war) - leider kann ich im Moment kein passend gekürztes online Beispiel zeigen, da ich zurzeit noch alles lokal auf meinem Rechner habe.

  
function seitenformat()  
{  
    var nDocId = document.getElementsByName("documentId")[0].value;  
	var pxPerCm = document.getElementById("test1").offsetHeight;  
	var oArticleTable = document.getElementsByTagName("table")[1];  
	var oContainer = document.getElementById("doc"+nDocId);  
	var nSeitenzahl = 1;  
	var aoTr = oArticleTable.getElementsByTagName("tr");  
	var i = 0;  
	var oEl = document.getElementById("doc"+nDocId+"_seite0");  
	  
	while(oEl)  
	{  
		oEl.parentNode.removeChild(oEl);  
		i++;  
		oEl = document.getElementById("doc"+nDocId+"_seite" + i);  
	}  
	  
	nSeitenzahl = (oContainer) ? (parseInt(oContainer.offsetHeight/(pxPerCm*24.09)) + 1) : 1;  
	alert("pixel pro cm:"+pxPerCm+"\ncontainer height in px:"+oContainer.offsetHeight+"\ncontainer height in cm:"+oContainer.offsetHeight/pxPerCm);  
		  
	  
	  
	if(nSeitenzahl > 1)  
	{  
		for(i=0;i<nSeitenzahl;i++)  
		{  
			if(!document.getElementById("doc"+nDocId+"_seite" + i))  
			{  
				var oSeitenzahl = document.createElement("div");  
				oSeitenzahl.style.position = "absolute";  
				oSeitenzahl.style.width = mbr.getComputedStyle(oArticleTable, "width");  
				oSeitenzahl.style.textAlign = "center";  
				oSeitenzahl.style.top = (26.0*i+25)+"cm";  
				oSeitenzahl.id = "doc"+nDocId+"_seite" + i;  
				oSeitenzahl.innerHTML = "Seite " + (i+1) + " von " + nSeitenzahl;  
				oContainer.appendChild(oSeitenzahl);  
			}  
		}  
	}  
}  

Viele Grüße und vielen Dank schonmal für alle Kommentare

mbr