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.

Reply via email

Why the madness: ebooks feel kind of sterile to me, and I’m intrigued by the idea of giving them a more analog feel.

The experiment is still early on (I’ve only automated the first step so far), but at this point the process involves:

1. Turning the EPUB into a PDF (concatenating each file in the EPUB into a single HTML file, setting some print CSS rules, and printing from HTML to PDF in a browser)
2. Turning each page into an image (at left in the above image)
3. Eroding/dilating the image to simulate ink spread
4. Adding a very slight ripple
5. Blurring the next page, flipping it backwards, and compositing it at a low opacity
6. Adding some paper texture (at right in the above image)
7. Compiling all the page images back into a PDF

Other notes:

• This does mean larger file sizes, but not prohibitively so. (For me, anyway.)
• Right now I’m experimenting with doing this statically, in PDF but I imagine most if not all of it could be done dynamically in-browser. (filter: blur(0.25px) contrast(3) in CSS applied twice to text can give a roughly similar effect to erosion/dilation, for example.)
• The current erosion/dilation method is acceptable, but I feel like there’s more room for improvement here.
• A shortcut to doing the full process is to export a blurred backwards page image, composite it onto the paper texture, and then use that as the background image on each page. You lose the variety, but it’s probably not noticeable.

Reply via email