Figure

The term figure is used in book publication to identify the images, also known as illustrations, inside the book. This page identifies the translation techniques to get a figure to properly display in an eBook. The word figures is also used to identify numbers in typography. See Graphics for the formats of images used in Figures.

Use of Figures

Illustrations in a book often add a great deal of value to a book. However the existence of these figures tend to break up the flow of text. Often they are allowed to be placed in more convenient locations for less interference such as between paragraphs, top of the next page or even on the left or right edge with the text flowing around the figure. In this use they are called "floating blocks" of information. Other floating blocks include such items as tables. Translating these to an eBook has its own share of problems. Fixed page layouts such as PDF and Fixed layout ePub solve the problem by making a page identical to what it would look like on paper. But for pages that reflow have to adapt the text size to the screen size there are special problems. When a eBook is built from an existing paper book there can be times when where figure placement is hard to determine relative to its correspondence to the text. A figure number reference in the text can aid in this.

horizontal positioning

Horizontal positioning is a supported feature of most eBook formats. The image can be centered on the page left to right with the text stopping above the image and continuing below or the image can be positioned on either edge with the text permitted to flow around the image on the page. CSS can be used to float the image left or right and padding can be used to separate the image from the nearby text if needed. However if the image has a caption it can be touchy to keep the caption under or above the picture.

vertical positioning

Reflowing eBooks are based on the technology used for web pages. For web pages the pages can easily be scrolled so vertical placement of the figure on a page is not too important but an eBook has discrete pages of unknown size so the placement on a page cannot be predetermined. A figure at a fixed point in the text flow may be too big to fit on the remaining screen space. It will either need to be split or leave a large gap on the bottom of the page when the figure is moved to the top of the next page. The standards committees have not considered this an important problem to solve so currently there is no good solution for this problem. What is needed is a vertical float option that would permit the image to move to the next page but allow the text normally displayed after the image to continue to the bottom of the page.

figure reference

In textbooks it is often important to be able to reference a particular figure from the text of the book. This is normally done by assigning numbers to all of the figures. These are usually consecutive in the placement of the figure but may start over in a new chapter. If they start over they are often identified with the chapter number as well such a 1.2, to identify the second figure in chapter 1. This is preferable if there are global references to the figure since it can be found more easily if the chapter number is known.

In an eBook there are two things that are different. One is a plus. You can make the reference an actual clickable link so that the user can easily find the image. The second difference is that the figure number is usually placed in a caption attached to the image and for eBooks you need to ensure that the caption remains connected to the image. Some eBook readers have a back button so after the image is viewed the user can easily return to the text. However, some eBook readers do not have this feature. If the author foresees a problem in returning then they should create a back link in the caption itself so that the user can click to return. If it is only a page or so away then this is less important since the previous page button will work.

Making Figures Accessible

Accessible Publishing contains some tips to make information about figures more accessible to the handicapped. All figures in a document should contain the required alt attribute which should contain a brief and informative textual description of the image.

List of Figures

When there are a lot of figures that need global reference there is a need for a list of figures (LOF) to find the individual figures. The list contains the figure number and the caption (if present) for the figure. This is generally separate and just after the Table of Contents in the book. This list is sometimes referred to as a Table of Figures.

An eBook typically has only one place for the TOC so that it can be accessed directly. To make the LOF work the best way is to make a TOC entry for the name "List of Figures" and then make lower level entries for the individual figure reference entries.

In ePub 3 specification this is called a loi, list of illustrations, in the official Semantics Vocabulary. It would be defined in an attribute inside the text identifying the start as epub:type="loi".

Captions

Generally, but not always, a figure has a caption associated with it. It is the caption itself that is used in the LOF and is normally the target for any links in the eBook. In modern usage the caption is normally under the figure and will contain the figure number if there is one. Alternately the caption could be above the image.

The ePub standard defines a caption for tables but does not specifically define it for images. It is possible to include the caption in a title entry but that will not be displayed on most readers.

There are several ways to add a caption. The easiest way is to just place it in a paragraph under the image it refers to but there can be a problem with it appearing on the next page if the image happens to appear at the bottom of the page. One solution is to wrap the image and caption is a <div> tag and set it to avoid breaks inside using CSS. Unfortunately some eBook readers do not support the avoid.

Another solution is to place the caption inside the image itself. This keeps it together with the image but it is not searchable and it may not scale very well.

It is also possible to add a caption to the figure using SVG text element. Make the viewBox taller than the image size to make room for the text. This will keep the caption on the same page with the text. SVG will allow the image inside to be a bitmap image so this solution should work for all cases.

HTML5

HTML5 and by extension ePub 3 has direct support for figures using the figure element which is part of the semantics structure in HTML5. An interesting example is:

<figure role="img" aria-labelledby="fish-caption"> 
 <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
  </pre>
 <figcaption id="fish-caption">
  Joan G. Stark, "<cite>fish</cite>".
  October 1997. ASCII on electrons. 28×8.
 </figcaption> 
</figure> 

This shows the even ASCII Art can be interpreted correctly due to the semantics structure and the figcaption tag correctly gets included in the structure. The could be used, for example, to avoid some rather innocuous TTS rendering.