Handling column breaks in multi-column layout
Hi guys! First of all let me thank you for a great library. I really enjoy using it and the documentation is great.
Now I'm trying to make a very basic layout with multiple columns. I'm currently using Chromium 85
. Everything seems to work fine except for the handling of column breaks. The problem is that I get widowed headers which I try to fix with break-after: avoid
. The fix does not work though.
I'm very new to the multi-column layouts but as far as I know, it should work according to the W3C specs, but it seems like it's not supported by the browser. Not sure whether that's the case though.
So, I totally understand that the name of your library is paged
, not columned
and you may consider this problem out of its scope, but it seems to me that this is a very basic task for creating book layouts. So maybe you can consider creating a multi-column polyfill as a feature request.
In case you know any fix for the problem I described, here is an illustration and a test document. Maybe some JS code may help solve this or maybe I should use some other browser with better support of multi-column layouts. Thank you again!
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
@page {
size: A4 landscape;
margin: 15mm 15mm;
}
.columns {
columns: 3;
}
</style>
</head>
<body>
<div class="columns">
<h1>
Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ligula leo, quis eleifend risus elementum a. Suspendisse gravida dignissim nisi, sagittis fringilla nunc aliquam ac. Sed posuere augue sed efficitur consequat. Praesent mollis accumsan mi, sit amet pretium neque pretium sed. Curabitur massa magna, dapibus eu feugiat ac, efficitur lacinia lorem. Mauris rhoncus gravida justo ut pretium. Integer orci neque, varius at urna eget, elementum luctus mauris. Nam quis tortor dolor. Donec mattis ut erat vitae hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ligula urna, pulvinar sit amet pulvinar a, aliquam id orci. Phasellus in justo ac ligula congue sollicitudin. Sed imperdiet semper sapien, at aliquet orci mollis at. Nam suscipit pretium elit non iaculis. Pellentesque eget ex rutrum, feugiat elit non, semper libero.
Ut sed mi in felis convallis varius vitae ut erat. Sed urna quam, sodales nec iaculis vitae, commodo vitae lectus. Nam bibendum lectus a urna dignissim, sed laoreet arcu elementum. Nam rhoncus scelerisque ipsum non iaculis. Nunc a tortor a nibh imperdiet sagittis suscipit eu felis. Ut sit amet nunc elit. Nullam vestibulum metus vitae laoreet porttitor. Pellentesque nibh augue, luctus eget lacus eget, dapibus volutpat urna.
Nam sit amet ligula nunc. Mauris lectus dui, aliquet ut tempor sed, congue id eros. Curabitur ac vestibulum metus, vel suscipit nisl. Etiam augue orci, tincidunt vitae posuere eget, dapibus at tellus. Morbi vel aliquet nisi. Cras dignissim urna quis ante rhoncus mattis. Vestibulum ultricies risus diam, quis placerat turpis tristique vel. Nullam vitae cursus neque. Vestibulum imperdiet leo ut ex volutpat condimentum. Phasellus faucibus dui id augue cursus volutpat. Nullam quis nunc sed massa pulvinar tempor. Mauris tortor dolor, tincidunt sit amet faucibus non, ultrices quis eros.
Maecenas et orci eget enim hendrerit scelerisque. Aenean erat enim, tristique vitae tincidunt sit amet, varius vitae velit. Duis convallis, purus sit amet dapibus tincidunt, leo purus dignissim massa, sed rhoncus nibh purus sit amet nunc. Nullam non lacus sem. Donec id posuere metus, at tristique nibh. Maecenas faucibus nunc tincidunt sodales tempor. Nunc nec mi dui.
In eget mattis sapien. Sed eu nisi diam. Nullam auctor, turpis eget sodales sodales, massa urna luctus nisi, ac scelerisque nulla diam ut nibh. Donec ante neque, tristique eu lectus vel, faucibus vulputate sapien. Vestibulum pretium consectetur risus malesuada sodales. Mauris non elit quis sapien pellentesque volutpat imperdiet pellentesque lorem. Mauris pretium diam vel volutpat dignissim. Nullam sit amet odio libero. Sed ultricies neque non quam aliquet lobortis. Phasellus bibendum lorem lectus, vitae scelerisque lacus facilisis eu. Quisque consequat scelerisque purus ultrices vulputate. Donec ut leo vitae turpis blandit malesuada a id velit. Duis et mauris in erat commodo elementum. Curabitur sed egestas magna, at elementum nisi. Sed a lacinia lectus, id venenatis massa. In sagittis risus eget eros venenatis, vitae vehicula lorem accumsan.
</p>
<h1>
Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ligula leo, quis eleifend risus elementum a. Suspendisse gravida dignissim nisi, sagittis fringilla nunc aliquam ac. Sed posuere augue sed efficitur consequat. Praesent mollis accumsan mi, sit amet pretium neque pretium sed. Curabitur massa magna, dapibus eu feugiat ac, efficitur lacinia lorem. Mauris rhoncus gravida justo ut pretium. Integer orci neque, varius at urna eget, elementum luctus mauris. Nam quis tortor dolor. Donec mattis ut erat vitae hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ligula urna, pulvinar sit amet pulvinar a, aliquam id orci. Phasellus in justo ac ligula congue sollicitudin. Sed imperdiet semper sapien, at aliquet orci mollis at. Nam suscipit pretium elit non iaculis. Pellentesque eget ex rutrum, feugiat elit non, semper libero.
Ut sed mi in felis convallis varius vitae ut erat. Sed urna quam, sodales nec iaculis vitae, commodo vitae lectus. Nam bibendum lectus a urna dignissim, sed laoreet arcu elementum. Nam rhoncus scelerisque ipsum non iaculis. Nunc a tortor a nibh imperdiet sagittis suscipit eu felis. Ut sit amet nunc elit. Nullam vestibulum metus vitae laoreet porttitor. Pellentesque nibh augue, luctus eget lacus eget, dapibus volutpat urna.
Nam sit amet ligula nunc. Mauris lectus dui, aliquet ut tempor sed, congue id eros. Curabitur ac vestibulum metus, vel suscipit nisl. Etiam augue orci, tincidunt vitae posuere eget, dapibus at tellus. Morbi vel aliquet nisi. Cras dignissim urna quis ante rhoncus mattis. Vestibulum ultricies risus diam, quis placerat turpis tristique vel. Nullam vitae cursus neque. Vestibulum imperdiet leo ut ex volutpat condimentum. Phasellus faucibus dui id augue cursus volutpat. Nullam quis nunc sed massa pulvinar tempor. Mauris tortor dolor, tincidunt sit amet faucibus non, ultrices quis eros.
Maecenas et orci eget enim hendrerit scelerisque. Aenean erat enim, tristique vitae tincidunt sit amet, varius vitae velit. Duis convallis, purus sit amet dapibus tincidunt, leo purus dignissim massa, sed rhoncus nibh purus sit amet nunc. Nullam non lacus sem. Donec id posuere metus, at tristique nibh. Maecenas faucibus nunc tincidunt sodales tempor. Nunc nec mi dui.
In eget mattis sapien. Sed eu nisi diam. Nullam auctor, turpis eget sodales sodales, massa urna luctus nisi, ac scelerisque nulla diam ut nibh. Donec ante neque, tristique eu lectus vel, faucibus vulputate sapien. Vestibulum pretium consectetur risus malesuada sodales. Mauris non elit quis sapien pellentesque volutpat imperdiet pellentesque lorem. Mauris pretium diam vel volutpat dignissim. Nullam sit amet odio libero. Sed ultricies neque non quam aliquet lobortis. Phasellus bibendum lorem lectus, vitae scelerisque lacus facilisis eu. Quisque consequat scelerisque purus ultrices vulputate. Donec ut leo vitae turpis blandit malesuada a id velit. Duis et mauris in erat commodo elementum. Curabitur sed egestas magna, at elementum nisi. Sed a lacinia lectus, id venenatis massa. In sagittis risus eget eros venenatis, vitae vehicula lorem accumsan.
</p>
<h1>
Header
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ligula leo, quis eleifend risus elementum a. Suspendisse gravida dignissim nisi, sagittis fringilla nunc aliquam ac. Sed posuere augue sed efficitur consequat. Praesent mollis accumsan mi, sit amet pretium neque pretium sed. Curabitur massa magna, dapibus eu feugiat ac, efficitur lacinia lorem. Mauris rhoncus gravida justo ut pretium. Integer orci neque, varius at urna eget, elementum luctus mauris. Nam quis tortor dolor. Donec mattis ut erat vitae hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ligula urna, pulvinar sit amet pulvinar a, aliquam id orci. Phasellus in justo ac ligula congue sollicitudin. Sed imperdiet semper sapien, at aliquet orci mollis at. Nam suscipit pretium elit non iaculis. Pellentesque eget ex rutrum, feugiat elit non, semper libero.
Ut sed mi in felis convallis varius vitae ut erat. Sed urna quam, sodales nec iaculis vitae, commodo vitae lectus. Nam bibendum lectus a urna dignissim, sed laoreet arcu elementum. Nam rhoncus scelerisque ipsum non iaculis. Nunc a tortor a nibh imperdiet sagittis suscipit eu felis. Ut sit amet nunc elit. Nullam vestibulum metus vitae laoreet porttitor. Pellentesque nibh augue, luctus eget lacus eget, dapibus volutpat urna.
Nam sit amet ligula nunc. Mauris lectus dui, aliquet ut tempor sed, congue id eros. Curabitur ac vestibulum metus, vel suscipit nisl. Etiam augue orci, tincidunt vitae posuere eget, dapibus at tellus. Morbi vel aliquet nisi. Cras dignissim urna quis ante rhoncus mattis. Vestibulum ultricies risus diam, quis placerat turpis tristique vel. Nullam vitae cursus neque. Vestibulum imperdiet leo ut ex volutpat condimentum. Phasellus faucibus dui id augue cursus volutpat. Nullam quis nunc sed massa pulvinar tempor. Mauris tortor dolor, tincidunt sit amet faucibus non, ultrices quis eros.
Maecenas et orci eget enim hendrerit scelerisque. Aenean erat enim, tristique vitae tincidunt sit amet, varius vitae velit. Duis convallis, purus sit amet dapibus tincidunt, leo purus dignissim massa, sed rhoncus nibh purus sit amet nunc. Nullam non lacus sem. Donec id posuere metus, at tristique nibh. Maecenas faucibus nunc tincidunt sodales tempor. Nunc nec mi dui.
In eget mattis sapien. Sed eu nisi diam. Nullam auctor, turpis eget sodales sodales, massa urna luctus nisi, ac scelerisque nulla diam ut nibh. Donec ante neque, tristique eu lectus vel, faucibus vulputate sapien. Vestibulum pretium consectetur risus malesuada sodales. Mauris non elit quis sapien pellentesque volutpat imperdiet pellentesque lorem. Mauris pretium diam vel volutpat dignissim. Nullam sit amet odio libero. Sed ultricies neque non quam aliquet lobortis. Phasellus bibendum lorem lectus, vitae scelerisque lacus facilisis eu. Quisque consequat scelerisque purus ultrices vulputate. Donec ut leo vitae turpis blandit malesuada a id velit. Duis et mauris in erat commodo elementum. Curabitur sed egestas magna, at elementum nisi. Sed a lacinia lectus, id venenatis massa. In sagittis risus eget eros venenatis, vitae vehicula lorem accumsan.
</p>
</div>
</body>
</html>