Media Types and Mobile Formats

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

What are “media types”?

“Media types” are a way of specifying different CSS for different devices, e.g., to make something look different when printed out instead of viewed on a screen. For an introduction on how they work, see the Introduction to @media for DP/PG Use.

Hiding “see larger version” links

Let’s look at a simple case where you might want to display something differently in the “mobile” and/or “print” versions from what the “screen” (browser) version has: image thumbnails with links to a larger version of the illustration. In a print-out, there is obviously no way to click a link; and in the “mobile” versions (epub and mobi), the large version may be unnecessary or not desired, making the (now non-clickable) text useless and confusing. Note that the limits on image sizes in “mobile” versions are more relaxed than previously and some devices will allow the user to zoom in on a larger image, e.g. a map. So you may well want to include the large image for “mobile” versions.

This first version will hide the link just for the “print” version, and will have the large image and the link to it still visible in the “mobile” version. We assign a class to the link we want to hide, or to its parent element. Now, in the ordinary CSS, we don’t have to do anything special with our new “larger-version” class. The important part is the CSS for the “print” version. We set elements of this class to “display: none” on print media in CSS. Note the addition of an id to the <a> element - this is to give ebookmaker something to link back to if the reader clicks on the automatically generated “Back” link that appears immediately below the large version of the image. Without this, the “Back” link will return to the wrong place.

@media print
{
  .larger-version
  {
    display: none;
  }
}

...

<div class="image-center">
  <img src="images/cromwell-thumb.jpg" width="265" height="300" alt=""/>
  <div class="caption">
    <big>Oliver Cromwell</big><br/>
    Green Levant—inlays of red and black leather. Decorative tooling in gold.
  </div>
  <div class="larger-version">
    [<a id="cromid" href="images/cromwell.jpg">See larger version</a>]
  </div>
</div>

However, if you are sure you do not want to include the larger image and the link in the “mobile” version too, there are two more edits necessary. First, you tell ebookmaker to "drop" the div containing the link by using the x-ebookmaker-drop class. Second, you tell ebookmaker not to follow the link to find the large image by using rel="nofollow" on the <a> - that way ebookmaker will know not to include the large image in the “mobile” versions it creates, thus reducing the file size:

@media print
{
  .larger-version
  {
    display: none;
  }
}

...

<div class="image-center">
  <img src="images/cromwell-thumb.jpg" width="265" height="300" alt=""/>
  <div class="caption">
    <big>Oliver Cromwell</big><br/>
    Green Levant—inlays of red and black leather. Decorative tooling in gold.
  </div>
  <div class="larger-version x-ebookmaker-drop">
    [<a id="cromid" href="images/cromwell.jpg rel="nofollow">See larger version</a>]
  </div>
</div>

Look at this!

Illustrated drop-caps

The books we work on often contain drop-caps—sometimes only larger letters, sometimes little images containing the letters, like this:

Sample page with illustrated drop-cap


There are several ways of coding these, but one common feature is that they all set the “float” property on the image, so that it will be embedded within the paragraph—i.e., next to the text, instead of above it. The trouble with this is that we cannot use the “float” property in mobile formats—since it will be removed by ebookmaker—and thus, our neatly positioned drop-cap will instead land right above the paragraph it belongs to, which really doesn’t look very nice:

Drop-cap without float


In order to make this more legible, it might be best to remove the illustrated drop-cap from the mobile formats altogether, and replace it with ordinary text. Let’s look at the code we might’ve used for the drop-cap:

<div>
  <img class="drop-cap" src="images/drop-m.png" width="100" height="113" alt=""/>
</div>

<p class="drop-cap"><span class="upper-case">Marie’s</span> prediction proved a true one, ...

The corresponding CSS takes care of “floating” the drop-cap, and hiding the first letter of the first word (so that it won’t be duplicated):

img.drop-cap
{
  float: left;
  margin: 0 0.5em 0 0;
}

p.drop-cap:first-letter
{
  color: transparent;
  visibility: hidden;
  margin-left: -0.9em;
}

.upper-case
{
  text-transform: uppercase;
}

Now, how does this work? On the image itself, the “float” property takes care of embedding the drop-cap into the following paragraph. The “margin” adds some spacing to the right of it, so that it doesn’t collide with the text.

The following paragraph has the “drop-cap” class, and our CSS uses the :first-letter selector to set some properties on just the first letter of this paragraph. We set the colour to “transparent”, and we set the visibility to “hidden”—either of those two declarations should take care of hiding the first letter, but including both is safer. Finally, we set a negative margin; this accounts for the hidden letter and moves the first line of text closer to the drop-cap image.

This all works fine and looks really nice in a browser; in the mobile formats, where the “float” property gets removed, however, it looks like the above image. In order to fix that issue, we will use the x-ebookmaker class, overriding things for files output by ebookmaker:

.x-ebookmaker img.drop-cap
  {
    display: none;
  }

.x-ebookmaker p.drop-cap:first-letter
  {
    color: inherit;
    visibility: visible;
    margin-left: 0;
  }

On mobile devices, we remove the image itself using “display: none”. This could also be done using x-ebookmaker-drop as described in the section on hiding links. Then, we override the formatting for the following paragraph’s first letter, in order to make sure it always gets shown in the mobile formats. The colour value “inherit” means “the same as the parent element”—which, in this case, is the paragraph that contains the first letter, and thus “inherit” yields the default text colour; visibility is set back to “visible”; and the margin to move the text left is removed again. All this CSS, taken together, ensures that the drop-cap is hidden and the paragraph will look just like a regular paragraph in the “mobile” formats—while still retaining the nice illustrated drop-cap in the HTML version for browsers and print-outs.

N.B.: The value “transparent” for the “color” property is not included in CSS 2.1; it was added in CSS 3. It works well in modern browsers, and the code also works well in most e-readers. If you use this code, however, you will have to confirm that this small amount of CSS 3 “has REC status” (which it does) by checking the relevant option when uploading your book. If you don’t have Direct Upload access yet, let your PPVer know and they will check the option when they upload.

Look at this!

Changing gesperrt emphasis to another type of emphasis

In some books, particularly non-English ones, gesperrt (letter-spaced) text is used for emphasis. (See the relevant example in the Case Study on Inline Formatting.) Unfortunately, many e-readers do not support the CSS “letter-spacing” property, and thus gesperrt text looks like ordinary text on them. If the text is gesperrt simply because that looks nice, i.e., presentational, that doesn’t matter much; if, however, it is used semantically for emphasis, then the emphasis shouldn’t get lost in the “mobile” formats—in which case you may want to replace gesperrt with a different type of emphasis.

If gesperrt is the only kind of emphasis in your book, then styling it as italics in the “handheld” versions usually works best—as italics are the most common kind of emphasis in modern books. If, however, there is both italic and gesperrt text, and you want to keep the distinction, then bold might work better as a replacement.

Let’s look at an example:

Gesperrt emphasis


In this case, we have stage directions in italics, and gesperrt emphasis. Our HTML markup for the relevant line might look like this, or similar:

<p><span class="speaker">SCHÖN.</span>
But, really, you’ve succeeded with <em>her</em>.</p>

In order to make the <em> elements look gesperrt instead of italic, we would add some CSS which would work for the “screen” and “print” versions—but what about on handheld devices? We just need to add the x-ebookmaker class in order to change the gesperrt emphasis to bold for “mobile” devices:

em
{
  font-style: normal;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

.x-ebookmaker em
  {
    font-weight: bold;
    letter-spacing: 0;
    margin-right: 0;
  }

Look at this!

Overriding ebookmaker’s CSS

As explained in the Introduction to Mobile Formats, ebookmaker adds a block of CSS to all e-books when converting them to “mobile” formats. Most of this CSS is useful for most e-books and should not interfere with what you want; sometimes, however, some of it might not work very well for a specific book, and you might want to change it.

Unfortunately, ebookmaker applies its own CSS after yours, so if both you and ebookmaker are using the same CSS selector, ebookmaker’s CSS will trump yours. In order to get around this problem, you have to change your selector to be more specific than ebookmaker’s.

Let’s look at an example to clarify this; ebookmaker adds a page break before every <h2> element:

h2
{
  page-break-before: always;
  padding-top: 1em;
}

This is usually a sensible thing to do, as most books start chapters on new pages. Sometimes, however, you will have a decorative illustration above each chapter—in that case, you would of course want the page break to occur before that illustration, not before the chapter heading:

Heading with a decoration above


Since ebookmaker uses h2 as the selector to which it adds the page break, we need to add something to that in order to make it more specific—so that we can override ebookmaker’s page break. An easy way of doing that is to add a class to the heading:

<div class="chapter">
  <img src="images/decoration.png" width="472" height="107" alt=""/>
</div>

<h2 <span class="highlight">class="no-break"</span>>CHAPTER III.<br/>
<small>MR. LONGCLUSE OPENS HIS HEART.</small></h2>

With that class in place, we can easily avoid the page break above our <h2> element, and add it above the decorative illustration instead:

.chapter
{
  page-break-before: always;
}

h2.no-break
{
  page-break-before: avoid;
  padding-top: 0;
}

Note that we are also resetting the padding above the heading to 0, because otherwise the padding would be added to the space between the illustration and the heading, which would then be larger than we intended. Also note that the class "chapter" used on the <div> has a special meaning to ebookmaker, causing it to choose the start of the chapter as a place to split the file it creates.

Look at this!

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

Return to DP Official Documentation Menu