WeasyPrint icon indicating copy to clipboard operation
WeasyPrint copied to clipboard

Image bleed while preserving the page margins for other content

Open dkrasnikow opened this issue 7 months ago • 1 comments

Not sure if what I am asking is indeed possible, but I've spent (in vain) quite a lot of time trying to make images "bleed" over the page margins (not the actual page size) while preserving the margins for all the other page contents.

The use case is as follows - I am currently creating a user guide for a client that includes interface screenshots. The customer has requested all the screenshots to be full-screen (meaning they include the whole UI and arent't cropped). Fitting a 1080p image on a portrait page while still preserving "readability" is, as you may guess, not the easiest task. Thus, to get a bit more space, I thought of the following:

  1. All pages are set to standard margins.
  2. Whenever we have an image, we allow that image to "bleed" over the margins, taking more width and going beyond standard margins - so we can make it larger.
  3. All the other content stays within margins, obviously.

In theory, looks great, but so far I failed at implementing that miserably. Maybe someone here could drop a hint? Thanks in advance!

dkrasnikow avatar May 12 '25 15:05 dkrasnikow

Hi!

Did you try to set a width, and negative margins on left and right sides of the image? That’s a common way to get CSS boxes bleeding over page margins.

liZe avatar May 12 '25 16:05 liZe