Today I learned that HTML <abbr> may not do much on mobile browsers

June 22, 2020

For some time, I've been using HTML <abbr> elements with title attributes in my writing here on Wandering Thoughts. Sometimes I use it purely to provide a friendly expansion of abbreviations, like a TLS CA or MITM; sometimes the expansion acquires some additional commentary, such as the mention of <abbr> itself in this entry, and sometimes I use it for little asides. In a couple of contexts I use it to provide additional information; for example, any of my comments here (currently) say that they are 'by cks', where the <abbr> is used to add my name.

Today I had a reason to look at some of my pages that are using <abbr> in a mobile browser, specifically the iOS mobile browser. That was when I learned that iOS Safari doesn't render <abbr> in any visible way, which is fairly reasonable because there's no real way to interact with it; on desktops, an <abbr>'s title is shown when you hover the mouse over it, but on mobile there's no hover. This is a bit surprising because both MDN's <abbr> page and CanIUse currently say that it's fully supported on mobile browsers.

Once I started doing Internet searches it appears that this is a long standing issue and unlikely to change (because of the hover problem). There are various workarounds with both CSS and JavaScript, but I'm not certain I like any of them, especially with how I've historically used <abbr> here; some of my <abbr> usage would look very out of place if displayed inline in some way. Given that a decent amount of browsing comes from mobile these days, this is likely going to cause me to rethink how I use <abbr> here on Wandering Thoughts and likely use it a lot less, if at all. Probably a lot more terms will wind up as actual links to explanations of them, which is not necessarily a bad change overall.

This is a useful lesson to me that the web, and especially the mobile web, is an ongoing learning experience. Things that I think I know should be tested every so often, and I should look at my own sites in a mobile browser more often.

(As part of this, I should find out if there's a not too annoying and difficult way to look at and interact with my sites from an Android browser, despite not having any Android devices myself.)

Comments on this page:

The Android SDK includes an emulator, which will probably be the least buggy option since it's the official one. It's free and works on Linux, but it does seem a little wasteful to download and install the entire SDK just for the emulator.

The Android-x86 port is probably more buggy in theory, though I personally haven't experienced any problems with it. Its unofficial nature is obvious in the unpolished setup process and the fact that the newest version available is 2018's Android 9 "Pie" (though unfortunately that's not so different from the situation on most physical Android devices). It works under Virtualbox, so I imagine it would work on VMWare as well.

The SDK's emulator should already have all the Google apps installed so you can just open Chrome and load whatever site you want (or, if for some reason you care about any other Android browsers, you can probably install them through the Play Store). It's been a while since I set up my Android-x86 VM, so I don't remember whether it came with Play Store preinstalled or I had to manually download the APK, but it's not hard to find APKs for most apps.

I've tried both of these methods and after setup I find them about equally usable. Currently I'm using Android-x86 on Virtualbox, because I already have Virtualbox installed for other VM work and I don't need the rest of the SDK.

I think a lot of tech people try to be too clever, and end up making things more complicated than they need to be. The things you mention already have a convention — parenthesis (or simply omit it). Any content you make (when writing) should follow the same rules as if on a piece of paper, so just assume that other clever things like that don’t exist unless you’re writing some kind of app that needs them.

Please note, the context of this is for writing blog posts, as you are doing here. There may be other forms of writing or target platforms where these additional features are useful and relevant, but a simple blog is probably not one of them.

By Seth.L at 2020-06-24 10:11:30:

Not just mobile. Apparently my RSS reader ignores <abbr> tags, though I hadn't noticed until now.

By cks at 2020-06-24 12:08:11:

You got me to check in my RSS reader (Liferea), and it turns out that it doesn't give <abbr> elements any special visual appearance (no underline or the like), but it does show their title attribute if I hover the mouse over them. Clearly this is yet another thing that can go wrong with <abbr> in practice.

By Grant at 2020-06-29 02:00:33:

I too use <abbr> tags. I will probably continue to do so, at least for now.

You could use an <a> tag with an href to a definition page. You can also set a title on the tag to achieve similar behavior to the <abbr> tag.

Written on 22 June 2020.
« In Go, the compiler needs to know the types of things when copying values
Sometimes it takes other people to show you some of your site's design flaws »

Page tools: View Source, View Normal, Add Comment.
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Mon Jun 22 23:16:50 2020
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.