Is there a way to create a responsive sidebar in EPUB3, for example there would be a sidebar in tablet view but if the EPUB was viewed on a mobile it would become one column?


Most epub reading systems do not respond to media queries, so it's going to be hit or miss. You could try putting the sidebar styles first in your CSS, so that in the cascade on systems that don't understand media queries, the sidebar styles will get overwritten by the more general column styles, but no guarantees it will work.

Even on tablets, sidebars may be problematic at high font sizes: just like with tables, if the end of the sidebar does not fit on the current page, it will not continue onto the next page--it will just run off the bottom of the screen.

| improve this answer | |
  • I say this as someone who hasn't tested sidebars recently. But Kindle's media queries work just fine, and there's no reason to think it couldn't support a responsive sidebar. This article suggests that ibooks supports media queries medium.com/@sandersk/… – idiotprogrammer Jul 9 '15 at 18:29
  • The question was about Epub 3 specifically though, not Kindle. I haven't actually tested media queries in iBooks for a year or two; if Sanders says they're working now, I'm content to believe him. As a side note, Kindle media queries are fairly limited: there just let you select KF8 or mobi. – Tom Jul 9 '15 at 19:20
  • media queries work for iBooks on iPad currently – maxwell Jul 10 '15 at 15:28

I think it's definitely possible -- especially on ibooks, Kindle, and Google Play (and probably some others). (See this article about writing media queries to differentiate between different devices: https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219 )

The question then becomes: what should the ebook look like for smaller displays? And do you need to have a sidebar?

A lot of sidebar content can just be made into a box that is a block rather than inline element. Oreilly books have lots of these explanatory boxes, and readers are used to reading them as separate from the text.

The most common use for sidebars (for me at least) was inserting an inline graphic or a pullquote. With high resolution displays, inline graphics are now doable but as recently as 2 years ago it made little sense to include a graphic if it takes up 40% of screen width because the text to the side of it looked awful. My problem with putting graphics in sidebars is that I couldn't figure out if whether Android devices required low resolution graphics or whether -- like Kindle -- accepted high res graphics which it would downconvert depending on the intended device. (See my still unanswered question here: Interior Image requirements for non-Kindle distributors & devices with retina displays? )

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.