- This topic is empty.
August 15, 2018 at 3:27 pm #275375cifroesParticipant
I want to do a multi-column layout that prints nicely (on Chrome at least) and uses the column-fill rule of ‘auto’, so that content first fills up 1 column until the end of a print page and only after that goes to next column (instead of default where content is balanced on both columns).
A C B D ---- E F
Where the separation marks the separation between print pages. Note that E F stay in the same column instead of being in 2 different columns, that’s column-fill work.
Content is a list of
<p>that have dynamic heights and dynamic number of rows (this is like a report with the name of all users of the system). I don’t want control over where the page break occurs, only that it flows the content as specified.
If I use a multi-column layout by default I get
A C B D ---- E F
which looks very weird in my use case. Activating column-fill auto requires setting an height value but if I use height: 100% then the multi-column stops overflowing to the next print page and overflows to ‘the right’ so effectively content is cut off.
I read both CSS Multi-column (https://www.w3.org/TR/css-multicol-1/) and CSS Paged Media Module (https://drafts.csswg.org/css-page-3/) and it seems this basically isn’t supported but maybe I’m missing some hack on how to achieve this.
Some wacky ideas for brainstorming:
- is there any other way to do columns dynamically to achieve the flow I wanted?
at the worst case is there any way in JS to know when do a column content reaches the end of the page and do a manual column or page break? (this can solve the overflow problem of going to the right)
is it possible in JS to know how many print pages does my content require? they are not always same height.
I just wanted to get some feedback or is this something that the CSS Specs should improve upon?
- The forum ‘CSS’ is closed to new topics and replies.