I have a tooltip that appears when the user mouses over an element. The problem is that when the tooltip mouses over a word on the far right part of the screen, it can no longer be seen.
I tried the answer by #EPurpl3 here, but couldn't figure out how to replace the span element with the reference to d.TooltipInfo.
I also tried to add a line to the effect of <body onResize="window.location=window.location;"> as described here - but it had no effect.
Here is the code:
var doc = URL.createObjectURL(new Blob([`TooltipInfo Category Function1 Function2 Retention
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "General Furry, Program and Subject Files" Average Quantity and Planning Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Senate Committee on animal Standards Bowl and Plate Design Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Published Canine Bowl and Plate Design Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine case files Bowl and Plate Design Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files Avoiding Neck Strain Jack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files Drooling Jack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files Drooling Jack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ADVERTISING At home Jack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum PROMOTIONS At home Jack 100
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Publications At homeio Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Public and Information Services At homeio Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum DEVELOPMENT Optimal time of day - walking Snack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum INCOME AND REVENUE Optimal time of day - walking Snack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Fundraising Optimal time of day - walking Snack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Fundraising Optimal time of day Snack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum DEVELOPMENT Optimal time of day Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum INCOME AND REVENUE Optimal time of day Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Protective Measures Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Protective Measures Pack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 8
`]));
d3.tsv(doc)
.row(function(d) {
return {
TooltipInfo: d.TooltipInfo,
Category: d.Category,
Function1: d.Function1,
Function2: d.Function2
};
})
.get(function(error, data) {
// var allGroup = d3.map(data, function(d){return(d.Function1)}).keys()
// console.log(allGroup)
// console.log(allGroup.length);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
var height = 150,
width = 300;
var nest = d3.nest()
.key(function(d) {
return d.Function2;
})
.key(function(d) {
return d.Function1;
})
.key(function(d) {
return d.Category;
})
.entries(data);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
var height = 80,
width = 150;
var divs = d3.select(".container")
.selectAll(null)
.data(nest)
.enter()
.append("div")
.attr("class", "innerdiv");
divs.append("p")
.html(function(d) {
return d.key;
});
var divs2 = divs.selectAll(null)
.data(function(d) {
return d.values;
})
.enter()
.append('div')
.attr("class", "first")
divs2.append("text")
.attr('class', 'label1')
.attr('x', 0)
.attr('y', 0)
.style("font-size", "16px")
.style("font-weight", "bold")
.style("fill", "white")
.attr("width", 400)
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'start')
var svgs2 = divs2.selectAll(null)
.data(function(d) {
return d.values;
})
.enter()
.append('svg')
.attr("class", "second")
.attr("width", function(d) {
return String(d.Category).length * 31
})
// .attr("width",200)
.attr("height", 20);
svgs2.append("text")
.attr('class', 'label2')
.attr('x', 10)
.attr('y', 17)
.style("font-size", "12px")
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'start')
var rect = svgs2.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.filter(function(d, i) {
const x = d3.select(this.parentNode).datum();
return x.key == d.Category ? 1 : 0;
})
.attr("height", "12")
.attr("width", function(d, i) {
return String(d.Category).length * 7.3
})
.attr("x", function(d, i) {
return (i * 20) + 10;
})
.attr("y", 8)
.attr("fill", "white")
.style("opacity", "0")
.style("cursor", "pointer")
.on("mouseover", function(d, i) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(`${d.TooltipInfo}`)
.style((function(d) {
return d3.event.pageX > (window.innerWidth) ? "left" : "right"
}), d3.event.pageX + "px")
.style((function(d) {
return d3.event.pageY > (window.innerHeight) ? "top" : "bottom"
}), d3.event.pageY + "px")})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
});
div.tooltip {
position: absolute;
text-align: left;
width: 500px;
height: auto;
padding: 3px;
font: 17px sans-serif;
color: white;
border: 0px;
border-radius: 3px;
pointer-events: none;
background: black;
}
.tooltip {
display: inline-block;
text-indent: 0em;
}
h1 {
font-size: 30px;
font-family: "Consolas";
float: left;
margin: 0;
}
.container {
display: flex;
padding: 0px;
flex: 1 1 1;
flex-wrap: nowrap;
float: left;
}
.innerdiv {
text-align: left;
font-size: 21px;
font-family: "Consolas";
flex: 1 1 1;
}
.innerdiv+.innerdiv {
padding-left: 20px;
border-left: 2px solid lightgray;
}
.legend {
position: fixed;
font-family: "Century Gothic";
}
/* div {width: auto; height: auto; } */
.first>*:first-child {
width: 100%;
}
div.first {
display: flex;
padding: 0px;
flex: 0 0 100%;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>
<div class="container"></div>
Update: I can stop the tooltip from disappearing from the left or the right of the window with this:
.style("left", function() {return d3.event.pageX >(window.innerWidth*.75) ? d3.event.pageX - 520+"px": d3.event.pageX + "px"})
I'm now working on making sure that tooltip doesn't disappear out the top or the bottom of the window. I first figured out how to make the "bottom" style look right (requires subtracting mouse position from the total height - something about the way d3 draws a page from top to bottom):
.style("bottom", window.innerHeight - d3.event.pageY+20 +"px")
The problem now is that the tooltip disappears out of the top of the page. I thought I could set a conditional function that will select either "top" or "bottom" for the style attribute. But I don't think d3 allows a function to be set on the style - only on the value. To illustrate, the below line of code shows pretty much the same as the above line of code, but the addition of a function on the style messes up the tooltip position.
.style(function() {return "bottom"}, window.innerHeight - d3.event.pageY+20 +"px")
So: need to figure out some kind of function to call on the value, to stop the tooltip from going out the top of the page. The logic for this is not as straightforward as the horizontal positioning, because the width of the tooltip is fixed, but the height of the tooltip varies with the content. Unless a percentage might work?
Figured it out - needed getBoundingClientRect() to get the height of the tooltip. Once I have the height, and the height of the window, I can write a function that checks if the mouse is at a position less than window.innerHeight - clientrect.height.
Code:
var rect = svgs2.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.filter(function(d, i) {
const x = d3.select(this.parentNode).datum();
return x.key == d.Category ? 1 : 0;
})
.attr("height", "12")
.attr("width", function(d, i) {
return String(d.Category).length * 7.3
})
.attr("x", function(d, i) {
return (i * 20) + 10;
})
.attr("y", 8)
.attr("fill", "white")
.style("opacity", "0")
.style("cursor", "pointer")
.on("mouseover", function(d, i) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(`${d.TooltipInfo}`)
.style("left", function() {
return d3.event.pageX > (window.innerWidth * .75) ? d3.event.pageX - 520 + "px" : d3.event.pageX + "px"
})
.style("bottom", function() {
var clientrect = d3.select(this).node().getBoundingClientRect();
return d3.event.pageY > (window.innerHeight - clientrect.height) ? window.innerHeight - d3.event.pageY + "px" : window.innerHeight - d3.event.pageY - clientrect.height + "px"
})
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
Is it possible to split pages vertically using wkhtmltopdf? This would basically turn a single page into two pages.
I've drawn a little image, maybe that makes it a bit clearer.
I had to face a similar issue in my project.
You have 2 ways to solve the problem:
One way is to solve it using CSS, however the version of webkit included in wkhtmltopdf (at least the stable version) seems to be a bit old and does not support CSS multi-columns directives very well, see here.
For future reference I copy&paste the example template included in the linked issue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
border: none;
width: 17cm;
}
.container {
/* You *must* define a fixed height which is
large enough to fit the whole content,
otherwise the layout is unpredictable. */
height: 28em;
/* Width and count aren't respected, but you
have to give at least some dummy value (??). */
-webkit-columns: 0 0;
/* This is the strange way to define the number of columns:
50% = 2 columns, 33% = 3 columns 25% = 4 columns */
width: 33%;
/* Gap and rule do work. */
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid black;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<h1>An Article</h1>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
Another option (the one I ended up using) is to setup the layout of the page using a table with 2..n columns. You can then use a template engine or even JavaScript to fill the page with content and split the pages.
This approach is simple and works well if the content in the page has predictable size, in fact you cannot rely on wkhtmltopdf for splitting the content into several pages, you must do it yourself with the code.
Approach 1) is quite buggy but might be worth a shot if you're dealing with text, which might not be very suitable for approach 2).
If your content is regular it will be reasonably easy to hop on approach 2) and lay down the elements and split the pages using the code.