I have the following challenge:

The publication I'm working on allows images to bleed into the margins (using negative margin CSS).
This works well, but when I have an image floated to the page bottom and bleed into the footer region, where I display the page numbers and publication name, those remain on top of the image.

How can I have the bleeding image always cover the footer region?

Thank you!

Here's an example of an image bleeding to the page margin, using a named page without page numbers:

https://css4.pub/2022/float/#deferring-to-a-page

Perhaps this approach would work for your use case?

Thank you, @howcome, that helped.

The only issue now is that Prince adds a page break before the image that references the @page rule. How can I avoid this?

EDIT:
Prince adds the page break by default:
"Prince will create a page break between elements belonging to different named pages."
https://www.princexml.com/doc/paged/

It would be good if there was a way to avoid this.

Edited 21 Jun 2022 by ThePrintingSquirrel

Here's an example that nulls a string when a page float appears. A pseudo-element brings the counter back.

@page {
  @bottom { content: string(bottom) }
}
body { string-set: bottom counter(page) }
div { float: bottom; background: beige; string-set: bottom "" }
div:after { content: ""; string-set: bottom counter(page) }

Please find complete example in attached file. There should be a more straightforward way to do this, but I think the approach will work. Let us know.

1. bar.html‎ 1.6 kB

Edited 21 Jun 2022 by howcome

Hi @howcome,

that is a great solution, thank you. I can confirm it works in my case. Here is my code with a CSS variable since I use separate CSS files. I had to give the ::after content either a positioning or display property for it to work.

Default folio CSS file:

body {
	--companyName: counter(page) " \00a0 \00a0 \00a0 \00a0 My Company";
	string-set: companyName var(--companyName);
}
@bottom-left {
	content: string(companyName);
}

Main CSS file with bottom-floated bleeding image:

.pdf-float-bottom.pdf-bleed {
	string-set: companyName '';
}
.pdf-float-bottom.pdf-bleed::after {
	content: '';
	string-set: companyName var(--companyName);
	/* Needs to have either 'position' or 'display' property set */
	position: absolute;
	/* Just to make sure nothing is displayed on the page */
	left: -9999em;
}

Thank you so much for your help solving this one!

Great, thanks for sharing your code!