Multi columns
This example shows some text renders in a two, three and four column layout. The text uses english hyphenation, text is justified.
Repository files
PDF files
Converter | Status | PDF Preview |
---|---|---|
PDFreactor | ||
PrinceXML | ||
Antennahouse | ||
Weasyprint | ||
PagedJS | ||
Typeset.sh | ||
Vivliostyle | ||
BFO |
OK
OK with issues
Error
Unsupported
HTML input
<html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body lang="en"> <div class="multicol cols-2" lang="en"> <h1> The quick brown fox jumps over the lazy dog</h1> <p> Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue. </p> <p> Enim aenean? A, turpis lundium, egestas porttitor pulvinar velit sociis aenean! Placerat est ac est, rhoncus dictumst etiam scelerisque? Proin. Hac scelerisque scelerisque scelerisque? Placerat phasellus. Ultricies! Pellentesque phasellus, mid cursus sagittis. Et, nascetur elementum, facilisis mattis! Porta etiam mus! Phasellus adipiscing montes nascetur platea in non. Cras aliquet vut, ultricies quis purus massa vel, mid, purus tortor ultrices, cum nunc montes aliquam velit elementum auctor augue lacus in, nunc sed. Cras? Nec urna cursus, egestas adipiscing. Etiam pulvinar odio sed velit hac pid ridiculus dapibus ut placerat! Magna sit ridiculus tempor arcu duis tristique amet in? Enim etiam ultrices mauris augue eros magnis tortor odio augue pid magnis habitasse ultrices magna proin urna parturient lacus lectus. Aliquet proin. </p> <p> Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies. </p> <p> Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim, mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium? Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus, ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit, risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus facilisis, aliquet augue nisi ac. </p> </div> <div class="multicol cols-3" lang="en"> <h1> The quick brown fox jumps over the lazy dog</h1> <p> Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue. </p> <p> Enim aenean? A, turpis lundium, egestas porttitor pulvinar velit sociis aenean! Placerat est ac est, rhoncus dictumst etiam scelerisque? Proin. Hac scelerisque scelerisque scelerisque? Placerat phasellus. Ultricies! Pellentesque phasellus, mid cursus sagittis. Et, nascetur elementum, facilisis mattis! Porta etiam mus! Phasellus adipiscing montes nascetur platea in non. Cras aliquet vut, ultricies quis purus massa vel, mid, purus tortor ultrices, cum nunc montes aliquam velit elementum auctor augue lacus in, nunc sed. Cras? Nec urna cursus, egestas adipiscing. Etiam pulvinar odio sed velit hac pid ridiculus dapibus ut placerat! Magna sit ridiculus tempor arcu duis tristique amet in? Enim etiam ultrices mauris augue eros magnis tortor odio augue pid magnis habitasse ultrices magna proin urna parturient lacus lectus. Aliquet proin. </p> <p> Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies. </p> <p> Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim, mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium? Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus, ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit, risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus facilisis, aliquet augue nisi ac. </p> </div> <div class="multicol cols-4" lang="en"> <h1> The quick brown fox jumps over the lazy dog</h1> <p> Pulvinar non pellentesque pellentesque nisi nascetur elementum platea turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus augue. </p> <p> Enim aenean? A, turpis lundium, egestas porttitor pulvinar velit sociis aenean! Placerat est ac est, rhoncus dictumst etiam scelerisque? Proin. Hac scelerisque scelerisque scelerisque? Placerat phasellus. Ultricies! Pellentesque phasellus, mid cursus sagittis. Et, nascetur elementum, facilisis mattis! Porta etiam mus! Phasellus adipiscing montes nascetur platea in non. Cras aliquet vut, ultricies quis purus massa vel, mid, purus tortor ultrices, cum nunc montes aliquam velit elementum auctor augue lacus in, nunc sed. Cras? Nec urna cursus, egestas adipiscing. Etiam pulvinar odio sed velit hac pid ridiculus dapibus ut placerat! Magna sit ridiculus tempor arcu duis tristique amet in? Enim etiam ultrices mauris augue eros magnis tortor odio augue pid magnis habitasse ultrices magna proin urna parturient lacus lectus. Aliquet proin. </p> <p> Ac non eros turpis ultrices elementum placerat augue risus in augue elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue! Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue? Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium! Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel? Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue! Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies. </p> <p> Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim, mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium? Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus, ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit, risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus facilisis, aliquet augue nisi ac. </p> </div> </body> </html>
Stylesheet
@import url("../styles/a4-landscape.css"); div.multicol { margin-bottom: 2em; text-align: justify; hyphens: auto; break-after: page; font-size: 11pt; } h1 { column-span: all; } .cols-4 { column-count: 4; -webkit-column-count: 4; column-gap: 1cm; column-rule: 4px solid #ff00ff; } .cols-3 { column-count: 3; -webkit-column-count: 3; column-gap: 1cm; column-rule: 4px solid #ff00ff; } .cols-2 { column-count: 2; -webkit-column-count: 2; column-gap: 1cm; column-rule: 4px solid #ff00ff; }