Safari ebooks reader improvement

README.md

A simple script for adding a jump key (N / B) with two guidelines to help reading on PC easier.

The progress is also more trackable with page and percent

script.js

document.body.addEventListener('keydown', (event) => {
	console.log(event);
	if (event.keyCode === 78) {
		document.getElementsByTagName('html')[0].scrollBy(0, 300);
	} else if (event.keyCode === 66) {
		document.getElementsByTagName('html')[0].scrollBy(0, -300);
	}
});

function addGuidelines() {
	const top = document.createElement('div');
	const bottom = document.createElement('div');
	
	document.body.append(top);
	document.body.append(bottom);
	
	top.className = "jump-guideline jump-guideline-top";
	bottom.className = "jump-guideline jump-guideline-bottom";
};

function getPageSizeInfo() {
	const rootNode = document.documentElement;
    
    const documentHeightPx = rootNode.scrollHeight;
    const pageHeightPx = rootNode.clientHeight - 144;
    const topPx = rootNode.scrollTop;

    return [documentHeightPx, 700, topPx];
}

function addPageBreaks() {
	const bookContent = document.getElementById('book-content');
	const contentElement = document.getElementById('sbo-rt-content');
	if (!bookContent || !contentElement) {
		return;
	}
	
	let container = bookContent.querySelector('.page-breaker-container');
	if (!container) {
		container = document.createElement('div');
		container.className = 'page-breaker-container';
		bookContent.append(container);
	} else {
        container.innerHTML = "";
    }
    
    container.style.left = `${contentElement.offsetLeft - 100}px`;
	
    const [documentHeightPx, pageHeightPx, scrollTopPx] = getPageSizeInfo();
	
	const breakerPace = pageHeightPx;
	const breakerCount = documentHeightPx / breakerPace;
	for (let i = 0; i < breakerCount; i++) {
		const breakerYPx = i * breakerPace;
		if (breakerYPx < scrollTopPx - pageHeightPx || breakerYPx > scrollTopPx + pageHeightPx * 2) {
			continue;
		} 
		const breaker = document.createElement('div');
		breaker.className = 'page-breaker';
		breaker.innerText = `${i}`;
		container.append(breaker);
		breaker.style.top = `${i * breakerPace}px`;
	}
}

function tryAttachingProgress() {
    const progressInfoNode = document.querySelector('#main section div.orm-ProgressBar-labels');
    if (progressInfoNode === undefined) {
        return
    }

    const originalInfo = progressInfoNode.innerText.split('|')[0].trim();

    const [documentHeightPx, pageHeightPx, scrollTopPx] = getPageSizeInfo();
    
    const scrollPercent = Math.round(scrollTopPx / documentHeightPx * 100);
    
    const currentPage = Math.floor((scrollTopPx + pageHeightPx) / pageHeightPx);
    const totalPages = Math.round(documentHeightPx / pageHeightPx);

    progressInfoNode.innerText = `${originalInfo} | ${currentPage} / ${totalPages} pages (${scrollPercent}%)`;
}

setInterval(tryAttachingProgress, 500);

addGuidelines();

new ResizeObserver(addPageBreaks).observe(document.documentElement);
document.addEventListener("scroll", (event) => {
	addPageBreaks();	
});

style.css

@media only screen {
	#root #book-content #sbo-rt-content p, 
	#root #book-content #sbo-rt-content ul li, 
	#root #book-content #sbo-rt-content ol li, 
	#root #book-content #sbo-rt-content dl dd,
	#root #book-content #sbo-rt-content dl dt{
		font-family: 'Roboto Slab'!important;
		hyphens: none!important;
		font-size: 1rem!important;
	}
	
	#root content #sbo-rt-content .figure h6 {
		font-size: 0.7rem!important;
	}
	
	#book-content #sbo-rt-content h2:before,
	#book-content #sbo-rt-content h3:before,
	#book-content #sbo-rt-content h4:before {
		position: absolute;
		margin-left: -3.5rem;
		color: #0002;
		text-align: right;
		width: 3rem;
	}
	
	#book-content #sbo-rt-content h2:before {
		content: "##";
	}
	
	#book-content #sbo-rt-content h3:before {
		content: "###";
	}
	
	#book-content #sbo-rt-content h4:before {
		content: "####";
	}
	
	code {
		color: #0044ba;
		padding: 2px;
	}
	
	.jump-guideline {
		position: fixed;
		left: 0;
		right: 0;
		background: #1000;
		z-index: 100000;
	}
	
	.jump-guideline-top {
		top: 364px;
		border-bottom: 0.3px solid #0001;
	}
	
	.jump-guideline-bottom {
		bottom: 374px;
		border-top: 0.3px solid #0001;
	}
	
	.page-breaker-container {
		width: 100px;
		position: absolute;
		top: 0;
	}
	.page-breaker {
		position: absolute;
		left: 0;
		width: 64px;
		height: 1px;
		background: #aaa;
		font-size: 13px;
		color: #aaa;
	}
}