(legible) captions on images

The previous post gives a method to overlay text atop an image, and though any color can be used, the text may not stand out clearly enough from the background. It's possible to specify a background for the text, but it lies behind the image so this approach doesn't work.

Instead, however, if the text is made a link, then the link's background color does show above the image and can be used to contrast with the text. Also, the background color can be made partially transparent so as not to completely block out the image. Strangely, any color specified for the link text itself seems to be ignored.

Notes:
The "href" in the anchor tag is needed to make it a link, and the empirically determined value "*" stops it from actually going anywhere when touched. (Otherwise it would have to point to some unique id). The padding and rounded corners are for aesthetics.

There is still visual feedback when the link is touched and this could be used, for example, to change the background or eliminate it altogether to better see the underlying image (as in the hover selector). Or perhaps better, just double tap the image to zoom and pan without the caption and then hit done to restore.

This works in iBooks and Marvin.

XHTML
<div class="container">
<img alt="" src="../Images/theimage.jpg" />
<p class="caption up"><a class="frame" href="*">the caption</a></p>
</div>

CSS
div.container {
 display: inline-block;
 width: 100%;
 text-align: center;
}
p.caption {
 font-size: .8em;
 font-style: italic;
 text-align: center;
}
p.up {
 margin-top: -2em;
 margin-bottom: 0;
}
a.frame.link {
 padding: 0em 2em;
 border-radius: 10px;
 text-decoration: none;
 background-color: rgba(255,255,255,0.75); /*white with transparency*/
}
a.frame:hover {
 text-decoration: none;
 background-color: transparent;
 visibility: hidden; /*zap entire caption */
}

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.

Scaling full screen images with Media Queries

Images with an aspect ratio (width/height) less than that of the screen’s should be scaled by height while those greater should be scaled by width. e.g. extreme cases are portraits in landscape screen orientation and landscapes in portrait screens. There are no programming capabilities in xhtml/css (except possibly in javascript), but media queries can be used for a kind of solution. [svg wrappers might be another  way to go?]

In particular, take the three ratios (and their inverses) in iOS devices: 

2/3 for original iPhones and iPod Touches

3/4 for iPads

40/71 for current iPhone and iPod Touch [9/16 is advertised but it’s actually 40/71]

Then place the image ratio on this scale increasing to the right:

40/71  2/3  3/4  4/3  3/2  71/40

and note the screen ratio immediately to the right, i.e. >=

Now define classes in css corresponding to these ratios as follows, and (e.g. for a square image) use a construct in xhtml like

<div class=“ratio4x3”><img class=“ratio4x3” scr=“../Images/theimage.jpg” /></div>

@media  (device-aspect-ratio: 40/71) and (orientation: landscape) {

.ratio71x40 {height: 100%; }

.ratio3x2 {height: 100%; }

.ratio4x3 {height: 100%; }

.ratio3x4 {height: 100%; }

.ratio2x3 {height: 100%; }

.ratio40x71 {height: 100%; }

}

@media  (device-aspect-ratio: 2/3) and (orientation: landscape) {

.ratio71x40 {width: 100%; }

.ratio3x2 {height: 100%; }

.ratio4x3 {height: 100%; }

.ratio3x4 {height: 100%; }

.ratio2x3 {height: 100%; }

.ratio40x71 {height: 100%; }

}

@media  (device-aspect-ratio: 3/4) and (orientation: landscape) {

.ratio71x40 {width: 100%; }

.ratio3x2 {width: 100%; }

.ratio4x3 {height: 100%; }

.ratio3x4 {height: 100%; }

.ratio2x3 {height: 100%; }

.ratio40x71 {height: 100%; }

}

@media  (device-aspect-ratio: 3/4) and (orientation: portrait) {

.ratio71x40 {width: 100%; }

.ratio3x2 {width: 100%; }

.ratio4x3 {width: 100%; }

.ratio3x4 {height: 100%; }

.ratio2x3 {height: 100%; }

.ratio40x71 {height: 100%; }

}

@media  (device-aspect-ratio: 2/3) and (orientation: portrait) {

.ratio71x40 {width: 100%; }

.ratio3x2 {width: 100%; }

.ratio4x3 {width: 100%; }

.ratio3x4 {width: 100%; }

.ratio2x3 {height: 100%; }

.ratio40x71 {height: 100%; }

}

@media  (device-aspect-ratio: 40/71) and (orientation: portrait) {

.ratio71x40 {width: 100%; }

.ratio3x2 {width: 100%; }

.ratio4x3 {width: 100%; }

.ratio3x4 {width: 100%; }

.ratio2x3 {width: 100%; }

.ratio40x71 {height: 100%; }

}

This works in iBooks and Marvin on iOS devices. Media Queries don’t seem to work in other reader apps except for Kobo, which has other issues. They don’t seem to work in iBooks with OSX9 or Calibre, but these apps seem to scale the images correctly automatically.

Here are the gotchas:

First is that you need to use “device-aspect-ratio”, not just “aspect-ratio”. 

Next is that ratios>1 don’t match - you need to use the inverse with “orientation: landscape”. 

Finally, “@media” can’t take a qualifier - even “all” - or it won’t work right.