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.

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

When printing mixed page sizes, the page size before and after the page including the table may become the default size. #1233

Closed
mochimochiki opened this issue Nov 3, 2023 · 5 comments · Fixed by #1234 or #1242
Assignees
Labels

Comments

@mochimochiki
Copy link

mochimochiki commented Nov 3, 2023

Describe the bug
When building HTML that includes page size specifications using @page, the pages before and after the table may revert to the default page size. This seems to occur more often when the table is involved in page break processing.

To Reproduce
Build the following index.html using vs build index.html and check the generated PDF:

<html>
  <head>
    <style>
      @page Landscape { size: A5 landscape; }
      @page Landscape2 { size: A6 landscape; }
      #landscape { page: Landscape; }
      #landscape2 { page: Landscape2; }
    </style>
  </head>
  <body>
    <div id="landscape">
      <h1>A5 landscape</h1>
      <table>
        <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
        <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>
        <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td></tr>
        <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td><td>Row 3, Cell 3</td></tr>
        <tr><td>Row 4, Cell 1</td><td>Row 4, Cell 2</td><td>Row 4, Cell 3</td></tr>
        <tr><td>Row 5, Cell 1</td><td>Row 5, Cell 2</td><td>Row 5, Cell 3</td></tr>
        <tr><td>Row 6, Cell 1</td><td>Row 6, Cell 2</td><td>Row 6, Cell 3</td></tr>
        <tr><td>Row 7, Cell 1</td><td>Row 7, Cell 2</td><td>Row 7, Cell 3</td></tr>
        <tr><td>Row 8, Cell 1</td><td>Row 8, Cell 2</td><td>Row 8, Cell 3</td></tr>
        <tr><td>Row 9, Cell 1</td><td>Row 9, Cell 2</td><td>Row 9, Cell 3</td></tr>
        <tr><td>Row 10, Cell 1</td><td>Row 10, Cell 2</td><td>Row 10, Cell 3</td></tr>
        <tr><td>Row 11, Cell 1</td><td>Row 11, Cell 2</td><td>Row 11, Cell 3</td></tr>
        <tr><td>Row 12, Cell 1</td><td>Row 12, Cell 2</td><td>Row 12, Cell 3</td></tr>
        <tr><td>Row 13, Cell 1</td><td>Row 13, Cell 2</td><td>Row 13, Cell 3</td></tr>
        <tr><td>Row 14, Cell 1</td><td>Row 14, Cell 2</td><td>Row 14, Cell 3</td></tr>
        <tr><td>Row 15, Cell 1</td><td>Row 15, Cell 2</td><td>Row 15, Cell 3</td></tr>
        <tr><td>Row 16, Cell 1</td><td>Row 16, Cell 2</td><td>Row 16, Cell 3</td></tr>
      </table>
    </div>

    <div id="landscape2">
      <h1>A6 landscape</h1>
      <table>
        <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
        <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>
        <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td></tr>
        <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td><td>Row 3, Cell 3</td></tr>
        <tr><td>Row 4, Cell 1</td><td>Row 4, Cell 2</td><td>Row 4, Cell 3</td></tr>
        <tr><td>Row 5, Cell 1</td><td>Row 5, Cell 2</td><td>Row 5, Cell 3</td></tr>
        <tr><td>Row 6, Cell 1</td><td>Row 6, Cell 2</td><td>Row 6, Cell 3</td></tr>
        <tr><td>Row 7, Cell 1</td><td>Row 7, Cell 2</td><td>Row 7, Cell 3</td></tr>
        <tr><td>Row 8, Cell 1</td><td>Row 8, Cell 2</td><td>Row 8, Cell 3</td></tr>
        <tr><td>Row 9, Cell 1</td><td>Row 9, Cell 2</td><td>Row 9, Cell 3</td></tr>
        <tr><td>Row 10, Cell 1</td><td>Row 10, Cell 2</td><td>Row 10, Cell 3</td></tr>
        <tr><td>Row 11, Cell 1</td><td>Row 11, Cell 2</td><td>Row 11, Cell 3</td></tr>
      </table>
    </div>
  </body>
</html>

Expected behavior
The content inside the div specified as A5 landscape should be rendered entirely in A5 landscape mode.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 11 Pro
  • Browser Chromium 119.0.6045.9
  • Version
    • cli: 8.5.0
    • core: 2.25.7

Additional context
I discovered this issue while attempting to build a PDF with mixed page sizes, referencing #751. The primary goal was to output a wide table in landscape orientation pages, which led to the observation of this issue.

@MurakamiShinyu MurakamiShinyu self-assigned this Nov 5, 2023
@MurakamiShinyu
Copy link
Member

@mochimochiki Thanks for discovering this bug! I'm working on fixing it.

@MurakamiShinyu
Copy link
Member

Fixed in #1234.

Test it

@mochimochiki
Copy link
Author

mochimochiki commented Nov 10, 2023

@MurakamiShinyu Thank you for the correction!
After examining the fixed version, I noticed that the issue persists in the following slightly different examples (having thead / tbody ) as well.

<html>
  <head>
    <style>
      @page Landscape { size: A5 landscape; }
      @page Landscape2 { size: A6 landscape; }
      #landscape { page: Landscape; }
      #landscape2 { page: Landscape2; }
    </style>
  </head>
<body>
    <div id="landscape">
      <h1>A5 landscape</h1>
      <table>
        <thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead>
        <tbody>
        <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>
        <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td></tr>
        <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td><td>Row 3, Cell 3</td></tr>
        <tr><td>Row 4, Cell 1</td><td>Row 4, Cell 2</td><td>Row 4, Cell 3</td></tr>
        <tr><td>Row 5, Cell 1</td><td>Row 5, Cell 2</td><td>Row 5, Cell 3</td></tr>
        <tr><td>Row 6, Cell 1</td><td>Row 6, Cell 2</td><td>Row 6, Cell 3</td></tr>
        <tr><td>Row 7, Cell 1</td><td>Row 7, Cell 2</td><td>Row 7, Cell 3</td></tr>
        <tr><td>Row 8, Cell 1</td><td>Row 8, Cell 2</td><td>Row 8, Cell 3</td></tr>
        <tr><td>Row 9, Cell 1</td><td>Row 9, Cell 2</td><td>Row 9, Cell 3</td></tr>
        <tr><td>Row 10, Cell 1</td><td>Row 10, Cell 2</td><td>Row 10, Cell 3</td></tr>
        <tr><td>Row 11, Cell 1</td><td>Row 11, Cell 2</td><td>Row 11, Cell 3</td></tr>
        <tr><td>Row 12, Cell 1</td><td>Row 12, Cell 2</td><td>Row 12, Cell 3</td></tr>
        <tr><td>Row 13, Cell 1</td><td>Row 13, Cell 2</td><td>Row 13, Cell 3</td></tr>
        <tr><td>Row 14, Cell 1</td><td>Row 14, Cell 2</td><td>Row 14, Cell 3</td></tr>
        <tr><td>Row 15, Cell 1</td><td>Row 15, Cell 2</td><td>Row 15, Cell 3</td></tr>
        <tr><td>Row 16, Cell 1</td><td>Row 16, Cell 2</td><td>Row 16, Cell 3</td></tr>
        </tbody>
      </table>
    </div>

    <div id="landscape2">
      <h1>A6 landscape</h1>
      <table>
        <thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead>
        <tbody>
        <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>
        <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td></tr>
        <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td><td>Row 3, Cell 3</td></tr>
        <tr><td>Row 4, Cell 1</td><td>Row 4, Cell 2</td><td>Row 4, Cell 3</td></tr>
        <tr><td>Row 5, Cell 1</td><td>Row 5, Cell 2</td><td>Row 5, Cell 3</td></tr>
        <tr><td>Row 6, Cell 1</td><td>Row 6, Cell 2</td><td>Row 6, Cell 3</td></tr>
        <tr><td>Row 7, Cell 1</td><td>Row 7, Cell 2</td><td>Row 7, Cell 3</td></tr>
        <tr><td>Row 8, Cell 1</td><td>Row 8, Cell 2</td><td>Row 8, Cell 3</td></tr>
        <tr><td>Row 9, Cell 1</td><td>Row 9, Cell 2</td><td>Row 9, Cell 3</td></tr>
        <tr><td>Row 10, Cell 1</td><td>Row 10, Cell 2</td><td>Row 10, Cell 3</td></tr>
        <tr><td>Row 11, Cell 1</td><td>Row 11, Cell 2</td><td>Row 11, Cell 3</td></tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

image

@MurakamiShinyu
Copy link
Member

Sorry, it seems the fix #1234 was incomplete. Reopen.

@MurakamiShinyu
Copy link
Member

Fixed in #1242.

Test it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment