Lesson: lesson-footnotes-multi-columns

PDF files

Converter PDF Preview
PDFreactor
ERROR
Download
Completely broken output
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@import url("../styles/a4-landscape.css");

div.multicol {
    margin-bottom: 2em;
    text-align: justify;
    hyphens: auto;
    page-break-after: always;
}


h1 {
    column-span: all;
}


.cols-3 {
    column-count: 3;
    column-gap: 1cm;
    column-rule: 4px solid #ff00ff;
}

@page {
    counter-reset: footnote 0;
}

@page {
    @footnote {
        border-top: dashed red 1px;
        float: bottom;
        -ah-float: after column auto-move;
    }
}

span.footnote { 
    float: footnote; 
    counter-increment: footnote;
    -ah-float: footnote;
}

.footnote::footnote-call {
    content: counter(footnote, decimal) " ";
    color: green;
}

.footnote::footnote-marker {
    content: counter(footnote, lower-roman);
    font-size: 14px;
    color: blue;
}

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
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body lang="en">
        <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>Though the body was erect, the head was thrown back so that the
            closed eyes were pointed towards the needle of the tell-tale that swung
            from a beam in the ceiling.<span class="footnote">The cabin-compass is
                called the tell-tale, because without going to the compass at the
                helm, the Captain, while below, can inform himself of the course of
                the ship.</span>
            </p>
            <p>Though the body was erect, the head was thrown back so that the
            closed eyes were pointed towards the needle of the tell-tale that swung
            from a beam in the ceiling.<span class="footnote">This is another footnote</span>
            </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>

        </div>

    </body>
</html>