wheresrhys

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.

Last year my job was front-end development for dreamteamfc.com, the Sun’s fantasy league website. Much of the work involved styling tables of data, such as that on the right (and that was by no means the most complicated design, though I don’t have a dummy password any more to be able to access them).

It was a source of constant frustration to me that there was a distinct lack of useful information on the web on how to style tables. Any search for “html table design” or “styling html tables” would either result in an outdated guide to designing websites using html tables (It would be great if the w3c had a great big fiery sword they could use to scour the internet of all mentions of using tables for page layout, as the late nineties has left millions of outdated web design tutorials on the web, cluttering up the place and leading astray people new to the field), or turned up a hopelessly unambitious tutorial on how to use very work-a-day CSS to style text colour and background colours.

So I had to get to grips with data tables – the first I had ever styled as I never learned the bad old ways of web design using non-semantic tables – and after doing so fairly successfully (the only extra markup, apart from classes, needed for the design on the right was an empty footer row in the table, and only a few tiny images too) I thought I should share what I’d learned on the web as few other people seem to be doing so.

Nearly a year later I’m finally getting going on this fairly huge task, and there shoudl, if I stay focused, be a number of posts to follow.

Incidentally, the screenshot on this page, and that on my post about internet explorer, were taken using Fireshot, a blinding firefox extension enabling screenshots of whole pages, cropping before saving. A must for anyone who ever needs to share images of web designs.

The funniest thing just happened:

I was adding this as my facebook status in one of the study pods at the library:
“Rhys is wondering why the amsterdam library has lots of signs up saying “2,000+ dicks”. 2,000 people and some dicks? More than 2,000 dicks?”

Just then a middle-aged man with his elderly father poked his head in to the pod and said in dutch something which must have been along the lines of “And look, father, in this modern library there are plenty of places where people such as this young genius can study hard”

Could there be a  better illustration of how the internet lowers our level of thought. From now on I will only have studious facebook messages.

On another note, I’m trying to choose a php framework to learn to use (akelos is the frontrunner), and used the website -www.phpframeworks.com to help me. Two interesting aspects of it are:

1. The site is wider than my screen. I guess it’s really as wide asmy screen, but they forgot to account for scroll bars. A rare example of a website aimed at the programming community that takes advantage of the fact that most of us (though alas not I) have massive screens.
2. It uses tables for its layout. After working for a day converting a site made with Frontpage to standards compliant, semantic xHTML, and revelling in the difference between the sites when I turn CSS off, it saddens me that everyone isn’t doing it. I mean, it’s actually quite good fun.

Happy valentine’s day