Published
Edited
Jun 28, 2020
4 stars
Insert cell
Insert cell
function to_px(x) {
const div = document.createElement("div");
div.style.display = "block";
div.style.height = x;
document.body.appendChild(div);
const rect = div.getBoundingClientRect();
div.parentNode.removeChild(div);
return rect.height;
}
Insert cell
page_height = to_px("432mm")
Insert cell
Insert cell
function insert_whitespace(page_height, previous) {
if (previous != null)
previous.splice(0).forEach(e => { e.style.paddingTop = null; e.style.display = null; });
else
previous = [];

const cells = document.getElementsByClassName("observablehq");
let offset = 0;
let diff = start_offset;

for (let i = 0; i < cells.length; i++) {
const cell = cells[i],
rect = cell.getBoundingClientRect(),
height = i === cells.length - 1
? rect.height
: cells[i + 1].getBoundingClientRect().top - rect.top - diff;

while (offset < diff + rect.top)
offset += page_height;

if (diff + rect.top + height > offset) {
if (height < page_height) {
cell.firstElementChild.style.paddingTop = `${offset - rect.top - diff}px`;
cell.firstElementChild.style.display = `block`;
previous.push(cell.firstElementChild);
}

diff = 0;
}
}

return previous;
}
Insert cell
insert_whitespace(page_height, this)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more