Enhancing the HTML abbr Element on Mobile

By Aurelio De Rosa

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

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

About the <abbr> Tag

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:

Depending on which browser you are using, some style may be added, 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 changes the cursor icon when hovering the element, so that a small question mark will be shown near the cursor. The image below shows how Chrome on Windows 7 renders the tag with this style applied:

<abbr> on Mobile

Until now, we’ve discussed about how a reader 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 you may be doing right now)? As you probably know, on mobile there’s no such thing as hover. Therefore, we need to integrate the style with something else.

Let’s take a cue from non-digital 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, using our LAMP example, you’d see something like:

LAMP (Linux Apache MySQL PHP)

Why not adopt this well-known technique on mobile too?

Implementing the Solution

What we want is to apply the first CSS snippet from above for text shown on desktops and laptops, and code implementing the parentheses-style technique for mobile devices. To achieve this goal we will 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.

When we put this all together using a mobile-first approach, the result is 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 by looking at the demo page and resizing the browser. In order to allow users to view the demo on devices with different screen sizes to see the effect, I’ve put several elements with different breakpoints.

This 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 you need to support this browser, you can use a shim like Respond.js or css3-mediaqueries.js.

Conclusion

The simple technique described in this article allows us to enhance how mobile users read the text of our web pages. Its compatibility is 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, when trying to solve issues around displaying content, it can be helpful to take a cue from non-digital sources – a good lesson to remember.

This article was originally published at https://aurelio.audero.it/blog/2013/12/23/enhancing-the-abbr-element-on-mobile/