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.
 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 to adapt the text size to the screen size there are special problems.
 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
Unfortunately reflowing eBooks are based on the technology used for web pages. For web pages the pages can easily scroll so vertical placement of the figure on a page is not too important but an eBook has discrete of unknown size and the standard committees have not considered this an important problem to solve. Thus a figure could appear on the page too low to display properly and be moved by the eBook reader to the next page leaving a large gap in the text on the page. Currently there is no good solution for this problem. What is needed is a float option that would permit the image to move to the next page but allow the text 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.
 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".
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.
<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.