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

Bug: vivliostyle only renders one page if the root element is a flexbox #1416

Open
MoamenAbdelsattar opened this issue Nov 7, 2024 · 2 comments
Labels

Comments

@MoamenAbdelsattar
Copy link
Contributor

Sorry for reporting a lot of issues 😅
Render a document with root element has display: flex, vivliostyle only renders one page.

Why is supporting flexbox important?

Supporting flexbox is useful if someone wants to justify columns vertically, like this page:
justified columns
Fair use 🙃
Columns are aligned vertically, not just right and left, which I think can be achieved with a flexbox by increasing gaps between headers and paragraphs to make them fit.

@MoamenAbdelsattar
Copy link
Contributor Author

MoamenAbdelsattar commented Nov 7, 2024

Update: flexbox is not enough to align columns vertically, you need every line in the right column to align with the line in the left column, which requires headers and images to have heights that are integer multiple of line height. This requires javascript postprocessing to modify margins of images.

@MurakamiShinyu
Copy link
Member

Vivliostyle's flexbox support has a limitation that the flex container cannot span multiple pages. See:

I think your case can be achieved using column-count: 2 on the root element and float-reference: column; float: top for figures (see: https://drafts.csswg.org/css-page-floats/), and using rlh length unit to specify heights of figures to align lines of both columns.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants