We are using a background image on some pages in the footer area. The footer text (with the page numbers) sits on top of the background images.

But the text is near invisible on the pages with background images. Is there a way to add a text background colour to have it stand out?

I tried defining a new named page to change the font colour like so:

.my-trigger-class {
page: whiteFont;
}
@page whiteFont:right {
    @bottom-right {
         color: #fff;
   }
}

but while it does change the font colour, it does not inherit any of the previously defined footer styles of @bottom-right, and it inserts a page break for the element with the class "my-trigger-class".

Another thing I tried is the experimental CSS of text-stroke, but that's not yet supported by PrinceXML.
"text-shadow" only yields unsatisfactory results.

Thank you for your help!

Could you post an image showing your intended rendering?

Something like this, either with the font in white (preferred) or the background in white as shown in the image.

1. Capture.JPG‎ 45.7 kB

Here's a simple solution.

1. foo.html‎ 0.5 kB
2. foo.pdf‎ 83.0 kB

Edited 23 Aug 2023 by howcome

Try this

@page {
    /* Define your global page styles here */
}

/* Target the footer element */
.footer {
    position: relative;
}

/* Create a pseudo-element for the background color */
.footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%; /* Adjust as needed */
    background-color: rgba(255, 255, 255, 0.8); /* Use your desired background color */
    pointer-events: none; /* Prevent the pseudo-element from interfering with the content */
    z-index: -1; /* Place the pseudo-element below the text */
}

I hope this helps..