I’m really lazy about using <abbr>
tags for acronyms. Most people who read a techy blog like this probably understand them, but surely there are some visitors who don’t where a simple tooltip explanation would be beneficial. Maybe with this easy copy-and-paste resource to reference I’ll actually start doing it. This is an education blog, after all.
<abbr title="Customer Relationship Management">CRM</abbr>
<abbr title="Content Management System">CMS</abbr>
<abbr title="Structured Query Language">SQL</abbr>
<abbr title="International Organization for Standards">ISO</abbr>
<abbr title="PHP: Hypertext Preprocessor">PHP</abbr>
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="JavaScript">JS</abbr>
<abbr title="European Computer Manufacturers Association Script">ECMAScript</abbr>
<abbr title="Internet Service Provider">ISP</abbr>
<abbr title="Internet Protocol">IP</abbr>
<abbr title="HyperText Transfer Protocol">HTTP</abbr>
<abbr title="Really Simple Syndication">RSS</abbr>
<abbr title="Internet Relay Chat">IRC</abbr>
<abbr title="File Transfer Protocol">FTP</abbr>
<abbr title="Asynchronous JavaScript and XML">AJAX</abbr>
<abbr title="Domain Name System">DNS</abbr>
<abbr title="Document Object Model">DOM</abbr>
<abbr title="Object Oriented Programming">OOP</abbr>
<abbr title="Don't Repeat Yourself (programming principal)">DRY</abbr>
<abbr title="Secure Sockets Layer">SSL</abbr>
<abbr title="Ruby on Rails">RoR</abbr>
<abbr title="Keep it Simple, Stupid">KISS</abbr>
<abbr title="Linux, Apache, MySQL, PHP (common server configuration)">LAMP</abbr>
<abbr title="Cross Site Scripting">XSS</abbr>
<abbr title="Search Engine Optimization">SEO</abbr>
<abbr title="Joint Photographic Experts Group (file format)">JPG</abbr>
<abbr title="Graphics Interchange Format (file format)">GIF</abbr>
<abbr title="Portable Networks Graphics (file format)">PNG</abbr>
<abbr title="Photoshop Document (file format)">PSD</abbr>
<abbr title="Adobe Illustrator (file format)">AI</abbr>
<abbr title="Software as a Service">SaaS</abbr>
<abbr title="Syntactically Awesome Stylesheets">SASS</abbr>
<abbr title="Red Green Blue">RGB</abbr>
<abbr title="Hue Saturation Lightness">HSL</abbr>
<abbr title="User Interface">UI</abbr>
<abbr title="User Experience">UX</abbr>
<abbr title="JavaServer Pages">JSP</abbr>
<abbr title="Active Server Pages">ASP</abbr>
<abbr title="What You See Is What You Get">WYSIWYG</abbr>
Maybe there could be some WordPress plugin that could REGEX post content and automatically do it?
Got some ones I should add to the list? I’ll probably keep the list above specifically web development acronyms not general computer/internet ones.
UI (User Interface)
UX (User Experience)
.jsp? .aspx?
.shtml?
WYSIWYG (What You See is What You Get)
WTF ?
Isn’t WYSIWYG an acronym, not an abbreviation, since it’s pronounced?
Never mind. Didn’t see (below) that the acronym tag is deprecated in html5 – everything (acronyms, initialism) now fall under the abbr tag.
Here’s a few more. I know I’ll come up with some others later. But if you’re going through the trouble of doing this, wouldn’t the <pre><acronym></pre> element be better suited or is it deprecated. Seems like they both behave the same:
DRY – Don’t Repeat Yourself (in reference to functions, OOP, etc)
JSP – Java Server Page (Java’s scripting language…not to be confused with Javascript)
SSL – Secure Sockets Layer
CF – Cold Fusion
RoR – Ruby on Rails
DBMS – Database Management System
LAMP – Most common server configuration (Linux, Apache, MySQL, PHP)
CGI – Common Gateway Interface
ASP – Active Server Page (Microsoft)
XSS – Cross Site Scripting
DHTML – Dynamic HTML
W3C – WWW Consortium
SEO – Search Engine Optimization
WYSIWYG – What you see is what you get. (Usually in reference to a rich text editor embedded in a page.)
acronym tag is deprecated I’m pretty sure. Excellent additions. I’ll add soon.
Some more:
URL / URI – Uniform Resource Locator / Identifier. (Web address, i.e. http://www.google.com. Some people may argue there’s a difference between the two. I’ve never really wrapped my head around what the difference is and I think the WC3 consider them synonymous now.)
The rest of these are kinda gray area for web design, but:
JPEG – (Image type and file extension. Usually shortened to JPG) Joint Photographic Experts Group
GIF – (Image type and file extension.) Graphics Interchange Format
PNG – (Image type and file extension.) Portable Network Graphics
Above are the three main image types used on the web.
PSD – (Pre-processed image. Probably the most used image format in design phase of a website.) Photoshop Document
ICO – (Image type and file extension.) Icon. Not usually used in web pages, but as the FAVICON.ICO, the image that shows in modern browsers’ url bars.
DRY and AJAX would be acronyms, but most of the rest are initialisms. All are abbreviations. I suppose acronyms are too rare for it to make the cut in html5 (though somehow i, b, and u made it). http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element
For all intents and purposes, acronym=initialism. The HTML4 spec is pretty confusing on this topic, calling initialisms “abbreviations” and pronounced initialisms “acronyms”.
Thankfully in HTML5 they all fall under the “abbr” tag which is simpler than having two different tags for marginally different purposes. Also, “abbr” is shorter which is always nice. Now they just need to replace “strong” with “st” ;)
Dun it. To my surprise it worked at the first try º_º
All changes are on the fly, it doesn’t change the database, it doesn’t replace
catnIP
, it’s case insensitive (both ‘ip’ and ‘IP’ will be replaced) and it works just by pasting it intofunctions.php
Actually that was silly, too much repetition here’s an improved version: http://d.pr/qWfh
Very cool. Would it make more sense to search for them with spaces on either side of the acronym? Or is it already doing that with the \b?
For the record, Matt Mullenweg wrote some PHP to do this nearly 10 years ago: http://ma.tt/scripts/acronymit/ But it’s not a WordPress function and it uses the deprecated tag.
That function is awesome!
And it’s a pretty universally-known abbreviation, but I don’t think any list is complete without KISS => “Keep it Simple, Stupid” or “Keep it Stupid Simple” (if you’re feeling nice)
“So my friend DOM called me yesterday but I missed his call because I just got out the shower and needed to DRY off. He wanted to know if I wanted tickets to the Man Utd vs AJAX match. Just as I called him back I saw my pet ASP had escaped and in the surprise, accidentally knocked over my LAMP.”
:D
Scott, I didn’t think about that, the best way to fix it would be to remove the
i
at the end of the regex so that it only matches UPPERCASE abbreviations. And you’re unlikely going to talk about Man Utd vs AJAX on a blog where you’d use any of these acronyms!Chris, yes,
/b
is for word boundaries, so it should only match acronyms preceded and followed by a space, a linefeed and punctuation. More on regular-expressions.info/wordboundaries.htmlHey Federico,
I tried both the code you have posted and the improved code you linked too. Great idea. For some reason though the improved code you linked to doesn’t work for me. I get a fatal error caused by the allowed memory being exhausted. Any idea why that would be occuring?
Thanks. And good work!
nm figured it out
I found this to be a very good idea. There is a WordPress plugin that does this. It is called Acronyms.
The plugin gives a list of abbreviations in the WordPress dashboard.
I just installed it on a 3.3 beta install and it worked fine.
It does use the acronym tag instead of the abbr tag but that could be changed fairly easy I suspect.
Line 377 in acronyms.php in the plugin folder is the line you would need to change to use the abbr tag.
Strangely enough, I just forked the Acronyms plugin so it supports HTML5, you can find it here: Acronyms 2.
SEO has le typo
Eine Möglichkeit:
http://bueltge.de/wp-abbreviation-replacer-plugin/100/
Pretty sure that lightness in HSL should be luminance instead..
not eXtensible, but Extensible.
ISO = International Organization for Standardization
A related thought:
Personally I find “abbr” markup affects readability. The text has to be decorated to distinguish it from normal body text (so that the reader is alerted to the interactivity) and this means the flow of reading becomes broken, for – IMO – questionable return.
Furthermore, they have to be decorated in such a way that they definitely don’t look like liks – and since link decoration is not standardised, this is difficult to achieve. Abbr is so rarely used that it’s never your first thought that decorated text might be an abbr.
Personally I avoid them and dislike them (as a general tool) for these reasons. (Devil’s advocate: there’s always right-click and “Search on Google”, right?)
If I did ever feel the need to use them, I’d ensure they were unstyled and use some script to append a superscript digit to the tag content, and hyperlink that superscript to a footnote below the article (which would have a link back) – just as per the convention in paper-based text.
Anyone inclined to agree?
Yes! The ABBR element tends to be inaccessible to people that do not use Assistive Technology, and sometimes to those that do. As there seems to be no standard visual representation for ABBR elements, they are unintuitive.
Just putting the definition of the abbreviation in plain text works fine, after the first instance of the abbreviation within the page. This also translates to print wonderfully.
Some abbreviations are more readily understood than their expansion e.g. DVD, and expanding it could impair comprehension, so they shouldn’t be expanded just for the sake of it.
I mostly agree with you. ABBR as it is usually styled is not intuitive or that useful. Also, using a superscript digit and footnote type of interface is a much better implementation.
This gives me an idea. From what I know of CSS3, I think all standard ABBR elements could be styled with auto-incrementing superscript digit, that also shows a tooltip that looks like a footnote when it is hovered or clicked on.
So with just some CSS, an ABBR element could look like this:
RGB¹
Then when you hover over it, or try to click the number, look like this:
RGB¹
[1. Red Green Blue]
That way it uses the familiar superscript digit and footnote metaphor, standard HTML markup, and doesn’t make the user scroll up and down the page for the footnote.
If you really want to include all the abbrevation footnotes at the end of the document too, a jQuery script could easily generate it by reading all the ABBR elements in the page and inserting a list of footnotes at the end of the document.
I disagree. IMO they provide great value, and I have always encourage usage. They embody the strength of XML and the entire concept of a markup language. Following the argument “few people notice them”, a good site is covered with animated gifs and a background midi-soundtrack.
Style them if you feel like it, but as shoutyman says users will hover the abbreviation, if they don’t get it.
Do you want them to leave you for Googles definition, or keep them around your site?
I fail to see what benefit embodying the strength of XML has on your user. You’re making it sound like your reason for marking up abbreviations with ABBR is for XML’s sake, not your user’s.
When I think about it, I realise I shy away from using an abbreviation at all if I think my user is not going to understand it. For example, I chose “Assistive Technology” rather than “AT”, on an accessibility forum, “AT” would probably have been understood just fine.
There are just some things in HTML that aren’t always a great idea, like TABINDEX or ACCESSKEY. Just because they exist, doesn’t mean they should be used wherever possible.
ABBR elements are rendered useless by printing the document. That’s why in accessibility guides the ABBR element is the last suggested technique for expanding abbreviations (http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-located.html).
I like Kayan’s suggestion, it would be a good answer to making the ABBR element more intuitive to readers familiar with footnotes (perhaps not young readers). It would survive print too. When I read text that uses footnotes, I sometimes find them distracting (they break the flow if you follow them). But you don’t need to use the ABBR element at all.
I was on a site once that automatically made links out of almost every keyword in its articles, so annoying. Doing the same with every abbreviation carries the same risk.
Lee, surely you could do something like this in a print stylesheet:
I’ve not tested this specific implementation, but it works for the href attribute on a link.
Chris, yes you can as long as you’re not required to support IE6, which I will be for only a couple more years hopefully (it’s very expensive for large companies to migrate their bespoke applications to newer browsers). IE6 support is slightly off-topic but it is the reason I’ve yet to use
:after
andcontent
for a legitimate project.That does address ‘translation to print’, so would be a good compromise. I think it’s worth doing for screen too though to address accessibility and usability issues. Although using CSS to make expansions visible isn’t as robust as just expanding them in plain content.
My point is that if an abbreviation cannot be avoided, then its expansion, if helpful, should be permanently visible, otherwise there should be none (e.g. DVD).
Hi there, my premature versión of the wordpress plugin, any pull requests are welcome!
https://github.com/Markcial/Wordpress-Nerd-Terms-Explainer-Plugin
How about an admin interface to edit the list?
The issue about an admin interface is that it won’t be just a simple function.
The admin interface shoud require access to the DB in order to mantain new acronyms.
But it surely isn’t that hard to acomplish.
(excuse my poor english. i’m kinda rusty=)
You included one in your post that isn’t in your list – REGEX.
Granted it’s not an acronym, but it is an abbreviation which may not be understood by everyone!
With as much as we use APIs nowadays, it would be a great addition to the list.
KISSA – Keep it Simple Stupid Asshole
When writing the plugin remember to avoid replacing anything inside attributes of HTML tags. For example if the link (href attribute) includes the word seo, the abbr might get inside the href and mess up the HTML syntax. Unless the \b in the example posted by Federico fixes that issue somehow.
More devil’s advocacy: Why not provide a far more useful and maintenance-free alternative to Abbrs by linking out to the relevant Wikipedia articles instead?
If people really don’t know what “HTML” means then, frankly, simply expanding it into its constituent words isn’t going to help them in the slightest. A Wikipedia article which explains HTML will. (And this does away with the tricky business of trying to style Abbrs in a way the user will understand.)
You could do this without having to create or manage any content (ie the list of Abbrs), hence being maintenance-free. Got a term you want to explain in an article? Wrap it in a classed span, use JQuery to either whack in a link to a Wikipedia search or link directly. You could add an option to the site for people to click a “stop linking these terms, I know what they are” link to return them to plain old text.
Also, here’s some good old-fashioned pedantry re “DRY”: s/principal/principle :)
Don’t get me wrong but it looks like you really don’t care much about the users. There’s a saying in my country. “Nadie nace sabiendo”. (Nobody borns knowing it all).
Some of the changes in HTML5 are to comply with ARIA guidelines.
So it wouldn’t hurt a bit trying to acomplish this tasks adding a little bit of effort adding extra info without having them (the users) to leave and find out in another place.
It seems that the mission here is to try to captivate the user by giving them something more that what they were looking in the first place.
at least, that is what I try to do everytime.
IIS = Internet Information Services
CGI = Common Gateway Interface
MIME = Multipurpose Internet Mail Extensions
ISAPI = Internet Server Application Programming Interface
SMTP = Simple Mail Transfer Protocol
DHTML = Dynamic HTML
XML = Extensible Markup Language
XSL = EXtensible Stylesheet Language
XSLT = EXtensible Stylesheet Language Transformations
I think I am done now, time to get back to work :)
“DHTML = Dynamic HTML”
Ohnoes! Now you need to expand “HTML” :)
There is a plugin called Acronyms. I have been using since some time and never fails. The plugin site URL doesn’t make sense but I’ve pastied the code here: http://pastie.org/2730994
Hope it helps, Chris.
RTFM – Read The Fucking Manual
JFGI – Just Fucking Google It
Replace fucking with freaking.
And in RTFM you can use fine.
My Text Filter Suite has a ‘TFS Acronymit’ piece that does automatic substitutions like that. But it’s old and crusty, and needs to be rewritten from scratch one day. :)
now if only I had a list of abbr’s so I could understand my “texting” friends.
By the way, PHP is actually “PHP: Hypertext Preprocessor“. It’s what’s known as a recursive acronym.
Sorry to be the stickler. Just haven’t seen anyone else mention it. :P
Point of history — earlier in PHP’s life, it stood for “Personal Home Pages”. It was changed to the recursive “PHP Hypertext Processor” when 3.0 was released.
Yep, so technically PHP stands for “Personal Home Page: Hypertext Processor” :D
REST – Representational State Transfer
I would add:
URL – Uniform Resource Locator
URI – Uniform Resource Indicator
and of course there must be RTFM in the list :) it’s the best acronym, it there can be such a thing.
IA
UCD
IxD
Not all abbreviations are initialisms, so I use
class="initialism"
to pick out those terms which are 100% upper-case. FedEx, for example is not an initialism but is an abbreviation.I increase letter spacing and decrease font size for initialisms – a treatment which would be inappropriate for the FedEx example.
Pedantic.
Apologies for repeating this, but folks may have missed it up there in the middle of the comments.
Joel Pan’s Acronyms plugin is no longer being maintained and does not support HTML5. An updated fork which auto-detects your theme’s DOCTYPE (and is actively maintained by yours truly) can be found here.
Doesn’t the first P in PHP stand for PHP? ludicrous, I like to think it means powerful
I scored like 98%, yeah! I rule!
XHR = XMLHttpRequest: https://secure.wikimedia.org/wikipedia/en/wiki/XMLHttpRequest
IaaS = Infrastructure as a service
JSON = JavaScript Object Notation
XLST = Extensible Stylesheet Language Transformations
Whoops, I Spelled my last name wrong. Its Stok not Stpl.
Hi everyone-
For any TextExpander users, I made a TE group that will automatically output these. Thanks, Chris, for the great list.
The TE group is available for download on my site.
Hope some of you find it useful!
What about doing a GIST out of it?
Go for it.
HCI: Human Computer Interaction
Certainly, abbr’s and acronyms play an important role in web accessibility.
I know you can be fed up with coding them all the time.
But the problem with abbr’s is that they’re not keyboard focusable in user agents. so the tooltip does not display for people navigating keyboard only.
So if you plan to build a plugin that does the job, try to make a plugin that explains the first occurency of the term in the text of the page itself this way, for an example :
css-tricks is all about cascading style sheets (css).
Please forgive my english
GNU = GNU’s Not Unix
RFTM by far my fav
Missing WYSIWTF for IE ;)
HLL (High Level Language)
LLL (Low Level Language)
*******
PDF (Portable Document Format)
Can’t really understand wht is the use of codes like these in HTML… Is it any better coding the full-form than writing it in a simple bracket?
If we can simply write – “Intel (Integrated Electronics)” – , why code so long?
There are a number of lame tags in HTML, like the defination-list-tags etc.
The same HTML also offers extensive features like changing the browser-button-color according to color of website (in HTML5).
It is a two-way language…
Should we put it as a High Level Lang., OOL, or what?