One third width images (three equal width images side-by-side)
Asymmetric images (two side-by-side images, one twice the width of the other)
They are shown below:
Full width figure. Full width figures occupy a maximum width of 748 px.
Figure 99.1 Full width figure
Half width figure. Half width figures occupy a maximum width of 361 px each.
Figure 99.2 Tall imageFigure 99.3 short image
One third width figure. One third width figures occupy a maximum width of 232 px each.
Figure 99.4 short imageFigure 99.5 Tall imageFigure 99.6 short image
Asymmetric display, ⅓ and ⅔. The first (narrow) image has a maximum width of 232 px, the second (wide) image has a maximum width of 465 px
Figure 99.7 ⅓ widthFigure 99.8 ⅔ width
The structure behind each of these is very similar and once you understand the first two, you will understand all the rest and you will be able to create any combination you want.
15.1.1
The basic row and column structure of figures
Figures span the whole of the central column area, at the maximum screen width this is 748 pixels wide (see § 8.2). At its most basic, this would be a single image (like the example Figure 99.1 above) and the HTML for this is:
This uses two more semantic elements (see § 10.2): figure and figcaption. In terms of usage, they’re identical to the <div> element, I’ve used them here to provide information to search engines, these semantic elements identify the contents of the element as a figure (an image of some sort) and identify the text of the caption applied to the figure.
There are three classes used within the full width figure: fig-row, fig-col and fig1-1, some of you might be thinking “that looks similar to the responsive grid classes” and you would be right.
The way this works is a bit similar to the rg-row and rg-col classes (see § 8.3.1 and § 8.3.3), it was certainly my starting point.
The idea is that each row of figures (this could be one figure, two side-by-side figures or three side-by-side figures) is held in a <div> element with the class fig-row. This is the row that contains all the figures (similar to the rg-row of § 8.3.1).
Each figure within the row is contained in <figure> element with its own fig-col class, it is a single full width image, there will be only one fig-col class; if it two side-by-side images there will be two fig-col classes (one for each image). If there are three side-by-side images, there will be three fig-col classes:
Figure 15.3 Figure row and columns arrangements
Let’s start with the first line of the HTML:
<div class="fig-row">
The fig-row class sets the text properties for everything within the row that contains the figure (or figures):
It’s the usual, Concourse with British settings at a fairly small font size (0.6 rem), it has the standard text colour (#404030), the only unusual thing is the text is centre justified — this is mainly for the caption text which is indeed centre justified.
Next, the figure is set to span the whole of the central column area:
width: 100%;
Finally, it sets the margins and clears any padding:
margin: 1.5rem auto 0 auto;
padding: 0;
The margins are set to give some whitespace before the figure (separating it from the preceding text). The left and right margins are set to auto to centre the row (this is probably unnecessary, the row is 100% wide and will occupy the whole of the area anyway — still, belt and braces).
All straight forward stuff. We’ve defined a font, made the row occupy the whole width of the central area and applied some margins to give the necessary whitespace. Easy.
The next bit is a <figure> element that holds column containing the picture, there is one of these for each picture, in this case there is just one full width image:
<figure class="fig-col fig1-1" id="js--f99-01">
Let’s get the ID out of the way first, this is just a standard ID that uniquely identifies the figure, it is used purely to allow a link to be made to jump directly to the image from somewhere else (see Table 13.1). If you do not intend to link to the image from elsewhere on the website, you don’t need the ID (just delete the whole id="js--f99-01").
Ok, the classes, there are two of these, the first one is the fig-col class and this is used to define a whitespace margin on the left of the image, the second is used to define how many images are in the row — in this case it is a single image that occupies the whole row and is designated fig1-1 (this is similar to the rg-span class names of § 8.3.5, it spans one column of one column)
The first thing this does is define the column as an inline-block:
display:inline-block;
This just makes sure that if there is more than one fig-col, they line up next to each other in a row (if it were missing, the columns would be on top of each other).
The main thing the fig-col class does is establish a left margin of 2.5% of the central column width (at its largest this is 18 pixels):
margin: 0 0 0 2.5%;
It then removes the margin from the first fig-col class in the row:
.fig-col:first-child { margin-left: 0; }
The very first column doesn’t need the left margin; it should be aligned with the left edge of the central column area.
The upshot of this, in the case of a full width image, is that the fig-col class does not do anything, the first-child is the only occurrence of fig-col in a full width image and so the margin is removed. I leave it in for consistency.
The first thing sets the width of the column, in this case it is set to 100% to occupy the whole width of the row (this is a single, full width image).
The next bit you might think is not necessary, but it is. It sets any image that is contained within a fig1-1 class to be 100% of the width of the fig1-1 class.
Images by default will be displayed at the actual size of the image (in the case of the image being displayed here: fig-99-01.png its actual size is 1920 × 1080 and this is too big to fit the page), we want the image to be the same size as the column that holds it — if its actual size is smaller than the column width the image will be made bigger until it fits and vice-versa, if it’s too big it will be made smaller.
The easiest way to do this is to use the img descendant selector to set the image to be 100% (i.e. the image will always be the same width as the fig1-1 class):
.fig1-1 img { width: 100%; }
After all that, all we’ve done is define a row that is the width of the central area column and define within it a div that in this case has a column class that applies a margin and then removes it and a fig class that ensures the column is the same width as the row and the image it contains matches this width.
15.1.2
Loading the image
So essentially, at this point, we’ve built a container to hold the image and in this case, that image will fill the full width of the central column.
Now comes the picture itself:
<img src="01-pages/99-00-typicals/02-images/fig-99-01.png" alt="Figure 99.1 - Full width image">
This is a straight forward img element, there is absolutely nothing odd about it and there are no classes associated with it. It just loads whatever picture it is given in the src attribute (just like the picture of Henry in § 5.2).
The images should be stored in the folder structure of § 4.2.2, in this case the path is:
01-pages/[pagename]/02-images/
Where [pagename] is the name of the HTML page without the .html at the end (in this case, the web page is called 99-00-typicals.html and consequently the path is: 01-pages/99-00-typicals/02-images/).
All the image within my website start with the word fig-, this is followed by the number of the picture (in this case it is figure 99.1 and so the filename of the image is fig-99-01, I make all the numbers two digits. The extension depends on the type of image being displayed — in this case it is a .png file, other common ones being .svg and .jpeg).
The alt attribute should always be used (search engines don’t like it if you don’t put it in, it’s considered bad form); it gives a very brief explanation of what the image is. In my case I use exactly the same text that is in the caption (see below).
15.1.3
The figure caption
The figure caption is contained in a <figcaption> semantic element, and this itself is contained in the same div as the image (the fig-col div)
The figure caption is just a text entry:
<figcaption>Figure 99.1   Full width figure</figcaption>
In this case the text is:
Figure 99.1 Full width figure
The   in the middle is another one of the special HTML characters that can be entered with an &code (see § 6.11). In this case,   is an em-space character (basically a large space) that leaves a noticeable gap between the figure number and the associated text.
The <figcaption> has some associated CSS, not much:
figcaption { margin-bottom: 1.2rem; }
It just applies a bottom margin to give some whitespace between the bottom of the caption and any text that may follow.
The <figcaption> element must be a direct child of the <figure> element, the <figcaption> must be inside the <figure>...</figure> element. It will fail validation if it is not.
