Images

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

Note about processing images

This Case Study is concerned with how to include images in HTML. It does not explain how to clean up, rotate or scale your images. If you need help with those parts of the process, consult the Guide to Image Processing.

Ordinary centred illustration

The easiest to format, and also most common, kind of illustration is an illustration that you want to display centred on the screen, with a little space above and below to set it off from the surrounding text. This is obviously appropriate for full-page illustrations, as well as illustrations that were centred in the original.

N.B.: For illustrations that were not centred in the original, you (as the PPer) get to decide what to do. One option is to centre the image anyway. This approach is appropriate if it seems that the original typesetter positioned the illustration simply to save space. If the original layout (e.g., having the text flow around the image) appears to be significant, or if you just prefer that layout, see the relevant section below.

Let’s look at a simple example:

Centred illustration


This example has an illustration that almost falls between paragraphs, but not quite. First, we have to move it between paragraphs so that it won’t interrupt the reading flow. Then, we put it into its own <div>, so that we can easily centre it:

... bottom of the island.</p>

<div class="image-center">
  <img src="images/map.png" alt=""/>
</div>

<p>By means of this loadstone, the island is made to rise ...

In order to centre the image, we just set the relevant CSS on our <div>:

.image-center
{
  text-align: center;
}

This is all that’s required to include a centred image in HTML. It is often desirable to set illustrations off from the surrounding text by a little space, however, so let’s add that to our CSS as well:

.image-center
{
  text-align: center;
  margin: 1em auto;
}

Look at this!

Centred illustration with a caption

Illustrations often come with a caption below (or, occasionally, above) that describes the image. So, as our next example, let’s format an illustration with a simple centred caption:

Centred illustration with a caption


Formatting a caption to an illustration is really just a matter of putting the relevant text into the right place. Since ebookmaker splits our HTML versions into smaller pieces for the “mobile” formats, it is best to keep the illustration and its caption together inside one container—or they might easily end up on different “pages” (screens) on e-readers.

Since we already have a <div> for centring our image, it makes sense to put the caption into that same <div>. In our example, the caption consists of two centred lines of different sizes, which we code as two separate paragraphs:

<div class="image-center">
  <img src="images/hudson.jpg" alt=""/>
  <span class="highlight"><div class="caption">
    <p>The Historic Hudson&mdash;Doublé</p>
    <p class="smaller">Green Levant. Pictorial inlay and decoration tooled in gold.</p>
  </div></span>
</div>

Since we are probably setting a text-alignment of either “justify” or “left” on our <p> elements, we have to override that for our captions, as we want them to be centred. The same goes for any text-indentation we might have specified for paragraphs, since adding text-indentation to centred paragraphs shifts them off-centre. And the same also goes for margins; if we have set larger margins between paragraphs, that might look odd for the illustration captions.

.caption p
{
  text-align: center;
  text-indent: 0;
  margin: 0.25em 0;
}

That is all that is needed for centring our illustration captions. The only missing piece is the smaller font for the second line, for which we have already included a class of “smaller” in the HTML. The matching CSS looks like this:

.caption p.smaller
{
  font-size: smaller;
}

Look at this!

Centred illustration with a more complex caption

But what if our caption contains more than just centred text? What if there is a right-aligned page reference below the illustration, which should be right-aligned to the illustration’s width, not to the overall page width? Here’s an example:

Centred illustration with a more complex caption


In such cases, we have to restrict the caption’s width to the width of the illustration. This can be done by setting the “max-width” CSS property on the image’s <div> to the width of the illustration. To avoid ebookmaker removing a width value ending in “px”, specify the max-width in “em” (1em = 16px):

<div class="image-center" <span class="highlight">style="max-width: 26em;"</span>>
  <img src="images/wings.jpg" alt=""/>
  <div class="caption">
    <p class="right"><a href="#Page_157">Page 157</a></p>
    <p class="center">“I heard a noise over my head like the clapping of wings”</p>
  </div>
</div>

N.B.: You can use the same technique if your captions are long and you want to prevent them from becoming wider than the image. In this case, we are also setting “right” and “center” classes on the paragraphs inside the caption, since they have different alignments. Additionally, that allows us to set different CSS for the paragraphs—e.g., to nudge the page reference a little to the left from the right edge of the illustration:

.caption p.right
{
  margin-right: 1em;
}

Look at this!

Cover image: displayed in the HTML and “mobile” versions

As explained in the Best Practices, it is increasingly important to provide cover images for our books. If you do not have access to a scan of the original cover and are unsure what to use instead, consult our Post-Processing Policy re: Cover Pages and wiki PP guide to cover pages.

By naming your cover file "cover.jpg" or "cover.png" it will be included as a cover in the HTML and "mobile" formats. However, it is preferable to add the following line just below the <title>...</title> line:

<link rel="coverpage" href="images/cover.jpg" />

By adding an "id" to your HTML, you can add additional CSS to the cover image that should not be applied to any of the other illustrations. Some cover images, for example, look better with a thin black border around them:

#coverpage
{
  border: 1px solid black;
}

Which would be used in the HTML in this way:

<div class="image-center">
  <img id="coverpage" src="images/cover.jpg" width="411" height="600" alt="Book cover"/>
</div>

Look at this!

N.B.: The cover image most often should be in JPEG format unless it meets the critera to be |in PNG format and should be named "cover.jpg" or cover.png, depending on the format.

Illustrated title page, or other illustrated text

If you have an illustrated title page, or any other illustration with text that is not duplicated elsewhere in the book (e.g., as a caption), make sure to include the text as text in addition to the illustration. The easiest way of doing this is to include the title page or other illustration as an ordinary image, and reproduce the contained text below it.

Look at an example!

N.B.: This is important because it makes sure your text is searchable, and can be copied and pasted. It might also be helpful on small devices (such as mobile phones), where the image of the title page (or other text) might be very small—and the contained text hard to read or even illegible.

Thumbnail with link to a larger version

In some cases, you might want to provide a larger version of an illustration to the readers of your e-book. This is particularly applicable if there is small detail that is lost when scaling the image down to the dimensions commonly used in our HTML versions. A classic example would be a map, but the same may be true for very intricate line drawings or good-quality photographs. However, the recent revision to acceptable image size limits mean that a larger version may be provided inline, displayed at a reduced size, and no separate “large version” is necessary.

As an example, let’s start with our ordinary centred illustration, which we will reuse as a thumbnail with a link to a larger version of the same illustration. The only little change we need to make is to add the link around the image:

<div class="image-center">
  <a href="images/map-large.png">
    <img src="images/map.png" width="435" height="368" alt=""/>
  </a>
</div>

Note that we need two versions of our illustration for this approach; in the above example, the thumbnail is just called “map.png” and the larger version “map-large.png”. Both of them go into the “images” folder.

N.B.: If you prefer using a text link below the image instead of (or in addition to) a link on the image itself, you might want to consult the Case Study on Media Types and Mobile Formats for an example of how to hide “see larger version” links in the print and “mobile” versions.

Illustrated drop-caps

A commented example of how to code illustrated drop-caps can be found in the Case Study on Media Types and Mobile Formats.

Illustration with text flowing around it

Many of the books we work on have left- or right-aligned images with text next to them. Typesetters often used this layout in order to save space on the paper (and thus production costs), and in most cases, it will work fine to just centre the illustration above or below the relevant paragraph. In some cases, however, it might really look better to retain the original layout, with the text flowing around the image.

Let’s look at an example:

Illustration with text flowing around it


We could move the illustration above its paragraph; but since it would then fall right after the heading, the result might look a little strange. We could move it between the first two paragraphs instead, and that would probably work reasonably well. What if we want to reproduce the layout of the original, however, and display the illustration next to the text?

CSS has a property for exactly that: “float”. You just put the image above the paragraph and then set the “float” property to either “left” or “right”, and your image will be displayed to the left or right of the following paragraph(s). Here’s the relevant HTML:

<div class="image-left">
  <img src="images/eastman-plate-tank.jpg" width="126" height="200" alt=""/>
</div>

<p>What the film tank has done for films, ...</p>

And here’s the CSS that goes with it:

.image-left
{
  float: left;
  margin-right: 1em;
}

We set the image to float to the left of the text, and add a little space to the right of it to set it off from the surrounding text.

This is a good start and works well in browsers. In the “mobile” formats, however, it does not work because ebookmaker removes all instances of the “float” property. Thus, with our current code, the illustration would be displayed above the paragraph instead of next to it, and would still be left-aligned. Since that would not look very nice, let’s add CSS to centre the illustration in the “mobile” versions:

.x-ebookmaker .image-left
{
  float: none;
  text-align: center;
  margin-right: 0;
}

How does this work? First, we set the “float” property to “none”. This is not required, since ebookmaker will remove the “float” property altogether, but is safer in case future versions behave differently. Next, we set the text-alignment to centred, as in an ordinary centred illustration. And finally, we remove the margin we set above, since otherwise the illustration would be shifted off-centre by it.

Look at this!

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

Return to DP Official Documentation Menu