Thursday, January 9, 2014

Captions on images

Sometimes you want to place a caption directly on top of an image - e.g. when then image is full screen. One almost-too-simple way to do this is to follow on the image with a paragraph, say, styled with a negative margin-top and with the text in a contrasting color. e.g.

<div><img scr=“../Images/theimage.jpg” /></div>
<p style=“margin-top: -2em; text-align: center; color: red;”>the caption</p>

This works in iBooks (iOS and OSX9) and Marvin. This scales pretty well as font-size is changed, but in any case any overflow comes out under the image.

No comments:

Post a Comment