@media for DP and PG Use

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

Prefatory notes

So, what’s all this talk about “@media” about? What is it? What does it do? Why would I need it? How do I use it?…

Imagine an e-book. (That should be easy, right?) Now imagine you’re reading the e-book on your computer screen. Next, imagine you’re printing it to read on the tram, or to give to your grandma who steadfastly refuses to even touch a computer—let alone read a “book” on it that doesn’t look or feel or smell like a book! And then, imagine you want to share the e-book with your nephew, who also steadfastly refuses to read on a computer screen—because he very much prefers his new iPad! Or even, iPhone. Or, if he’s the “bookish” kind, perhaps his shiny new e-reader?

A book is a book is a book. An e-book is not an e-book is not an e-book.

E-books are used for various purposes—many more than the “old” kind of books—and thus they need to be more flexible to leverage their full potential.

So, what is @media?

The short answer is: @media declarations allow you to distinguish between the different uses of an e-book, and to specify different CSS properties depending on how and where the book is displayed.

CSS allows for different styles depending on the type and capabilities of the device that your HTML document is displayed on. In CSS version 2, several different types were introduced, but these never got a lot of support by devices, other than the “print” media type. The “handheld” media type is one method that can instruct ebookmaker to use different CSS properties on the ebooks it produces, but the “x-ebookmaker class” method is now preferred for the reason explained below.

The "handheld" media type is now deprecated, and the following media types are the only ones supported in CSS3:

  • all - Used for devices of all media types, i.e., this is the same as not specifying a media type at all.
  • screen - Used for computer screens, i.e., if you read the book in your web browser - may apply to e-readers, tablets, phones, etc.
  • print - Used for printers, i.e., if you print out the HTML page.
  • speech - Used for screenreaders that "read" the page out loud.

Using an @media declaration, you can specify that some of your styles shall only apply to one or more specific media types—instead of indiscriminately.

And how do I use this, now?

@media declarations are placed in the CSS block at the top of your file. They create sections into which you can put any CSS rules, and they will only apply to the specified media types.

Let’s look at an example. Let’s say you want to have some vertical spacing in between paragraphs in your HTML file, but you don’t want that spacing when printed, so as not to waste paper. You would do this by specifying the default spacing in your CSS, and then overriding it in the specific CSS for “print” media:

  margin: 0.5em 0;

@media print
    margin: 0;

Do you have a few examples of its use?

For some more examples of what you can do with @media, see the Case Study on Media Types.

Making sure that your book is useable

One important thing to keep in mind when using @media blocks is that not all devices of a specific kind (e.g., all e-readers, all tablet computers, etc.) agree on which media type(s) they are. Some might think they are “screen”s, but others might think they are not.

What this means for us is that we have to make sure that our style sheet makes sense if a device considers itself to be a particular media type, or more than one media type, or none at all. If, for example, you want to hide something for “print” media, make sure that things don’t break if the device doesn't consider itself to be “print” or “screen”. Also note that if you define the same property more than once, the last value you specified will be used. These two considerations will be taken into account if you structure your CSS as in the example above: first define the default CSS that would apply to every device (whatever type it considers itself), then override for a specific media type in an @media section (which must come after the defaults). You will find that you rarely, if ever, need to override for the “screen” media type - your default CSS will usually be correct for screens.

Testing CSS for different media types

Now, let’s say you have written your CSS and are happy with how your book looks in your browser—and now you want to make sure that it also works reasonably well when printed, and when viewed on “mobile” devices.

To preview a print-out of your book, you can just use your browser’s Print Preview or Print to PDF features, or similar. If you don’t know how to do this in your browser, explore its Print dialog, which is usually the place where this feature can be found.

If you want to know what the “mobile” formats will look like after PG’s conversion of your HTML file, see the Introduction to Mobile Formats.

To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu