Hi

I am trying to use xhtml to produce a web page which will then be converted to pdf using prince. My key requirement is that I want to display paginated pages in the web browser (ie, firefox, opera, ie, etc) so that the page breaks occur in EXACTLY the same place as those in the pdf - WYSIWYG;-). I also want to display repeating page headers/footers in the web page and in the pdf.

I have got this working fine in the pdf using prince and the @page rule. The problem is that I cant see how to request (not force) a browser to paginate the xhtml using the @page rule. I know that the css3 page-break-[before|after|inside] elements can we used to force a break, but I dont want to force the breaks - I want then to be automatically applied given the page size (A4, A5, etc). I understand that firefox and opera are CSS2 and partially CSS3 compliant (not quite sure about IE).

Here is my complete @page rule:

@page hypo {
size: A4 landscape;
margin: 21mm;
padding: 8mm 0 5mm;
border-bottom: thin solid black;

@bottom-right {
font: 12pt "Georgia", serif;
content: "page " counter(page);
vertical-align: bottom;
margin: 0.3em 0;
}

@top-left {
font: 24pt "Georgia", serif;
content: "TopLeftHeader";
vertical-align: bottom;
margin: 0.3em 0;
}

@top-right {
font: 24pt "Georgia", serif;
content: "TopRightHeader;
vertical-align: bottom;
margin: 0.3em 0;
}

@bottom {
border: thin solid black;
content: content();
padding-top: 0.3em;
margin-top: 0.6em;
}

}

This creates a lovely pdf in prince, but does nothing in a web browser. Therefore either these browsers are not compliant with the @page rule or my css is not correct or I am "barking up the wrong tree". The only potential work-around I can think of is to define a separate css for "print" media and another css for "screen" media. However I dont want to go down that route until I exhaust the alternatives.

These are the browsers I am testing this code on:

opera 8.51
firefox 1.5
IE 6.0.2900

Any ideas how I can do this?

please ignore this posting - we decided that this was not a valid design concept - we are working around this.

Just for informational purposes, you should know that the only way to achieve this in a web-page is to serve each actual page of the document as separate web-pages.

That or using something like S5(http://www.meyerweb.com/eric/tools/s5/) to mimic the use of the page.