Nail on its head
A man looking like santa hammering in a nail
I really think I’ve hit the nail on its head when it come to captioning pictures. I really do.
It always bugged me that there wasn’t a really semantic way to caption a picture, despite it being a very common use of words both on the internet and off (for instance, I caption everything I see by talking about it VERY LOUDLY), and this all came to a head yesterday on stackoverflow.com.
And I hit upon the perfect semantic way of doing it. The picture on the right is a working example. The caption is actually a heading – a h5 in this case – above the image in the markup, but a combination of padding and positioning has put it beneath the picture.
Semantically if you put a heading above a paragraph/section then the heading should tell you what’s in that paragraphsection. Surely the same extends to images too. So my markup literally means “The following picture is a picture of a man looking like santa hammering in a nail”.
So here’s the bare bones code, though you’d obviously want to use classes and wotnot:
<div style="position:relative;padding-bottom:50px">
<h5 style="position: absolute; bottom: 0pt; left: 0pt;
height: 40px; line-height: 14px; font-size: 12px;">Caption</h5>
<img src="..."></div>
Vive la moderate improvement in accessibility.
Finally, I realised today that because of web standards, my job will get easier with time – another 2 years and I won’t have to take ie6 into account… a few more after that and ie7 will be gone… and from ie8 it will be plain sailing. So the job will be easier, but much less fun.
No related posts.
Tags: accessibility, caption, css, image, markup, positioning, semantics, web standards