I have a CSS file that defines headers and footers using @top-center, @bottom-center,

Page margins are broken with "body { overflow: auto }" style about weasyprint HOT 9 CLOSED

kozea commented on May 29, 2024

Page margins are broken with "body { overflow: auto }" style

from weasyprint.

Comments (9)

ksaylor commented on May 29, 2024

I was able to figure out what the problem was. I had some parameters defined in the body{} that were causing the problem.

from weasyprint.

SimonSapin commented on May 29, 2024

I don’t get it. What was the problem? A syntax error that caused the rule to be ignored?

By the way, you might want to use padding-top rather than \a \a \a in content.

from weasyprint.

SimonSapin commented on May 29, 2024

Closing as this seems solved. But I’m still curious as to what was the issue and the solution, if you feel like commenting.

from weasyprint.

ksaylor commented on May 29, 2024

Unfortunately, I didn't keep any revision control on the files, so I'm not quite sure what I changed :-( Suffice it to say, that it was my ignorance and not a problem with WeasyPrint.

from weasyprint.

ksaylor commented on May 29, 2024

By the way, thanks for the tip about padding-top!

from weasyprint.

dxiao2003 commented on May 29, 2024

For me it didn't work while I had "overflow: auto" on the <body> element. Removing that made the text box appear.

from weasyprint.

liZe commented on May 29, 2024

For me it didn't work while I had "overflow: auto" on the element. Removing that made the text box appear.

Great! body { overflow: auto } breaks the margins for some reason. Minimal case:

<style>
  @page { @top-left { content: 'test' } }
  body { overflow: auto }
</style>
body

from weasyprint.

Tontyna commented on May 29, 2024

This wasn't a bug. This was intentional 😏

WeasyPrint treats all overflow values but visible like hidden.
The spec tells us that

UAs must apply the overflow-* values set on the root element to the viewport.

The viewport in our case is the PageBox (= all pages) and thus the PageBox is clipped, cutting off every single piece of content outside the page box:

WeasyPrint/weasyprint/draw.py

Lines 226 to 231 in 27c600f

 if box.style['overflow'] != 'visible': 

 # Only clip the content and the children: 

 # - the background is already clipped 

 # - the border must *not* be clipped 

 rounded_box_path(context, box.rounded_padding_box()) 

 context.clip()

Obviously, the actual intent of this viewport-overflow is to clip the body, resp. the document content. It should not devour the @page margin content.
But when we draw the MarginBoxes (being children of the PageBox) after the PageBox has clipped the context to the inner area of the page (rounded_padding_box)...

from weasyprint.

liZe commented on May 29, 2024

This wasn't a bug. This was intentional

For sure 😉.

Obviously, the actual intent of this viewport-overflow is to clip the body, resp. the document content. It should not devour the @page margin content.

We have other similar workarounds to draw and clip the viewport background. The special cases needed to draw the viewport (and draw the root element a bit differently) are a mess, just like the mess created by the table wrappers. We have to live with that, I think…

from weasyprint.

Page margins are broken with "body { overflow: auto }" style about weasyprint HOT 9 CLOSED

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	if box.style['overflow'] != 'visible':
	# Only clip the content and the children:
	# - the background is already clipped
	# - the border must not be clipped
	rounded_box_path(context, box.rounded_padding_box())
	context.clip()