↺ home

Bookmarklets for reading on iOS Safari

Safari on iOS doesn't let you adjust the font size and page width, but you can add these bookmarklets to manipulate the page. These bookmarklets use ES6, so they require iOS 10+.

To create a bookmarklet in iOS Safari: create any bookmark, set a title, and save it. Then, edit the bookmark and replace the URL with the block of JavaScript code. Make sure to copy the entire block including the "javascript:". It's easy to accidentally leave off the "j" - the two selection bars must encompass the entire block of code, even if the block is highlighted blue.

Font size -

javascript:(function() {
	const elems = document.getElementsByTagName('*');
	for (let i=0; i < elems.length; i++) {
		const elem = elems[i];
		let s = 16;
		if (elem.style.fontSize) {
			const fs = parseInt(elem.style.fontSize);
			if (!isNaN(fs)) {
				s = fs;
			}
		}
		s -= 2;
		elem.style.fontSize = s + 'px';
	}
})();

Font size +

javascript:(function() {
	const elems = document.getElementsByTagName('*');
	for (let i=0; i < elems.length; i++) {
		const elem = elems[i];
		let s = 16;
		if (elem.style.fontSize) {
			const fs = parseInt(elem.style.fontSize);
			if (!isNaN(fs)) {
				s = fs;
			}
		}
		s += 2;
		elem.style.fontSize = s + 'px';
	}
})();

Sans-serif and line height

javascript:(function() {
	const styles = `
		* {
			font-family: system-ui, sans-serif !important;
		}
		div, p {
			line-height: 150% !important;
		}
	`;
	var newSS  = document.createElement('link');
	newSS.rel  = 'stylesheet';
	newSS.href = 'data:text/css,' + escape(styles);
	document.getElementsByTagName("head")[0].appendChild(newSS);
})();

Page width -

javascript:(function() {
	document.body.style.margin = '0 auto 0 auto';

	const maxWidth = document.body.style.maxWidth;
	let currentMaxWidth = parseInt(maxWidth);
	if (isNaN(currentMaxWidth)) {
		currentMaxWidth = window.innerWidth;
	}
	const newMaxWidth = Math.max(0, currentMaxWidth - 50);
	document.body.style.maxWidth = newMaxWidth + "px";
})();

Page width +

javascript:(function() {
	document.body.style.margin = '0 auto 0 auto';

	const maxWidth = document.body.style.maxWidth;
	let currentMaxWidth = parseInt(maxWidth);
	if (isNaN(currentMaxWidth)) {
		currentMaxWidth = window.innerWidth;
	}
	const newMaxWidth = currentMaxWidth + 50;
	document.body.style.maxWidth = newMaxWidth + "px";
})();

Background color

javascript:document.body.style.backgroundColor = '#F6F4E5';

Make the text color black

javascript:(function() {
	const styles = `
		p, dt, dd {
			color: #000 !important;
		}
	`;
	var newSS  = document.createElement('link');
	newSS.rel  = 'stylesheet';
	newSS.href = 'data:text/css,' + escape(styles);
	document.getElementsByTagName("head")[0].appendChild(newSS);
})();