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

Incorrect float positioning at page start #1292

Open
MurakamiShinyu opened this issue Feb 28, 2024 · 2 comments
Open

Incorrect float positioning at page start #1292

MurakamiShinyu opened this issue Feb 28, 2024 · 2 comments
Labels
bug

Comments

@MurakamiShinyu
Copy link
Member

MurakamiShinyu commented Feb 28, 2024 •
edited
Loading

Test sample: float-margin-test.html

<style>
body {
  margin: 0;
}
p {
  margin: 20px 0;
}
figure {
  float: left;
  margin: 10px;
  background: cyan;
}
</style>
<body>
  <figure>FLOAT</figure>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero tempore quam fugit quibusdam amet facilis perspiciatis itaque ipsa pariatur a minima, assumenda quis nobis quisquam ex alias soluta id ipsum. Eligendi, excepturi error veritatis voluptates minima sed? Recusandae ipsam repellat quaerat.</p>
  <figure>FLOAT</figure>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quos in cumque odit possimus eum velit voluptate libero repellendus alias molestiae error, eius rerum ratione commodi a vel cum dolores!</p>
  <figure>FLOAT</figure>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit, in obcaecati. Molestias ipsa ex maiores odio doloribus nisi dolore distinctio libero suscipit quos, inventore, repudiandae mollitia, neque delectus placeat! Fugiat.</p>
…

Test with Vivliostyle Viewer (v2.27.0):
https://vivliostyle.github.io/viewer/v2.27.0/#src=https://gist.githack.com/MurakamiShinyu/ec57c870f6a62348a0b3f279dc4b284b/raw/float-margin-test.html

Result screenshot:

Screenshot 2024-02-28 14 32 04

Expected result:

Screenshot 2024-02-28 14 54 40
MurakamiShinyu added a commit that referenced this issue Mar 3, 2024
@MurakamiShinyu
fix: Top margin of floats at page start should be kept
6c1fb7f 
- #1292
@MurakamiShinyu MurakamiShinyu mentioned this issue Mar 3, 2024
Merged
@MurakamiShinyu
Copy link
Member Author

In this test case, the problems on page 1 and page 2 are different. There are following two problems:

  • Problem 1: The block-start position of the first float's margin edge should be affected by the block-start margin of the first paragraph even though the float element is followed by the paragraph element, because the block-start margin of the paragraph is collapsed with the block-start margin of the body element.

  • Problem 2: The block-start margin of floats should not be discarded at unforced page breaks. The CSS spec is not clear about this, but auto-discarding the block-start margin of floats at unforced page breaks causes inconsistent look at page breaks, so we should avoid it.

@MurakamiShinyu
Copy link
Member Author

PR #1297 resolves Problem 2.

  • Problem 2: The block-start margin of floats should not be discarded at unforced page breaks. The CSS spec is not clear about this, but auto-discarding the block-start margin of floats at unforced page breaks causes inconsistent look at page breaks, so we should avoid it.

Test: https://gist.githack.com/MurakamiShinyu/ec57c870f6a62348a0b3f279dc4b284b/raw/float-margin-test.html

Screenshot 2024-03-03 11 13 00

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

No branches or pull requests
1 participant
@MurakamiShinyu