A heading solution you haven’t seen before

Sometimes I see such gems in my daily work, I just have to share…

Currently, I’m working on upgrading a home-brewn Content Management System for a customer, and it has been around for a fair number of years. While it’s naturally old and outdated, it’s in pretty good shape given its age and IE-only support (initially built back in 2002 or so).

However, one thing really caught my attention the other day: how to select the desired font size for headings for pages. It was made up of an input field and a select element, to write the desired heading text and choose its size. Like this:

<input type="text">
	<option value="11">Small</option>
	<option value="12">Medium</option>
	<option value="13">Large</option>

Please notice the value 11, 12 and 13 for the option elements. In the first version, these were the actual font sizes used in pixels. So far, so good, all in order with how things were built before.


But then, at some point in time, something wonderfully entertaining happened! They decided that hard-coded font sizes wasn’t a good thing and not very semantic, so they went for using proper heading elements. Great! But, how did they ensure backwards compatibility (well, sort of) and avoid updating the CMS in any way?

This, my friends, you will not believe. Someone got the great idea of deducting the number 10 from the value set in the above depicted drop-down, and then in turn make into a corresponding heading element. So, a heading with a set size of 13, minus 10, turned into a h3 element with this magic formula:

13 (set CMS font size) - 10, then add h before it = <h3>Heading</h3>

The result of this is that the set size of 11 suddenly was h1 elements, 12 was h2 etc. The headings were thrown around a bit, but (sort of) backwards compatible.

When I saw this solution, I really didn’t know what to say. What do you think? :-)

Posted in Developing,Fun,HTML5/HTML/XHTML,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *