Lesson: lesson-multi-columns

This example shows some text renders in a two, three and four column layout. The text uses english hyphenation, text is justified.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@import url("../styles/a4-landscape.css");

div.multicol {
    margin-bottom: 2em;
    text-align: justify;
    hyphens: auto;
    page-break-after: always;
    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;
}

HTML input

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body lang="en">
        <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>
            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. 
            </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-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>

    </body>
</html>