Archive for January, 2010

Accessible HTML5 Video with JavaScripted captions

What? Two blog posts in one day? Not really; this is just a teaser for another article.

The HTML5 video element provides a fantastic way to embed video into web pages without relying on plugins, and it is now supported in Opera, Firefox and Chrome, so things are looking up. One burning question however is “how do we provide alternative content for users that either can’t see, or can’t hear the video?

In this article on the Opera Developer Network, I demo a proof-of-concept solution.

5 feet 6 inches is the optimal height for a human

So, Mr Andy “Beanpole” Mabbett called me short. What he, and other lanky bastards don’t understand is that 5’6″ is the optimal height for a human being, and that is a fact proved by scientists.

The physics and biology are simple. If you are taller than the optimal height, not enough gravity reaches the top of the brain. This means that the blood tends to collect there, and not enough goes through the lower parts of the brain such as the hippocampus which controls things like spatial navigation. This is why tall people are often gangly and bump into things.

People shorter than 5’6″ have the opposite problem. Their heads are closer to the centre of the earth (where the gravity particles are formed in the base of volcanoes) so the blood tends to collect at the bottom of the brain and not flow so much at the top. This makes them more likely to commit suicide or suffer from an engorged hippocampus (which also controls long-term memory, which is why very short people like Hitler, Napoleon and Stalin never forgot grudges, for example).

However, at 5’6″, the distribution of gravity in the brain is perfect for optimal blood-flow around all areas, leading to high intelligence, superior wit, peak physical ability and extraordinary virility. Scientific fact.

Co-incidentally, I am five feet and six inches tall.

HTML5 it is a-changin’

Molly wrote

Inspired by Shelley Powers who quipped “HTML5, it is a changing” on Twitter, I in turn said I was gonna write a Dylanesque song about HTML5. Of course, between that time and the time I got to the next available WiFi point, Jeff Allen wrote the song.

Opera’s Man in Japan, Daniel Davis, gave us a touching rendition on his ukelele:

In homage to the man known as “Ukelele-San” from Sapporo to Nagasaki, as well as to Molly, Shelley, Jeff, Hixie and His Bobness, I offer my rendition:

Microsoft joins the SVG Working Group

From the IE Blog:

As a part of Microsoft’s continued commitment to interoperability and standards support, yesterday we submitted our request to join the Scalable Vector Graphics (SVG) Working Group of the World Wide Web Consortium (W3C). We’re excited to take part in ensuring future versions of the SVG spec will meet the needs of developers and end users.

Our chums in Redmond sponsored the SVG Open conference earlier in the year too.

All this snow? It’s hell freezing over.

Highlight search terms automagically with JavaScript and mark

For a while I’ve been wondering how to demo the HTML5 mark element. It’s quite a funky little element, acting a bit like a highlighter pen, to draw attention to some text. The spec defines it

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Over the yule break, the answer came to me (as it so often does) as I was demolishing a bottle of red. For a couple of years now, this blog has used a script that highlights search terms if you’re referred here by Google or Yahoo. The script is written by flame-haired temptress Stuart Langridge, who describes how it works:

It checks document.referrer for a querystring with q=somethingorother in it (as Google does, and as do a host of other search engines), breaks that query up into words, and then recursively walks each node from the BODY down, once for each search word, looking for text nodes. When it finds a text node it checks to see if it contains the current search word; if it does, it replaces the current text node with three new nodes — one which is a text node containing everything before the search word, a span containing only the search word (and of class “searchword” — this is why the highlighting works!), and another text node that contains everything after the search word.

With Stuart’s permission, I simply amended the script to surround the search term(s) with the mark element rather than a span, although I’ve retained the class searchword in case you want to style these marks differently from others.

In my CSS, I just added the rule article mark {background-color:#FFC0CB;} to turn it a gentle shade of pink (my other New Year Resolution is to get in touch with my feminine side) and we have a useful demo.

As Stuart released his code with an MIT license, you can download the HTML5 version, or grab the original from his site if you like the functionality but aren’t using HTML5 yet.

As I merely changed one single line of code, all credit and Caligula-shockingly depraved offers of carnal favours should be directed to Stuart.

For more information about the mark element, see Miek Robinson’s HTML5doctor article Draw attention with mark.

New Year CSS resolutions

Browser competition is hotting up again. Today’s release of Opera 10.5 pre-alpha New Year edition now includes HTML5 video, is the fastest browser on the planet, and also introduces lots of new CSS properties such as fancy borders, backgrounds and box-shadow like multiple background images, and CSS 2D transforms and transitions.

Many developers have assumed that only Gecko and Webkit browsers will ever render CSS rounded corners or transitions, so have only specified their CSS with -moz- or -webkit- prefixes—sometimes while simultaneously berating other browsers for not supporting these properties yet. Note that Microsoft has announced that IE9 will support border-radius but if you only specify Firefox and Safari in your code, your future IE9 users won’t see those wonderful rounded corners anyway.

So, to widen the reach of your super-sexy designs, please take a minute to add the -o- prefix to your CSS transitions and transform declarations, and to add border-radius and box-shadow without vendor prefixes.

Happy 2010. May your corners always by curvy.