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 →
How do you know you're looking at an old website? You may have found a page which has lots of interesting information, but how can you tell it's a modern and relevant result? Some websites don't contain dates in their URls. There may not be a © date or publication date shown on the page. And the <meta> tags might not contain anything useful. If you're lucky, the site will look old fashioned: …
Continue reading →
Yesterday I wrote about a lazy way to implement a manual dark mode chooser. Today I'll show you a slightly more sensible way to do it. It just uses CSS, no need for JavaScript. Here's a scrap of HTML which present a dropdown for a user to choose their colour scheme: <select id="colour-mode"> <option value="">Theme Selector</option> <option value="dark">Dark Mode</option> <option…
Continue reading →
I'm not saying this is a good way to make a dark mode website. I'm not even saying it's a sensible way to do dark mode. But I'm pretty sure this is the laziest way of getting dark mode on your site. And it is all done with less than a handful of CSS rules. It relies on the new-ish :has() CSS pseudo class and the positively ancient filter() CSS function. Here's the code in all its glory: …
Continue reading →
Quite often websites will encourage you to copy and paste commands into your terminal. There are a variety of reasons why this is bad - not least because someone could hide malicious code. That's usually done with a bit of CSS to make the evil command invisible, or using Javascript to inject something unwanted into your keyboard. Here's method that I hadn't seen before. Copy this code and paste …
Continue reading →
If you use WordPress's HTML5 comments, there's an annoying little gotcha. There's a four year old bug which prevents client-side form validation. HTML allows <input> elements to have a required attribute. In theory, that means the form shouldn't submit until the input is filled in. Sadly, WordPress uses novalidate on the form - as the name suggests it stops any validation. But! WordPress is…
Continue reading →
If you've ever learned Mandarin Chinese, you'll know about "measure words". They're the sort of thing that trip up all new learners of the language. While 个 (gè) can be used as a generic measure word, using it everywhere makes you sound like an idiot (according to my old teacher). So you learn to use 个 for people, 包 for packets, and 根 for things which are long and thin. English has a similar con…
Continue reading →