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 + +++++ (image fallback if formatting is messed: https://imgur.com/a/441LA3E) Where the separation marks the separation between print pages (E and F goes to page 2). 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 it's a variable 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. According to spec, overflowing into more columns is normal: https://www.w3.org/TR/css-multicol-1/#pagination-and-overflow-outside-multicol 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. 1) Another out of the box idea is: if there is any other way to do columns dynamically to achieve the flow I wanted? (float does columns but order is messed up) 2) I just wanted to get some feedback or is this something that I should send to W3 mailing lists because specs really don't support it? Anybody with experience with Paged Media? A good place to test things out is here: https://playground.jsreport.net/w/anon/PWh7SUXh (a js fiddler thingie for a jsreports library that basically prints in headless chrome and shows the PDF intermediately ) Thanks all for any help 😊 -- Andre Santos ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
