This is admittedly an XY problem. The X is How to use HTML to print header and footer on every printed page of a document? in a way that works in Safari 11.1.1. However, this question is specifically about a problem I have with my Y approach described below!
For my document (a résumé), I have a small fixed number of possible "page break" positions, enforced via page-break-inside: avoid
. So it occurs to me that if I could detect the actual page-break location programmatically, then I could use that to de-display:none
a footer element that I had previously set up in that location. That is, my document currently looks like this:
.nobreak {
page-break-inside: avoid;
}
.footer {
display: none;
}
<div class="nobreak">
<h2>Professional Affiliations</h2>
<ul id="affiliations"> ... </ul>
</div>
<div class="footer">footer text</div>
<div class="nobreak">
<h2>Licensure</h2>
<ul id="licensure"> ... </ul>
</div>
<div class="footer">footer text</div>
<div class="nobreak">
<h2>Publications</h2>
<ul id="publications"> ... </ul>
</div>
<div class="footer">footer text</div>
Is there any semi-reliable way to detect whether one of these "footer" elements is at the bottom of a (media print
) physical page, and adjust its display
property based on that?
I strongly suspect that this is impossible — because the newly revealed footer element would cause the page to reflow and move the footer element, and so on in an infinite regress — but I haven't seen it discussed anywhere so I thought I should ask for a definitive answer.