Mon Apr 27 14:05:16 PDT 2015
Positioning Figure Captions in HTML
 |
I spent some time over the weekend investigating how to allow figure captions in html text to be closely associated with article text and to stay together with their associated figure. This is apparently a difficult problem. What I have done up until now is simply have the figure in a paragraph of its own - but this leaves a lot of white space around the figure and is not as nice as having a figure right in the text.
I found this page: https://www.cs.tut.fi/~jkorpela/www/captions.html which spells out three options. I tried them all, initially preferring the style sheet based methods (e.g. the methods which employs float: right or float: left. However, these styles gave me problems, using multiple images on the same page led to way too much floating going, trying to clear the floating effect with 'clear: all' led to even more confusion and images at the bottom of the page.
So, I ended up using the 'single cell-ed table + caption' approach. The result is shown in the figure which illustrates this article. (I hope that it renders correctly in your browser!)
To clear the effect - that is to get your next paragraph to start in a standard way, I found that including a table with a width of 100% and no contents was effective.