Support Flexbox

[brendon]

Hi there, I'm looking to switch from wkhtmltopdf to weasyprint but just wanted to check about flex-box support. I can't see any mention of it in issues. Will I have trouble using weasyprint whilst using flex-box in my design?

[liZe]

Flexbox is not supported at all, but it shouldn't be hard to implement (if anyone is interested and has a couple of weeks free).

[brendon]

Thanks @liZe :) I'd be interested in financially supporting someone to do this. I'd first need to check that there aren't any other things that need doing, so I'll have a crack at integrating weasyprint into my Rails app and see how well it outputs everything else.

I'm basically processing a Semantic UI grid document into a PDF.

[DanielSwain]

@brendon Any progress on having WeasyPrint support Flexbox?

[brendon]

Hi @DanAtShenTech, thanks for reminding me about this issue. I ended up sticking with wkhtmltopdf and hacking the CSS to fall back to the normal box model when the page was being rendered as a PDF. It's working well to date. I'd still be interested in WeasyPrint if it supported flex box in the future.

I'm going to close this for now though since there doesn't seem to be anyone to progress the work :)

[liZe]

We can let this open until anyone finds the time to implement it 😄.

[polarathene]

This might interest anyone who wants to implement flexbox. Facebook has developed a minimal CSS layout engine specifically focused around flexbox for React-Native, they've provided the code open sourced, perhaps it could be integrated into WeasyPrint easily enough?(not my forte). Do note they slightly deviate from spec with several different defaults.

[diegobill]

Hi,

weasyprint does not support the css bellow:

.grid2x2 {
	min-height: 50%;
	height: 50%;
	display: flex;
	flex-direction: row;
}

.grid2x2 > div {
	display: flex;
	flex-basis: 50%;
	width: 100%;
	justify-content: center;
	flex-direction: column;
}

.grid2x2 > div > div {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

is there any alternative supported by weasyprint?

Thanks

[mahfozmt]

@brendon Im also sticking with wkhtmltopdf, what is the hack? can you share? i need implement flexbox.

[brendon]

@mahfozmt, these days I'd suggest using https://github.com/puppeteer/puppeteer

If you use Rails you can interface with this via https://github.com/Studiosity/grover

It uses headless Chrome so it stays up to date with modern web standards.

[polarathene]

i need implement flexbox.

Earlier I linked to Facebooks yoga, now a better choice AFAIK is taffy, but it doesn't have C bindings yet which other languages need (Python could use those fairly easy AFAIK).

Taffy has flexbox and also CSS Grid.

---

For an easier solution, I'd also suggest using alternatives like Puppeteer or PlayWright 👍

[mahfozmt]

@brendon, @polarathene My project is built by .NET Core. In there, Puppeteer Implement also has many hassles.

[brendon]

Do you use node for other things in there?

[mahfozmt]

Yes, for Angular using node.

[liZe]

Hi everyone!

Discussing about document generation is interesting, but this closed issue is not the best place for that 😄. You can continue elsewhere, maybe on the PrintCSS Discord channel.

[brendon]

Roger, @liZe. @mahfozmt, as far as CSS changes. I had a look and can't see much, but I suspect it was mostly changing flex items to regular display: block or inline-block and giving them predictable widths. Good luck :)