Homepage
Login
Profile
BookClubs
dmBox
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?
Free books android app tbrJar TBR JAR Read Free books online gutenberg
(2)More posts by @Bryan
2 Comments
Sorted by latest first Latest Oldest Best
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: 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? )
Free books android app tbrJar TBR JAR Read Free books online gutenberg
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.
Free books android app tbrJar TBR JAR Read Free books online gutenberg