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  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
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;
}