Primitive Browser Support
npars opened this issue · comments
The Standard Ebooks website doesn't render correctly in some E-Reader browsers. For instance the Kobo Libra H20:
Since the Kobo can download ebooks directly through the browser it would be great if the site was easier to navigate. Would it be possible to create a static "lite" version of the site, similar to the mobile websites that used to be common?
Maybe a good long term goal if someone is interested in working on it. We could serve a different stylesheet to browsers matching the Kobo user agent. But, debugging this would be extremely tedious.
I spent a while seeing if I could match the Kobo browser with specific media queries, but it looks like it just thinks it’s a normal browser on a normal machine. It doesn’t respond to @media (monochrome) or @media (max-color: 4) in any different way that my laptop. Unfortunate.
I spent a while seeing if I could match the Kobo browser with specific media queries, but it looks like it just thinks it’s a normal browser on a normal machine. It doesn’t respond to
@media (monochrome)or@media (max-color: 4)in any different way that my laptop. Unfortunate.
Could we key off of the user agent? My Kobo returns:
Mozilla/5.0 (Linux; U; Android 2.0; en-us;) AppleWebKit/538.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/538.1 (Kobo Touch 0384/4.30.18838)
How stripped back do we want the ereader experience to be? My default inclination is pretty stripped back, but keeping the logo and fonts as part of our branding.
I’m currently building a completely separate ereader.css file that doesn’t include anything else. Once I’ve got something good working I’ll work out what’s shared and maybe make a base.css that both can include.
Yeah I'm not certain. As much as we can get away with, I suppose. If we're targeting eink then the big factor that will influence most of it is going to be what the browser supports, then color, and then the poor tap responsiveness of eink. I assume Kobo is just using Webkit. I don't know what Kindle uses but I'm sure it's awful.
OK, sounds good. I’ll post up a couple of photos when I’ve got something looking OK and we can see what people think. I’ll also update at least the Kobo download instructions if this can be made to work OK.
I spent a while hacking down the current core.css but I keep on running into horrible bugs that are super slow and boring to fix. So it’s time for plan B: start a completely new ereader.css that attempts to keep the current SE flavour, but does so with an absolute minimum of code. I’m only going to bother styling the homepage, books listing, and book pages.
Is this the rationale as to why the current site uses XHTML html headers and not something newer like HTML5?
No, the site uses XHTML headers because it's serving XHTML5. It's a whimsical nod to epub's roots. See https://alexcabal.com/posts/standard-ebooks-and-classic-web-tech
@robinwhittleton Have you made progress on this? Would be keen to help and make sure it works on Kindle as well. If you've done the user-agent bit I could have a hack at the CSS.
Yep, never got anywhere with plan B (building a new stylesheet up from scratch). You’re welcome to hack on it; there’s a commit which loads a stylesheet for Kindle and Kobo at robinwhittleton@9876bdf that you can pull in to your fork if you want.
Thanks! Will give this a go soon (probably in at least two weeks, in case anyone else has suddenly become interested).
Hey, I've got a version of the CSS I'm happy with, so I've opened a pull request. I started from Robin's initial commit at robinwhittleton/web@9876bdf and then added the actual CSS.
One hacky thing I had to do was I removed multiple selection in the <select> element on the ebooks page. That's what's causing the major problems in the photo at the top of this issue. Neither Kobo or Kindle support it, with different failure modes. After that, the ebooks form was usable, and the rest was just styling to make it even better.
I tested the ereader CSS on these three devices:
- Kindle Voyage (6", 2014)
- Kindle Oasis (7", 2019)
- Kobo Forma (8", 2018)
Great work, thanks!