Custom stylesheets on iOS

Today Caltech published the third volume of The Feynman Lectures making me jump all around, not quite unlike when the first volume became available. Having bought an iPad Air and loving it very much, I use it for most of my reading and studying. Feynman lectures looked quite unappealing on the iPad curtesy of the persistent “Buy Now” menu floating in the right-top corner and the tiny font size. To rectify this, I started looking for a way to load custom stylesheets is Safari on the iPad. I tried using Provisioning Profiles but could not figure how to make them work. Then, I stumbled across this tutorial on Juicy Studio detailing the process of creating an accessibility stylesheet bookmarklet. It basically solved the issue for me. Here is a page from the HTML version of The Feynman Lectures before and after.


How to do it yourselves?

  • Create a stylesheet, upload it to your hosting account and grab a direct link to the .css file.
  • Paste the link in place of STYLESHEET-LINK-HERE in the following JS

javascript:(function()%7Bif%20(!document.getElementById(‘someuniqueid’))%7Bvar%20objHead%20=%20document.getElementsByTagName(‘head’);%20if%20(objHead%5B0%5D)%7Bif%20(document.createElementNS%20&&%20objHead%5B0%5D.tagName%20==%20’head‘)%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElementNS(‘http://www.w3.org/1999/xhtml’,%20’link’));%20else%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElement(‘link’));%20objCSS.id%20=%20’someuniqueid‘;%20objCSS.rel%20=%20’stylesheet’;%20objCSS.href%20=%20’STYLESHEET-LINK-HERE‘;%20objCSS.type%20=%20’text/css’;%7D%7D%7D)()

  • Create a bookmarklet with the given code. If you need help with this, here is a helpful video; except that you’ll erase the URL and paste the JS we just edited instead of editing the URL.
  • Place the bookmarklets in “Bookmarks”, i.e. on the top level. This will allow you quick access.

Here is the bookmarklet I created for Feynman Lectures.

javascript:(function()%7Bif%20(!document.getElementById('someuniqueid'))%7Bvar%20objHead%20=%20document.getElementsByTagName('head');%20if%20(objHead%5B0%5D)%7Bif%20(document.createElementNS%20&&%20objHead%5B0%5D.tagName%20==%20'head')%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElementNS('http://www.w3.org/1999/xhtml',%20'link'));%20else%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElement('link'));%20objCSS.id%20=%20'someuniqueid';%20objCSS.rel%20=%20'stylesheet';%20objCSS.href%20=%20'http://culturedpixel.com/custom-stylesheets/fy.css';%20objCSS.type%20=%20'text/css';%7D%7D%7D)()

Here is another with dark mode!

javascript:(function()%7Bif%20(!document.getElementById('someuniqueid'))%7Bvar%20objHead%20=%20document.getElementsByTagName('head');%20if%20(objHead%5B0%5D)%7Bif%20(document.createElementNS%20&&%20objHead%5B0%5D.tagName%20==%20'head')%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElementNS('http://www.w3.org/1999/xhtml',%20'link'));%20else%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElement('link'));%20objCSS.id%20=%20'someuniqueid';%20objCSS.rel%20=%20'stylesheet';%20objCSS.href%20=%20'http://culturedpixel.com/custom-stylesheets/fy-dark.css';%20objCSS.type%20=%20'text/css';%7D%7D%7D)()

Here is one that I adapted from the Beautipedia Safari Extension. It makes Wikipedia a bit better than the “Reader” view on the iPad and you don’t even have to go to another app.

javascript:(function()%7Bif%20(!document.getElementById('someuniqueid'))%7Bvar%20objHead%20=%20document.getElementsByTagName('head');%20if%20(objHead%5B0%5D)%7Bif%20(document.createElementNS%20&&%20objHead%5B0%5D.tagName%20==%20'head')%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElementNS('http://www.w3.org/1999/xhtml',%20'link'));%20else%20var%20objCSS%20=%20objHead%5B0%5D.appendChild(document.createElement('link'));%20objCSS.id%20=%20'someuniqueid';%20objCSS.rel%20=%20'stylesheet';%20objCSS.href%20=%20'http://culturedpixel.com/custom-stylesheets/beautipedia/beautipedia.css';%20objCSS.type%20=%20'text/css';%7D%7D%7D)()

Before and after shots: