0

Background

I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS library if it may help to solve the issue.

Problem description

I'm trying to implement a very basic multi-column layout. Everything works fine except for the fact that I can not avoid widowed headers. The break-after: avoid instruction does not work for some reason.

Problem Illustration

enter image description here

Code example

<!DOCTYPE html>
<html>
    <head>
        <style>
            .columns {
                height: 300px;
                column-fill: auto;
                column-width: 150px;
            }
            h1 {
                break-after: avoid;
            }
        </style>
    </head>
    <body>
        <div class="columns">
            <h1>Header</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <h1>Header</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <h1>Header</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <h1>Header</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </body>
</html>

Questions

  • Why is it not working as expected?
  • Am I doing something wrong according to the W3C specs or is it a lack of browser support?
  • Are there any ways/tools to work this around?
Kolyunya
  • 5,973
  • 7
  • 46
  • 81
  • Is it necessary that you use `columns` styles? Why don't you just use `div` and implement different `styles` to position the `header` and `paragraph` element? This way you would reach a better result and easy to edit and even for a print version. Also I think, you have a typo in you question. You mean `chrome 85`. – k.vincent Sep 16 '20 at 08:22
  • @k.vincent I can not use `div`s because text can not flow from one `div` to another and the text is inserted dynamically into the layout. And no, I'm using `Chromium`, that's a different browser. – Kolyunya Sep 16 '20 at 09:12
  • Ok. So you have a kind of specific dev env. I'll check and catch up. This should be actually possible to fix. – k.vincent Sep 16 '20 at 09:33
  • @k.vincent it's not really specific in any way. Both `chrome` and `chromium` have the same rendering engine and I can actually switch to any other browser or use any library. Thanks for help! – Kolyunya Sep 16 '20 at 09:37
  • Change your `styles` to: `.columns { height: 300px; column-fill: auto; column-width: 150px; } h1 { break-after: avoid; clear: right; } p { -webkit-column-break-after: always; }`. This will work. But I tested it on `Chrome`. If it fixes your issue, I can add it as answer. Chrome on my machine did behave first like your screenshot. So the changes would fix the error on your side. – k.vincent Sep 16 '20 at 13:21
  • What about if you use for `.columns` `min-height:yyy.px; height:auto;` – k.vincent Sep 16 '20 at 15:09
  • One more which is working for me withoutt break for paragraph: `.columns { height: 300px; column-fill: auto; column-width: 150px; } h1 { break-after: avoid; } p { float: right; }` – k.vincent Sep 16 '20 at 15:25

0 Answers0