Is it possible to use Media Queries to choose Fixed Layout pages?

Question

I'm reading through the epub3 spec and trying to get a handle on what media queries can be used for in combination with fixed layout documents.

I'd like to be able to create fixed layout pages with <meta name="viewport" specified for specific devices and select which device-specific pages are actually included in the reading order and ToC based on the device's screen dimensions.

The best route towards this seems to be to use the 'hidden' attribute on the <li>element in the nav xhtml, but this can't be altered by css as far as I can see.

I've also tried css visibility and display attributes, but these are clearly designed to change current rendering, not add or remove actual rendering-independant content - whereas the epub3 spec (as well as the html spec) suggests that hidden is intended for exactly the kind of thing I want to do.

Otherwise, any ideas on showing a different fixed layout page based on device screen dimensions would be gratefully received!

Answer 1

What you're looking for is the concept of "rendition mapping", rather than media query. It's the ability to select entirely different renditions (layouts, including reading order) based on device characteristics (among other criteria) within the same publication.

It's not in the current EPUB 3.0 specification, but it's chartered to be a future addition. See the rendition mapping charter, specifically the section on Rendition Selection and Mapping.

Answer 2

It seems like what you are trying to do somehow violates the notion of fixed layout, which assumes a specific screen geography. As far as I can see, you are going to need to create different books for different device sizes.

You could do media queries for screen dimensions, but there is no way to use these to control what is present in the spine to my knowledge. As you've correctly intuited, the CSS visibility property is about hiding HTML elements on a page, not spine elements. The hidden attribute in the TOC cannot be controlled via CSS.

You could try

@media (max-device-width: 640px) {
    body.omit-if-narrow { display: none; }
}

but I'm pretty sure that would give you a blank page.