What's the most malicious thing you can do with an injected HTML heading element?


The HTML5 Logo.

A bit of a thought experiment - similar to my Minimum Viable XSS and SVG injection investigations. I recently found a popular website which echoed back user input. It correctly sanitised < to &lt; to prevent any HTML injection. Except… It let through <h2> elements unaltered! Why? I suspect because the output was: <h2>Your search…

Continue reading →

Simultaneous Translation in HTML


The HTML5 Logo.

How do you show two languages simultaneously in HTML? If you want to show text in a foreign language, the markup is simple: <html lang="en-GB"> ... As Caesar said: <i lang="la">veni vidi vici</i> That says the page is in British English (en-GB) but the specific phrase is in Latin (la). But how can you offer…

Continue reading →

HTML Ruby and Bidirectional Text


The HTML5 Logo.

The set of HTML <ruby> elements allow us to add pronunciation above text. For example: "When you visit the zoo, be sure to see the panda - 熊(Xióng)猫(māo)." This is written as: <ruby>熊<rp>(</rp><rt>Xióng</rt><rp>)</rp></ruby><ruby>猫<rp>(</rp><rt>māo</rt><rp>)</rp></ruby>. That is, the word or character which needs text above it is wrapped in <ruby>. The pronunciation is wrapped in <rt>. The…

Continue reading →

Paper Prototype CSS


An HTML table - every element is askance.

Introducing Paper Prototype CSS. When I first started designing the OpenBenches website, I wanted to make it look deliberately crappy. I didn't want the people testing it getting too hung up on what it looked like. I've found that some beta testers can only focus on whether the colours are right, or if things should…

Continue reading →

How should user comments be marked up in HTML5?


The HTML5 Logo.

This is quite the epitome of yak-shaving! Suppose you have an article written in HTML. The basic layout might be something like: <body> <main> <article> The content of your article ... Pretty standard. Now suppose you let users add comments to the article. I have two questions: Where in the tree should they go? What…

Continue reading →

Semantic Comments for WordPress


The Logo for WordPress

As regular readers will know, I love adding Semantic things to my blog. The standard WordPress comments HTML isn't very semantic - so I thought I'd change that. Here's some code which you can add to your blog's theme - an an explanation of how it works. The aim is to end up with some…

Continue reading →

Edit this blog post!


Me wearing a Google Glass headset

This is a regular HTML page. But if you click or tap on the text, you will be able to edit it! HTML is magic! This isn't a fancy styled <textarea>, it's a <div> element which uses the contenteditable global attribute. There are some nifty features - depending on your browser. You can add more…

Continue reading →

How to add ISSN metadata to a web page


creenshot of an email from the British Library. Dear Terence Eden INTERNATIONAL STANDARD SERIAL NUMBER (ISSN) Thank you for your recent enquiry, we have assigned ISSN to the following publication(s): Terence Eden’s blog ISSN 2753-1570 .

Inspired by John Hoare at the Dirty Feed blog - I've asked the British Library to assign my blog an International Standard Serial Number (ISSN). An ISSN is an 8-digit code used to identify newspapers, journals, magazines and periodicals of all kinds and on all media–print and electronic. Why? Shut up. OK. It turns out…

Continue reading →

-webkit-text-stroke and emoji


Group of emoji.

The CSS property -webkit-text-stroke is a curious beastie. MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web." And yet, it works everywhere. All modern browsers support it. Except on Emoji. Here's how it work. -webkit-text-stroke:…

Continue reading →

Augmented Reality Twitter Conversations!


I've recently launched TweeView - a new way to visualise Twitter conversation threads in 2D and 3D. Sadly, I don't have a Virtual Reality system - feel free to buy me one! - but I have the next best thing. A web browser! Demo! Using the awesome power of A-Frame, here's a demo of how…

Continue reading →