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

Simple flex with fit-content looks different in browser printing pdf and weasyprint #1727

Closed
manuel-koch opened this issue Sep 23, 2022 · 7 comments
Closed

Simple flex with fit-content looks different in browser printing pdf and weasyprint #1727

manuel-koch opened this issue Sep 23, 2022 · 7 comments
Labels
bug Existing features not working as expected

Comments

@manuel-koch
Copy link

While trying to use flex items with fit-content style I'm trying to find something that works as expected.
Using weasyprint 56.1.

E.g. the following looks good in browser and when printed with browser, but looks odd with weasyprint:

<html>
<head>
<style>
@page {
    size: A4;
    margin: 1cm;
}       
#pageborder {
    position:fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: thin solid magenta;
}
@media screen {
    #pageborder {
        display: none;
    }
}       
body {
    margin: 0px;
    padding: 0px;
}
@media screen {
    body {
        width: 19cm; /* A4 = 21cm - 2 * 1cm */
        border: thin solid magenta;
    }}
}       
</style>
</head>
<body>

<div id="pageborder"></div>

<div style="display:flex; flex-direction: column; align-items: center; width: fit-content; border: solid thin red;">
    <div style="border: solid thin blue;">
        Hello World
    </div>
    <div style="border: solid thin green;">
        Foo Bar John Doe
    </div>
</div>

</body>
</html>

In browser the html looks like this:
browser_html

When printing it in browser the resulting pdf looks like this:
browser_printed_pdf

Weasyprint generates something that looks like this:
weasyprint_pdf

Is there any workaround to make weasyprint generated equivalent output to browser ?
@liZe liZe added the bug Existing features not working as expected label Sep 23, 2022
@liZe
Copy link
Member

liZe commented Sep 23, 2022

Hi!

Thanks for your bug report.

There are 2 different problems in this example:

  • fit-content is not supported yet,
  • the flex layout has many problems and is known to be broken in many ways.

Unfortunately, there’s no easy workaround, other than waiting for these two problems to be fixed. Improvements to the flexbox layout are definitely on our todo-list, but the level 3 features of box sizing may take more time to come.

@manuel-koch
Copy link
Author

Looking forward to see those nice features being implemented in weasyprint !

@tomasserravento
Copy link

Hey @liZe , how are you? First thanks for the amazing work you guys do.
I wanted to ask you if there is an estimate time of when support for flex will be added. I was using wkhtmltopdf and in my local environment with Windows the generation of the PDF worked really well using flex, but dont ask me why, when I tried the same in my linux production server, those flex properties were not recognized.
I just tried WeasyPrints, which has a really better performance and graphics generation, but sadly flex doesnt work at all in local.

Do you know a workaround or the only way is not to use flex for now?

Thanks and sorry if the question is dumb!

@liZe
Copy link
Member

liZe commented Dec 27, 2022

Hi!

We have to rewrite a clean support of Flex (and add support of Grid), but it’s a large task, and so far we’ve had quite a lot of sponsored work to do. So, even if this feature has a high priority, it’s not done yet. We can’t give a reliable date for this feature as we don’t know yet which features will be sponsored in the next months.

@dhdaines
Copy link
Contributor

dhdaines commented Aug 19, 2024 •
edited
Loading

This is now somewhat less bad since #2231 but not totally correct either (because fit-content support is still lacking).

It now looks like this:
image

@tomasserravento
Copy link

Hey, thank you for your work and help! I hope fit-content support gets added someday so I can migrate to weasy print.

@liZe
Copy link
Member

liZe commented Aug 24, 2024

The flex part of the bug is fixed by #2231. Let’s close this issue and discuss about fit-content in #2241.

@liZe liZe closed this as completed Aug 24, 2024
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

No branches or pull requests
4 participants
@liZe @dhdaines @manuel-koch @tomasserravento