Scroll bleedthrough

I figured out how to add a rudimentary dynamic bleedthrough to Scroll (my homemade ebook reader), to make it feel a bit more like real paper — another step toward implementing what I wrote about in my paper EPUBs post last year.

Initially I considered baking the bleedthrough images onto the backgrounds in advance, but since the font can change (family, size, leading) and I wanted the bleedthrough to match, and since baking (whether directly onto the background textures or as transparent images to be layered on in the client) would mean dozens of permutations and images, I ended up doing this instead:

• On load, create a new canvas in memory (leaving it out of the DOM)
• Get the font information, padding, etc. from the DOM
• Render the lines of bleedthrough sample text onto the canvas, at a light opacity, flipping the canvas horizontally and applying a mild blur filter (noting that mobile Safari doesn’t yet support canvas filters, so the blur doesn’t work there)
• Export the canvas to a data URL
• Set that data URL as a second background image on the content area (where the first background image is the paper texture), with the blending mode set to multiply

It’s working fairly well, I think, and seems performant enough so far.

Potential future work:

• Get the bleedthrough to line up better with the text. While the leading stays more in sync in Firefox, in mobile Safari it drifts off within a few lines and I don’t know why. That said, for some reason I don’t mind that it doesn’t line up, and I’m not sure getting things aligned would be worth all the effort.
• Use the text of the book itself instead of a hardcoded sample text. Also may not be worth it, since the bleedthrough is subtle and isn’t meant to actually be read.