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

Balance columns before "column-span: all" #1914

Closed
pocomane opened this issue Jul 16, 2023 · 11 comments · Fixed by #1934
Closed

Balance columns before "column-span: all" #1914

pocomane opened this issue Jul 16, 2023 · 11 comments · Fixed by #1934
Labels
bug Existing features not working as expected

Comments

@pocomane
Copy link

Is the column-span attribute correctly handled? In my experimentation it seems just ignored, but maybe I am missing something. I used it as a property of an img tag.
@liZe
Copy link
Member

liZe commented Jul 16, 2023

Hi!

Is your problem related to #980? column-span currently only works with direct clients.

@pocomane
Copy link
Author

Sorry, I did a search in the issues already open, but I did not find it. However I am not sure it is related, since my image is a direct child of the only multi-column element (body). However I will make some test to be sure it is not related to that issue. I will try to write a minimal example that reassembles my scenario.

@liZe
Copy link
Member

liZe commented Jul 17, 2023

Then maybe you forgot to set display: block on your image (column-span only works on block-level elements)? A simple example works well for me.

@pocomane
Copy link
Author

There was a <p> tag I forgot about, so what I saw was the effect of #980 . However I am not still able to got a good result:

image

Why the white-space in the top-right section? If I open the same file with firefox I got that area filled by text, as I would expect. The relevant tags are:

<body style="column-count:2;column-fill:auto;">

It contains just a long lorem ipsum text, then:

<img src="https://picsum.photos/536/354" style="display:block;column-span:all;"></img>

@liZe
Copy link
Member

liZe commented Jul 17, 2023

Could you please share a full HTML/CSS sample, so that we can easily reproduce your problem?

@pocomane
Copy link
Author

test.html.zip

@liZe
Copy link
Member

liZe commented Jul 17, 2023

Why do you use column-fill: auto? The default value is balance and balances the content of the columns, that’s probably what you want. auto is designed to fill the first columns sequentially, and to be honest I don’t know what it’s supposed to do with column-span on paged media. If you find any evidence in the specification that the current behaviour is wrong, we can let this issue open to solve the problem, but for now I tend to think that it’s an undefined behaviour and that WeasyPrint is not "wrong" here.

@pocomane
Copy link
Author

I used the column-fill:auto because I want that the last column be fully filled before passing to the next one [1]

However I do not know if the CSS specification mandates a behavior or not. The only things I can say against the weasyprint output are:

  • I do not like it (not very important)
  • I can not see any logic in it (still not very important, as long as someone can)
  • Both chrome and firefox behave differently [2]

[1] In other words, I like this:

Screenshot from 2023-07-19 14-56-04

and I dislike this:

Screenshot from 2023-07-19 14-55-42

[2] Screenshot from firefox:

Screenshot from 2023-07-19 14-53-02

@liZe
Copy link
Member

liZe commented Jul 19, 2023

I can not see any logic in it (still not very important, as long as someone can)

column-fill:auto fills the first column before passing to the next one, that’s exactly what WeasyPrint does. Why do Firefox and Chrome balance columns before the image, even if I didn’t use balance? I can’t see any logic in it 😄.

  • Both chrome and firefox behave differently

We don’t write WeasyPrint following "logic", or what other browsers do. We try to follow the specification. I don’t say that Firefox and Chrome are right or wrong, I want to know what the specification tells in this case.

So, we’ll be happy to implement what’s in the specification! The next step is thus to find in it what we exactly have to do.

@pocomane
Copy link
Author

I don’t say that Firefox and Chrome are right or wrong,

Me neither. I spoke about the two browsers just as a hint that MAYBE a specification exists, and it demands something like that output. But I agree with you that it is not enough to start changing stuff inside WeasyPrint.

The next step is thus to find in it what we exactly have to do.

100% agree also on this but I was not able to find the answer on the W3C specification, so for now I will just switch to the balanced property.

@liZe
Copy link
Member

liZe commented Jul 19, 2023

The answer is in the column-span: all definition:

Content in the normal flow that appears before the element is automatically balanced across all columns in the immediately preceding multi-column line before the element appears […]

@liZe liZe changed the title column-span not working? Balance columns before "column-span: all" Jul 19, 2023
@liZe liZe added the bug Existing features not working as expected label Jul 19, 2023
@sahilrl sahilrl mentioned this issue Aug 6, 2023
Merged
@liZe liZe closed this as completed in #1934 Aug 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix balance columns before "column-span: all"
2 participants
@liZe @pocomane