Lesson: lesson-pdfreactor-multicol-with-sidenotes

This example shows a two-column layout with side notes placed in the left margin (on left pages) and right margin (on right pages). In addition this example will demonstrate how to place some text only onto the first and lage page. CSS Paged Media defines the :first selector but no :last selector. PDFreactor provides the -ro-last selector as alternative. The side note functionality is implemented using floats and Javascript.

PDF files

Converter PDF Preview
PDFreactor
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
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
@import url("../styles/a4.css");

#content {
        column-count: 2;
}

@page:left {
    margin-left: 5cm;
    @bottom-left {
        content: counter(page);
    }
}

@page:right {
    margin-right : 5cm;

    @bottom-right {
        content: counter(page);
    }
}

#first {
    position: running(first);
    font-size: 0.8em;
    color: red;
    width: 2cm;
}

@page:first {
    @right-middle {
        content: element(first);
    }
}

#last {
    position: running(last);
    font-size: 0.8em;
    color: red;
    width: 2cm;
}


@page {
    @left-middle {
        content: element(last);
    }
}

.marker {
    font-weight: bold;
    color: red;
}
.annotation {
    font-size: 0.8em;
    font-weight: 100;
    float: left;
    width: 3cm;
    border: 1px solid blue;
    left: 0cm;
    position: absolute;
    margin-left: -5cm;
}

.annotation.right {
    left: auto;
    right: 0;
    position: absolute;
    margin-left: auto;
    margin-right: -5cm;
}

table#span2 {
    -ah-float: multicol after left;
    width: 3gr;
    margin-top: 1em;
}

table#span2 caption {
    font-weight: bold;
}
 
table#span2 td {
    border: 1px solid #ddd;
    border-collapse: collapse;
}
    

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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<html>
<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />

	<script type="text/javascript">
function listProperties(obj) {
   var propList = "";
   for(var propName in obj) {
      if(typeof(obj[propName]) != "undefined") {
         propList += (propName + ", ");
      }
   }
   alert(propList);
}



	function annotations() {
		var annotations = document.querySelectorAll(".annotation");
		for (var i = 0; i < annotations.length; i++) {
			var annotation = annotations[i];
			var boxDescription = ro.layout.getBoxDescriptions(annotation)[0];
            listProperties(annotation);

			// check if on a right page
			if (!boxDescription.pageLeft) {
				annotation.className += " right";
			}
		}
	}
	</script>	
</head>

<body onload="annotations()">

    <!-- display right hand on first page -->
    <div id="first">
        This is
        <br>
        my 
        <br>
        home address
    </div>

    <div id="content">
    <!--lorem-->
    <p>Montes, nascetur ridiculus mus. Pellentesque risus turpis, aliquet ac,
    accumsan vel, iaculis eget, enim. Pellentesque nibh neque, malesuada id, tempor
    vel, aliquet ut, eros. 
    <span class="annotation">This is a small annotation 1</span>
    In hac habitasse platea dictumst. Integer neque purus,
    congue sed, mattis sed, vulputate ac, pede. Donec vestibulum purus non tortor.
    Integer at nunc.</p>
    <p>Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus.
    Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor
    rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue,
    tempus nec, laoreet at, porttitor blandit, leo. Phasellus in odio. Duis
    lobortis, metus eu laoreet tristique, pede mi congue mi, quis posuere augue
    nulla a augue. Pellentesque sed est. Mauris cursus urna id lectus. Integer
    dignissim feugiat eros. Sed tempor volutpat dolor. Vestibulum vel lectus nec
    mauris semper adipiscing.</p>
    <table id="span2">
        <caption>This is my table</caption>
        <tbody>
            <tr>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
            </tr>
            <tr>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
            </tr>
            <tr>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
                <td>Ipsum. Aenean laoreet posuere orci. Etiam id nisl. Suspendisse </td>
            </tr>
        </tbody>
    </table>

    <p>Aliquam tincidunt enim sit amet tellus. Sed mauris nulla, semper tincidunt,
    luctus a, sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis
    sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec
    est neque, dignissim a, eleifend vitae, lobortis ut, nibh. Nullam sed lorem.
    Proin laoreet augue quis eros. Suspendisse vehicula nunc ac nisi.</p>
    <p>Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus.
    Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor
    rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue,
    tempus nec, laoreet at, porttitor blandit, leo. Phasellus in odio. Duis
    lobortis, metus eu laoreet tristique, pede mi congue mi, quis posuere augue
    nulla a augue. Pellentesque sed est. Mauris cursus urna id lectus. Integer
    dignissim feugiat eros. Sed tempor volutpat dolor. Vestibulum vel lectus nec
    mauris semper adipiscing.</p>

    <p>Aliquam tincidunt enim sit amet tellus. Sed mauris nulla, semper tincidunt,
    luctus a, sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis
    sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec
    est neque, dignissim a, eleifend vitae, lobortis ut, nibh. Nullam sed lorem.
    Proin laoreet augue quis eros. Suspendisse vehicula nunc ac nisi.</p>
    <p>Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus.
    Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor
    rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue,
    tempus nec, laoreet at, porttitor blandit, leo. Phasellus in odio. Duis
    lobortis, metus eu laoreet tristique, pede mi congue mi, quis posuere augue
    nulla a augue. Pellentesque sed est. Mauris cursus urna id lectus. Integer
    dignissim feugiat eros. Sed tempor volutpat dolor. Vestibulum vel lectus nec
    mauris semper adipiscing.</p>

    <p>Aliquam tincidunt enim sit amet tellus. Sed mauris nulla, semper tincidunt,
    luctus a, sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis
    sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec
    est neque, dignissim a, eleifend vitae, lobortis ut, nibh. Nullam sed lorem.
    Proin laoreet augue quis eros. Suspendisse vehicula nunc ac nisi.</p>
    <p>Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus.
    Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor
    rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue,
    tempus nec, laoreet at, porttitor blandit, leo. Phasellus in odio. Duis
    lobortis, metus eu laoreet tristique, pede mi congue mi, quis posuere augue
    nulla a augue. Pellentesque sed est. Mauris cursus urna id lectus. Integer
    dignissim feugiat eros. Sed tempor volutpat dolor. Vestibulum vel lectus nec
    mauris semper adipiscing.</p>



    <p>Aliquam tincidunt enim sit amet tellus. Sed mauris nulla, semper tincidunt,
    luctus a, sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis
    sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec
    est neque, dignissim a, eleifend vitae, lobortis ut, nibh. Nullam sed lorem.
    Proin laoreet augue quis eros. Suspendisse vehicula nunc ac nisi.</p>
    <p>Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus.
    Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor
    <span class="annotation">This is a small annotation 1</span>
    rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue,
    tempus nec, laoreet at, porttitor blandit, leo. Phasellus in odio. Duis
/bin/bash: :wa: command not found
    lobortis, metus eu laoreet tristique, pede mi congue mi, quis posuere augue
    nulla a augue. Pellentesque sed est. Mauris cursus urna id lectus. Integer
    dignissim feugiat eros. Sed tempor volutpat dolor. Vestibulum vel lectus nec
    mauris semper adipiscing.</p>

    <p>Aliquam tincidunt enim sit amet tellus. Sed mauris nulla, semper tincidunt,
    luctus a, sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis
    sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec
    est neque, dignissim a, eleifend vitae, lobortis ut, nibh. Nullam sed lorem.
    Proin laoreet augue quis eros. Suspendisse vehicula nunc ac nisi.</p>

    <p>Suspendisse fermentum velit quis sem. Phasellus suscipit nunc in risus.
    Nulla sed lectus. Morbi sollicitudin, diam ac bibendum scelerisque, enim tortor
    rhoncus sapien, vel posuere dolor neque in sem. Pellentesque tellus augue,
    tempus nec, laoreet at, porttitor blandit, leo. Phasellus in odio. Duis
    lobortis, metus eu laoreet tristique, pede mi congue mi, quis posuere augue
    nulla a augue. Pellentesque sed est. Mauris cursus urna id lectus. Integer
    dignissim feugiat eros. Sed tempor volutpat dolor. Vestibulum vel lectus nec
    mauris semper adipiscing.</p>

    <p>Aliquam tincidunt enim sit amet tellus. Sed mauris nulla, semper tincidunt,
    luctus a, sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis
    sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec
    est neque, dignissim a, eleifend vitae, lobortis ut, nibh. Nullam sed lorem.
    <span class="annotation">This is a small annotation</span>
    Proin laoreet augue quis eros. Suspendisse vehicula nunc ac nisi.</p>
<!--lorem-->
<p>Velit quis dictum scelerisque, est lectus hendrerit lorem, eget dignissim
orci nisl sit amet massa. Etiam volutpat lobortis eros. Nunc ac tellus in
sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit.
Fusce rutrum. Cum sociis natoque penatibus et magnis dis parturient montes,
    <span class="annotation">This is a small annotation</span>
nascetur ridiculus mus. Pellentesque vitae erat. Vivamus porttitor cursus
lacus. Pellentesque tellus. Nunc aliquam interdum felis. Nulla imperdiet leo.
Mauris hendrerit, sem at mollis pharetra, leo sapien pretium elit, a faucibus
sapien dolor vel pede. Vestibulum et enim ut nulla sollicitudin adipiscing.
Suspendisse malesuada venenatis mauris. Curabitur ornare mollis velit. Sed
vitae metus. Morbi posuere mi id odio. Donec elit sem, tempor at, pharetra eu,
sodales sit amet, elit.</p>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce mi. Vivamus
    enim velit, condimentum sit amet, laoreet quis.</p>
    <!--/lorem-->
    </div>

    <!-- display last hand on last page -->
    <div id="last">
        hello world
        <br>
        hello world
        <br>
        hello world
        <br>
    </div>

</body>
</html>