Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Left and right margin after :first page bug #272

Open
jumarub opened this issue Feb 16, 2024 · 1 comment
Open

Left and right margin after :first page bug #272

jumarub opened this issue Feb 16, 2024 · 1 comment

Comments

@jumarub
Copy link

jumarub commented Feb 16, 2024 •
edited
Loading

Hello, good day.
As mentioned in this conversation:
link
There is an error occurring when defining margins on the first page (@page:first) and the default page (@page). The issue is that some blank margins are being generated, as shown in the attached photos. In my case, the same problem occurs. I have the following configuration, and after the first page, these blank "margins" start to appear, breaking the visibility.

I have this configuration, maybe there is something wrong with my code?

        @page :first{
            margin-top: 5mm;
            margin-left: 5mm;
            margin-bottom: 5mm;

            @bottom-right{
                content: none;
            }

            @bottom-left{
                content: none;
            }
        }

        @page {
            margin-top: 3.3cm;
            margin-left: 1.5cm;
            margin-right: 1.5cm;
            margin-bottom: 1.7cm;
           }

image

first page
Screenshot 2023-11-15 at 9 47 21 AM

second page
Screenshot 2023-11-15 at 9 47 31 AM
@pbrant
Copy link
Member

pbrant commented Mar 20, 2024

Sorry for the late response here. The CSS looks good to me. This is a bug, but unfortunately one that's pretty hard to fix.

Flying Saucer started life as a Java2D (screen) media CSS renderer. The paged media (PDF) support basically treats the document as an infinitely long page and slides boxes around to make pages break nicely. What's happening in your example is that <body> is getting its width set from the first page and, in turn, the <p> on the second page is taking its width from .

When the page is rendered, the content is shifted and clipped to the page's content area, hence the chopped off text.

In terms of workarounds, here are a couple:

  • Setting an explicit width on the <p> on the second page.
  • Using named pages [ https://drafts.csswg.org/css-page-3/#using-named-pages ]

Would either of those work for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pbrant @jumarub