As a dedicated and professional computer scientician, I believe that all indices must start at zero. Not one, not two, but zero. The zeroth element is sacrosanct to our creed; for in the beginning there was nothing. If you're using WordPress's JetPack, it uses an ancient version of Markdown Extra. You can either monkeypatch this, or install a separate Markdown plugin. I've patched my fork of…
Continue reading →
My name is Terence(/ˈtɛɹəns) Eden(ˈiːdən/). Modern HTML allows the user to use <ruby> to annotate text. This is usually used for furigana - which allows pronunciation to be placed above words. For example: "シン・ゴジラ (Shin Godzilla)" shows you how to pronounce both words if you are unfamiliar with kanji. The text can be any language or use any characters. In Japanese, it is quite often used to sh…
Continue reading →
Suppose you have lots of links on a page. You want to highlight the ones which point to example.com - is that possible in CSS without using JavaScript? Yes! This scrap of code will turn all those links red: a[href^="https://example.com"] { color: red; } Now, there are a few gotchas with this code. It matches the string exactly. So https://example.com will not match…
Continue reading →
It is sometimes useful to embed the contents from one website into another. For example, you may wish to quote a post from a microblogging site like Twitter, Threads, BlueSky, or Mastodon. All of them offer an "embed" button which will copy a snippet of code for you to paste into your website. Here's how they compare: BSky In my considered opinion, BlueSky is the only modern service which…
Continue reading →
I am a bear of very little brains sometimes. I had a site which, for various boring reasons, was printing a <style> element in the middle of the HTML's body. Because <style> is a metadata element, it should only appear within the <head> element. This is OK: <!doctype html> <html> <head> <style> a { color: #f00; } </style> </head> <body> … This is an error: <!doctype h…
Continue reading →
I'm a little bit obsessed with the idea of Semantic markup. I want the words that I write to be understood my humans and machines. Imagine this piece of code: print( "Hello, world!" ) Is that code example written in Python? C++? Basic? Go? Perhaps you're familiar enough with every programming language to tell - but most people aren't. Wouldn't it be nice to give an indication of what…
Continue reading →
Dan Q very kindly shared his script to make WordPress do good HTML. But I couldn't get it working. Looking at the HTML it was spitting out, the meta generator said it was HTML Tidy version 5.6.0. That's quite old! I confirmed this by running: echo tidy_get_release(); Which spat out 2017/11/25. Aha! There are a few bugs in this version of HTML Tidy, some of which are fixed in later…
Continue reading →
HTML documents have the concept of an alternate representation of the document. For example, a page's header might say: <link rel="alternate" type="application/rss+xml" href="https://shkspr.mobi/blog/feed"> That tells you there's an alternative representation of the page, what sort of content it is, and where it is located. That's nice. But it's hard for a browser to tell the user what that…
Continue reading →
By and large, the English language doesn't use diacritical marks. Even our loanwords are stripped of them; we drink in a cafe rather than the more pretentious café. This has a consequence for HTML and, by extension, eBooks. As a quick primer, modern computing gives us two main ways of displaying a letter with an accent. The first is simple - encode every single accented letter as a separate …
Continue reading →
While attending IndieWebCamp in Brighton a few weeks ago, a bunch of us were talking about blogging. What is post? What should it contain? What's optional? Someone (probably Jeremy Keith) said: A blog post doesn't need a title. In a literal sense, he was wrong. The HTML specification makes it clear that the <title> element is mandatory. All documents have title. But, in a practical sense, he…
Continue reading →
This has to be the most infuriating bug report I've ever submitted. I went to type in my 2FA code on a website - but no numbers appeared on screen. Obviously, I was an idiot and had forgotten to press the NumLock button. D'oh! I toggled it on and typed again. No numbers appeared. I switched to another tab, my numbers appeared when I typed them. So I was reasonably confident that my keyboard was…
Continue reading →
I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text. Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar? Yes! Although it is a bit of a hack. This relies on 3 CSS features: src: lo…
Continue reading →
