I'm two years late but hopefully this is helpful for someone. After a couple days searching the net and trying to get a multi-column / multi-page pdf going with Wkhtmltopdf this is what I came up with... works great and I haven't seen the solution around. It requires each column having a set width and height. The columns are cloned, it's contents position are offset to show the next span of text. Repeat until the entirety of the content has been displayed.
https://jsfiddle.net/pa2k6wj5/1/
HTML
<section class="parent">
<div class="column">
<div class="content">
(longform text goes here...)
</div>
</div>
</section>
CSS
.column {
position: relative;
width: 3in;
height: 5in;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.content {
width: 3in;
}
JS
// get elements
var parent = document.querySelector('.parent');
var column = document.querySelector('.column');
var content = document.querySelector('.content');
// calculate height values of column and it's content
var columnHeight = column.offsetHeight;
var contentHeight = content.offsetHeight;
// create an array of offset values
var offsetValues = [];
for (var i = columnHeight; i < contentHeight; i+= columnHeight) {
offsetValues.push(i);
}
// create a new column for each offset value
offsetValues.forEach( function(offsetValue, i) {
// init clone and add classes
var cloneColumn = document.createElement('div');
var cloneContent = document.createElement('div');
cloneColumn.classList.add('column');
cloneContent.classList.add('content');
// populate the DOM
cloneContent.innerHTML = content.innerHTML;
cloneColumn.appendChild(cloneContent);
parent.appendChild(cloneColumn);
// apply position and offset styles
cloneContent.style.position = 'relative';
cloneContent.style.top = '-' + offsetValue + 'px';
});
