Should panoramic images be part of the HTML5 specification?

by @edent | # # # # | 8 comments
360 view of the inside of the concert hall.

Noodling thoughts. The humble <img> element is one of the oldest parts of HTML. It allows you to put a static image in a document. Later revisions allowed for animated images - like GIFs. And the <map> element made parts of the image clickable. But what about interactive images? Like panoramas and photospeheres? Here's a…

Continue reading →

Responsible Disclosure - John Lewis

by @edent | # # # # | 1 comment | Read ~672 times.
John Lewis Website with a big circle drawn on it.

The HTML5 specification is complicated. I've been an author on it, and even I couldn't tell you all the weird little gotchas it contains. Between that and "idiosyncratic" browser engines, it's a wonder the world wide web works at all. Let's talk about the humble <meta> element. As its name suggests, it contains metadata about…

Continue reading →

Convert DOI to a HTML5 / Schema citation

by @edent | # # # # #
The DOI logo.

This is a quick and dirty way to turn a DOI (Digital Object Identifiers for academic papers) into an HTML & Microdata citation. I use this to power my Citations page. Schema.org is a Microdata standard which allows machines to read your HTML and create semantic relations between documents. Here's a minimum viable citation: <blockquote…

Continue reading →

Creating an "Organization of Cartographers for Social Equality" map with OpenStreetMap

by @edent | # # # # | 1 comment | Read ~284 times.
Map of the world, south up, stretched.

If you've seen that episode of The West Wing, you'll remember this scene: I'm not a paying member of the OCSE, but I fully support their aims. Because messing around with maps is fun. So, can I build a web-first maps which is South-up, Pacific-centred, and Peters-projected? Here's what I managed to do using OpenLayers…

Continue reading →

Introducing the new HTML element - welcome <clippy>!

by @edent | # # # # | 13 comments | Read ~46,487 times.

Hello! It looks like you're writing a blog post - would you like help with that? chuckles Me and my colleagues at Microsoft have decided that the world needs more Clippy - the adorable animated paperclip. To help with that, we're bringing a new feature to Edge 6.0. Web Developers can now use <clippy> to…

Continue reading →

Adding Sign Language to HTML5 video

by @edent | # # # | 5 comments | Read ~290 times.
Video with overlay.

I watched this video from my colleagues in NHS England - it's the first time I've seen a Sign Language overlay on a Twitter video. Need help fast, but not sure what to do? Go straight to https://t.co/8VfK81f9u3 . To find out more about NHS 111 including how to use the NHS 111 BSL interpreter…

Continue reading →

Automatic preview image based on screenshot

by @edent | # # # | 3 comments | Read ~539 times.

When you share a URl on services like Twitter and WhatsApp, they often display a preview image. This is usually accomplished by the author of the page selecting an image from the page, and adding it to the Page's metadata like this: <meta property="og:image" content="http://example.com/preview.png"/> (See the OpenGraph Protocol and Twitter's Guide for more detailed…

Continue reading →

Limitations of HTML's title element

by @edent | # # # # | 7 comments | Read ~220 times.
The raw HTML displays in the tab.

How much do you know about the humble <title> tag? It has been there since the earliest HTML specification. The 1995 spec says: There may only be one title in any document. It should identify the content of the document in a fairly wide context. It may not contain anchors, paragraph marks, or highlighting. Remarkably…

Continue reading →

Updating all the examples in the HTML5 Spec

by @edent | # # | 3 comments | Read ~518 times.
A screenshot showing the difference between two text files.

I'm currently helping to edit the HTML5 specification. As part of our preparations for HTML5.3 I've started going through the provided examples and improving them. This blog post explains the what, why, and when of the process. You can follow along on GitHub. (As part of my job, I'm lucky enough to be on the…

Continue reading →

Using canvas to shrink images for Google Cloud Vision

by @edent | # # #
The HTML5 Logo

I've started using Google Cloud Vision for running text detection on OpenBenches images. There's just one problem - Google limits the size of the files that it will accept to 4MB. Why? Who knows! Obviously, it's easy to shrink an image server-side, but how do we do it in the browser? First, let's take a…

Continue reading →