I still have not figured out why I don't get the result I expect from my HTML + CSS. I have made two new examples (one single page and one multi page) that hopefully describe the problem better. Neither file gives the result I want but the errors are different depending if one page or multiple pages are generated.
What I want to get is:
"A first page with a logo in the @left-top box, no content in the @top-center box and an "advanced" footer in the @bottom-center box. Page 2 and up should have a short title in the @top-center box and a page counter in the @bottom-center box."
CSS and HTML can be viewed at https://kagervall.se/SLUdown/onepage.html and https://kagervall.se/SLUdown/multipage.html
The files are also attached:
Hi,
CSS and HTML are available from the links above but I will try to clarify my problem. The CSS that I've think should work is (from https://kagervall.se/SLUdown/generated-margin-content.html):
<style>
/* page size */
@page {
size: 210mm 297mm;
margin-top: 35mm;
margin-bottom: 25mm;
margin-left: 35mm;
margin-right: 35mm;
}
.shorttitle {
string-set: runningTitle content(text);
}
.document-footer {
position: running(firstpageFooter);
}
/* first page */
@page :first {
margin-top: 10mm;
@top-center {
content: none;
}
@left-top {
content: " ";
background-image: url(./SLUlogo_notext.png);
background-position: 60px 0px;
background-repeat: no-repeat;
}
@bottom-center {
content: element(firstpageFooter);
}
}
@page {
@top-center {
content: string(runningTitle);
}
@bottom-center {
content: counter(page) "/" counter(pages)
}
}
firstpageFooter and runningTitle are extracted from the HTML.
<span class="shorttitle" style="display: none;">Short title</span>
<footer class="document-footer">
<div class="footer-container">
<strong>Example of footer <em>containing</em> markup.</strong>
</div>
</footer>
My problem is that in page :first bottom-center I get page counters where I expect my firstpageFooter.
The other link (https://kagervall.se/SLUdown/fixed-margin-content.html) contains the same CSS exept that content property is set with hardcoded strings instead of dynamic/generated content. This time the margin boxes get the content I expect. This makes me belive that my CSS page selectors are correct but something weird happens when I use generated content.
Thank you for your time.
I'm trying to design a template with different margin-top and margin-bottom content on first page than all following pages. The first page should have an empty margin-top and a margin-bottom with "complex" content picked upp from the html. The following pages should have a margin-top with a running title picked up from the html (but no need for complex content) and margin-bottom should have a page counter.
A document that I think (I'm a CSS newbie :-) ) should work is at https://kagervall.se/SLUdown/generated-margin-content.html but the first page margin-bottom gets a page counter instead of the complex footer. A similar document with the generated content replaced with hard coded content string seem to work as I expect https://kagervall.se/SLUdown/fixed-margin-content.html
Should this be possible? Bug in paged.js or my HTML/CSS?
paged.polyfill.js was build from github
chrome 100.0.4896.88 on Debian was used to preview