Multi-column layout for print that works with content-fill: auto

[cifroes]

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).

Basically this:

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?

[Author]

Posts