Enhancing the abbr Element on Mobile

Today’s world runs fast, really fast. When writing, a lot of people use abbreviations and acronyms to save time that we can find spread all over the web. They are so used that an HTML tag, <abbr>, was created to identify them and help the semantic of web pages.

In this article, I’ll show you a small CSS snippet that can enhance how the <abbr> tag is shown on mobile devices.

The <abbr> tag is usually used in conjunction with the title attribute, which has as its value the meaning of the abbreviation or the acronym (i.e. the extended form). For example, if we wanted to talk about the LAMP stack, we could write the following code to explain what “LAMP” means:

<abbr title="Linux Apache MySQL PHP">LAMP</abbr>

Apart from the intrinsic semantic of the tag, one of the advantage is that the readers can easily discover the extended form hovering the tag with the mouse. By default, browsers don’t give any visual hint of the presence of this “hidden” information, so it’s not easy to know it. The following image shows how Chrome on Windows 7 renders <abbr> without any style applied:

A different browser may applies some style, but usually it’ll be rendered as shown above.

To give the readers a visual hint that they can discover the meaning of the abbreviation or the acronym without searching it on the web, web designers usually adopt the following CSS code:

abbr[title]
{
   border-bottom: 1px dashed #ADADAD;
   cursor: help;
}

This style is applied to any <abbr> having a title attribute set. It applies a gray dashed border below the <abbr> tag, and change the cursor icon, when the reader hover the tag, so that a small question mark near the cursor will be shown. The image below shows how Chrome on Windows 7 renders the tag with this style applied:

Until now, we discussed about how the readers can hover the tag to show the extended form of the acronym or the abbreviation. But what if a reader is using a mobile device (as probably you’re doing now)? As you might know, on mobile we don’t have a thing such as hover. Therefore, we need to integrate the style with something else. We can take a cue from non-web media like books or newspapers. When using an abbreviation or an acronym, writers for this kind of media usually include the extended form between parentheses. So, recalling our LAMP example, you’ll find something like:

LAMP (Linux Apache MySQL PHP)

Why not adopting this well-known technique on the web too?

What we want is to apply the first CSS snippet on the text shown on desktops and laptops, and a code implementing the books-like technique for mobile devices. To achieve this goal we need:

• Media queries
• The content property
• The attr expression

For those of you that don’t have familiarity with content and attr, the former allows to set the content of a pseudo-element, while the latter allows to retrieve the value of a given attribute. Because we want to automatically update the content after an abbr element using CSS, we can employ the :after pseudo-selector.

Putting it all together, using a mobile-first approach, results in the following CSS code:

abbr[title]:after
{
   content: " (" attr(title) ")";
}

@media screen and (min-width: 1025px)
{
   abbr[title]
   {
      border-bottom: 1px dashed #ADADAD;
      cursor:help;
   }

   abbr[title]:after
   {
      content: "";
   }
}

As you can see, in the code I’ve chosen 1025px as a breakpoint for desktops, but you can change it based on your needs. In addition, inside the media query we reset the content of the after pseudo-element assigning an empty string to the content property. You can see the code above in action looking at the demo page resizing it. In order to allow users viewing the demo on devices having different screen size to see the effect, I’ve put several elements with different breakpoints.

The discussed technique is supported by all major browsers, including Internet Explorer starting from version 9. Internet Explorer 8 supports the content property and the attr expression but not media queries. If we want to extend the compatibility, we can use a shim like Respond.js or css3-mediaqueries.js.

Conclusions

The sample technique described in this article allows us to enhance how mobile users read the texts of our web pages. Its compatibility is pretty good because it can be employed in all major browsers, including Internet Explorer starting from version 9. In addition, we can use it in Internet Explorer 8 too using a shim to support media queries.

As we’ve seen, we can solve issues taking cue from various sources, even non-digital once. A good lesson to remember.