{"id":197,"date":"2013-12-23T14:00:06","date_gmt":"2013-12-23T14:00:06","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=197"},"modified":"2016-06-04T00:27:27","modified_gmt":"2016-06-04T00:27:27","slug":"enhancing-the-abbr-element-on-mobile","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2013\/12\/23\/enhancing-the-abbr-element-on-mobile\/","title":{"rendered":"Enhancing the abbr Element on Mobile"},"content":{"rendered":"

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><\/code>, was created to identify them and help the semantic of web pages.<\/p>\n

In this article, I’ll show you a small CSS<\/abbr> snippet that can enhance how the <abbr><\/code> tag is shown on mobile devices.
\n
\nThe <abbr><\/code> tag is usually used in conjunction with the title<\/code> 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<\/em> stack, we could write the following code to explain what “LAMP” means:<\/p>\n

\r\n<abbr title="Linux Apache MySQL PHP">LAMP<\/abbr>\r\n<\/pre>\n
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><\/code> without any style applied:<\/p>\n
\n\"The<\/a>
The <abbr><\/code> tag containing the acronym LAMP as shown by default by Chrome on Windows 7<\/figcaption><\/figure>\n
A different browser may applies some style, but usually it’ll be rendered as shown above.<\/small><\/p>\n
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<\/abbr> code:<\/p>\n
\r\nabbr[title]\r\n{\r\n   border-bottom: 1px dashed #ADADAD;\r\n   cursor: help;\r\n}\r\n<\/pre>\n
This style is applied to any <abbr><\/code> having a title<\/code> attribute set. It applies a gray dashed border below the <abbr><\/code> 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:<\/p>\n
\n\"The<\/a>
The <abbr><\/code> tag containing the acronym LAMP with a style applied, rendered by Chrome on Windows 7<\/figcaption><\/figure>\n
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<\/em> example, you’ll find something like:<\/p>\n
LAMP (Linux Apache MySQL PHP)<\/p>\n
Why not adopting this well-known technique on the web too?<\/p>\n
What we want is to apply the first CSS<\/abbr> 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:<\/p>\n