Appendix to page 6

Textless parents

In case it puzzles why a textless parent can grow in size in reaction to a user altering the text size for the page, here is a little something.

Although a container might not have any text, it is still a potential parent of text. And, like many parents, it is foresightful, jumpy! The text which it could have (but does not have) could be big or small depending on what decisions are made by the author or the user.

As roughly explained in fig 1 on page 2, the invisible line blocks or rows are sized according to the biggest of any inline objects. The browser just makes provision. Pictures that are taller than the text will make the row box taller. But at some enlargement of the text (or potential text) the text line box will be taller than the pictures. The text line boxes will then determine the row height.

The text size is sized according to what the author says it should normally be or as it is overridden by the user. You can see for yourself in a moment. You are invited to alter the text size in fig 1 below. You can this by means of your browser controls, either mousing over a command under View menu or keyboard commands like 'Ctrl +' or 'Command +' or whatever.

Fig 1. The white boxes are the spaces between the inline images in the HTML markup for this page, marked up in <span> with a white background:
<div class="container"><img src="inlineA.gif" alt=""><span> </span><img src="inlineB.gif" alt=""><span> </span><img ...</div>

We could as well have real HTML text instead of images. The spaces between the images in fig 1 above are coloured white so you can see them better. Specifically so you can see the space reserved for a text character like an "A" or an "a" or a "y". The spaces wax and wane according to your control. They will grow bigger and certainly taller as you increase the font size. Even though there is no text. See how you can make the white boxes grow taller than the images (browsers have differing allowances for text adjustments).

If the background to the spaces were transparent, you might miss that it is these spaces that are waxing and waning and causing the parent to grow in height.

The images are a fixed size on an imaginary horizontal line that also provide a seat for the bottom of such letters as "m". Letters such as "y" have a bit called a descender going below this line. Images do not have such descenders and that is why the white boxes below - which are boxes that represent the space for any letter - dip below the images. No matter what size the image: look at the very tall crimson one!

Here is the very same as above fig 1 but with HTML text added:

Fig 2. The white boxes filled with text.