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 <r…
Continue reading →
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 be placed on the left or right. So I wanted something which mimicked "Paper…
Continue reading →
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 HTML element should be used to group them? It…
Continue reading →
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 HTML which looks like this (edited for brevity): <li itemscope itemtype="https://schema.org/Comment"…
Continue reading →
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 canadd more bulletsby pressing enterHow 🆒 is that?!Same goesfor numbered listsclick here and type a new lineSplelcheck is …
Continue reading →
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 that lots of people cite my blog in academic papers - so I wanted to make …
Continue reading →
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: pink 1px; draws a pink outline around text. This…
Continue reading →
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 to view a conversation object as AR. Play! You can play with it yourself at TweeView.ml/ar. You will need…
Continue reading →
When someone on Twitter mentions my blog, the WordPress WebMentions plugin automatically fetches those Tweets and turns them into comments on the blog post. It looks something like this: That is pretty cool - but has one slight problem. If someone changes their Twitter avatar, or deletes their account, the image disappears and I'm left with a broken image. Booo! So, how do we fix this?…
Continue reading →
Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view. What's causing this? Try opening this link to a window size detector in a background tab. Then visit that tab. On Chrome, this is what I see. If I hit the refresh button on that tab, the …
Continue reading →
Did you know - WordPress Markdown supports footnotes? There is some documentation but I thought I'd write a slightly more comprehensive guide. The code is pretty simple. Write [^1] where you want your first footnote link to appear. Then, later in the document, write [^1]: The text of the note. It doesn't matter what number you put inside the [^…], WordPress automatically generates a sequential …
Continue reading →
(You may already know this, but I didn't. Every day is a school day.) HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with: <html lang="en-GB"> That says the entire page is written in English, with the sub-type of Great Britain. This means your browser might offer to translate…
Continue reading →
