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.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
OK OK with issues Error Unsupported

HTML input

<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 + ", ");
      }
   }
}



	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>

Stylesheet

@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;
}