If you hang around with computerists long enough, they start talking about the Semantic Web. If you can represent human knowledge in a way that's easy for computers to understand it will be transformative for information processing. But computers, traditionally, haven't been very good at parsing ambiguous human text. Suppose you saw this text written […]
Continue reading →The limits of CSS styling select options
Sometimes you learn the most from failures! I wanted a <select multiple> element where the <options> were laid out in a grid. I nearly got there. It's possible to have the <option>s in a horizontal row - but only on Chrome and Firefox. Here's a quick fiddle showing the results: As you can see, it's […]
Continue reading →Responsive Yearly Calendar with Flexbox
This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive. Now, it behaves like this: The code is relatively straightforward. The HTML for the calendar looks like this: […]
Continue reading →How to password protect a static HTML page with no JS
I recently saw Robin Moisson's method of password protecting a statically served HTML page. It's quite neat! But it does rely on JavaScript. That got me wondering if there was a way to encrypt a static page only using CSS? And... I think I've done it! I'll warn you now, this is a deeply stupid […]
Continue reading →What's the most malicious thing you can do with an injected HTML heading element?
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 < 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
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 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
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?
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
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 →