Virtual column for more than 2 displayed columns

[JayPanoz]

Navigator-html-injectables has an helper that inserts a blank virtual column at the end of the resource to fix snapping and page turning issues caused by an odd number of columns when displaying two columns.

In ReadiumCSS version 2, the number of displayed columns is no longer constrained so the helper should take that into account and be updated.

For reference, the current function.

ts-toolkit/navigator-html-injectables/src/helpers/document.ts

Lines 19 to 43 in 2a44a91

	export function appendVirtualColumnIfNeeded(wnd: ReadiumWindow) {
	const id = "readium-virtual-page";
	let virtualCol = wnd.document.getElementById(id);
	if (getColumnCountPerScreen(wnd) !== 2) {
	if (virtualCol) {
	virtualCol.remove();
	}
	} else {
	const documentWidth = wnd.document.scrollingElement!.scrollWidth;
	const colCount = documentWidth / wnd.innerWidth;
	const hasOddColCount = (Math.round(colCount * 2) / 2) % 1 > 0.1;
	if (hasOddColCount) {
	if (virtualCol)
	virtualCol.remove();
	else {
	virtualCol = wnd.document.createElement("div");
	virtualCol.setAttribute("id", id);
	virtualCol.dataset.readium = "true";
	virtualCol.style.breakBefore = "column";
	virtualCol.innerHTML = "​"; // zero-width space
	wnd.document.body.appendChild(virtualCol);
	}
	}
	}
	}

Comments on anticipated challenges and issues, alternative ideas, etc. welcome. Now is probably the best time to revisit it.

[chocolatkey]

I want to note, this function is from the kotlin-toolkit:

https://github.com/readium/kotlin-toolkit/blob/develop/readium/navigator/src/main/assets/_scripts/src/utils.js#L32-L59

[JayPanoz]

That’s an important note. Thanks.

As @HadrienGardeur stated during the call yesterday, other toolkits may differ and not do more than 2 columns but I guess it would be a good idea to make sure everyone involved is aware of this issue and its developments, especially as it adds complexity to a tried and tested solution.

In theory adding as many virtual pages as needed depending on the number of columns should work, but there are possible side effects we’re not aware of yet.