# Add \<abbr\> tags to words in posts

**URL:** https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394
**Category:** Theme component
**Created:** [May 24, 2018, 6:03pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394 "2018-05-24T18:03:10Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Freso](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/freso/32/49081_2.png) [@Freso](https://meta.discourse.org/u/Freso)
#### Post date: [May 24, 2018, 6:03pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/1 "2018-05-24T18:03:10Z")

</div>

## About

This theme component is ported from [Auto-Linkify Words](https://meta.discourse.org/t/linkify-words-in-post/82193) to provide functionality similar to the [Abbreviations and acronyms plugin](https://meta.discourse.org/t/abbreviations-and-acronyms-plugin/38501) – namely to wrap various abbreviations used in a given forum/site/Discourse installation in `<abbr>` tags.

## Location

[https://github.com/metabrainz/discourse-abbrify-words](https://github.com/metabrainz/discourse-abbrify-words)

## How to install

> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

## Credits

Thanks to @sam for writing the “Linkify words in post” plugin.

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [May 30, 2018, 9:17pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/2 "2018-05-30T21:17:44Z")

</div>

Hi @Freso,

Thanks for creating Auto-Abbrify! It’s so simple for users to be able to mouse over an abbreviation rather than having to click away from what they are reading to look it up online or in a lexicon!

One question for you, please:  
I was hoping to also use it to provide explanations for some Android Hidden Codes, for example: `*#*#8647#*#*`  
To make such a code display correctly in Discourse, we have to escape the sequence using the preformatted text button ![image](https://global.discourse-cdn.com/meta/original/3X/a/7/a7c7ed783657fc593090e50838a287baf3f4f335.png). I’m having trouble getting Auto-Abbrify to work with this code. I’ve tried entering the code in the Auto-Abbrify theme both with and without the backticks. Do you have any suggestion to make Auto-abbrify work with this kind of sequence?

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [June 5, 2018, 10:48pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/4 "2018-06-05T22:48:18Z")

</div>

I have a second question for you, @Freso (or anyone else using Auto-Abbrify.)

We’re seeing some instances where abbreviations on the Abbrify list are repeating characters. Examples:

[![image](https://global.discourse-cdn.com/meta/original/3X/4/5/4563941fb93a166205332b8fbbe2a0071588df62.png)](https://forums.republicwireless.com/t/moto-g6-coming-to-republic-wireless-june-2018/18915/102?u=southpaw)

and

[![image](https://global.discourse-cdn.com/meta/original/3X/d/f/dff8647d38b1c0ee85047b37bd3c0b436c9db2dd.png) ](https://forums.republicwireless.com/t/ordering-the-free-sim-cards/18113/12?u=southpaw)

Any idea what I’ve done to cause that?

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 6, 2018, 4:58am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/5 "2018-06-06T04:58:48Z")

</div>

Hi @southpaw

You need to make a small adjustment to the theme to fix both problems.

- Abbreviated words / phrases not picked up in `<code>` tags
- Repeating characters in oneboxes

Go to the edit theme \> common \> /head section and change line #19

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/5/5/55845420e6a27a7753d39f811b71a50ee0798df7.PNG)

You’d only need to change the word

`code`

to

`aside`

Like so:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/0/6/0605c8857ee9205ec840e8e6b82c550a9820d09e.PNG)

This will have two effects:

- ask the theme not to ignore `<code>` tags when looking for abbreviated words. Which allows you to add the sequence `*#*#8647#*#*` in the abbreviated words list (no backticks) like any other word and it should work:

 ![Untitled](https://global.discourse-cdn.com/meta/original/3X/0/a/0a9e49c5d446ef07a92faa0070e7136bcb9b071c.png)

- ask the theme **not** to look for abbreviated words in `<aside>` tags to prevent duplicated letters in oneboxes

Here’s a before:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/8/c/8cdb1b29fb09e52682f95f4110427d66947aefa9.PNG)

and after:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/5/b/5ba7adcd096a07d35aeb673dee1a4b690f55e149.PNG)

The catch here is that this a local change and would need to be reapplied every time you update the theme, but considering it’s only one word, I don’t think this is a big problem.

Are there any other places where you’re seeing duplicate letters in abbreviations?

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [June 6, 2018, 5:13am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/6 "2018-06-06T05:13:37Z")

</div>

Hi @Johani,

Thanks for such a detailed response! I’ve implemented it and it works for both the onebox and `<code>` situations.

Yes, the second example I gave is linked to a user-typed reply, not a onebox. [https://forums.republicwireless.com/t/ordering-the-free-sim-cards/18113/12?u=southpaw](https://forums.republicwireless.com/t/ordering-the-free-sim-cards/18113/12?u=southpaw)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 6, 2018, 6:32am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/7 "2018-06-06T06:32:06Z")

</div>

Thank you for the link @southpaw

I can definitely reproduce the issue. It’s caused by white-space characters not being removed.

 ![whitespace](https://global.discourse-cdn.com/meta/original/3X/b/0/b0d8e24ebfd0bb4645cc38aefd2d954ef4602a1d.gif)

I’ve made a small change in your theme to address the issue until the theme is updated and submitted a PR for @Freso to look at

Now that this is fixed, you can remove line #19 entirely from your theme if you want oneboxes to have abbreviations as well.

---

<div class="post-metadata">

### Author: ![southpaw](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/southpaw/32/79352_2.png) [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [June 6, 2018, 1:14pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/8 "2018-06-06T13:14:18Z")

</div>

Thanks @Johani! I had linked the sample images… sorry, I should have been more explicit.

---

<div class="post-metadata">

### Author: ![anon36484860](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anon36484860](https://meta.discourse.org/u/anon36484860)
#### Post date: [June 8, 2018, 3:27pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/9 "2018-06-08T15:27:23Z")

</div>

Has anyone found a workaround to shop the tooltip without any delay? Could not find anything in CSS specifications.

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [June 13, 2018, 9:02am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/10 "2018-06-13T09:02:54Z")

</div>

I wonder if it would be feasible to make it so that certain abbreviations can be limited to certain categories? For example, by specifying `CA,California,US politics` and `CA,Canada,International politics` CA would be abbrified differently in the Categories US politics and International Politics.

Oh, and it would also be great if the detection of acronyms could be context sensitive (to avoid false positives when an abbreviation also exists as a word in ordinary language).

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [August 14, 2018, 8:24am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/11 "2018-08-14T08:24:02Z")

</div>

Here is another idea for refinement:

Let’s say on my forum, AA commonly stands for Alcoholic Anonymous and so we have a the abbrify theme component set up to explain AA as Alcoholics Anonymous. Now let’s say John writes a post mentioning the Automobile Association as AA. If he notices that the explanation for the abbreviation is wrong, he might want to stop discourse from abbrifying AA in his post. Or perhaps he doesn’t notice the problem but a staff member does but doesn’t know what AA stands for, only that it’s obviously not Alcoholics Anonymous.

Is there perhaps an easy solution to stop a word from being abbrified on a per post basis (except for using a different word or abbreviation, of course)? Perhaps such an escape mechanism could also be useful for the [linkify theme component](https://meta.discourse.org/t/linkify-words-in-post/82193)?

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [October 6, 2018, 10:15pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/12 "2018-10-06T22:15:25Z")

</div>

Well, one solution would be to manually insert the abbr tag in those instances. 🙂  
Or, if there exist some non-intrusive HTML tag that you could wrap around that particular abbreviation and than add that tag to the `skipTags` object in the code.

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [October 7, 2018, 12:25am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/13 "2018-10-07T00:25:45Z")

</div>

> [@Johani](#):
>
> You need to make a small adjustment to the theme to fix both problems.

I wonder, wouldn’t it make sense to make a new theme settings for listing skiped HTML tags? (Same goes for auto-linkify).

EDIT: Hmm, that was actually very easy to do, have a local working version, happy to submit PR…

---

<div class="post-metadata">

### Author: ![aschrijver](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aschrijver/32/92004_2.png) [@aschrijver](https://meta.discourse.org/u/aschrijver)
#### Post date: [November 2, 2018, 9:05am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/14 "2018-11-02T09:05:43Z")

</div>

This is a super project, and exactly what we need for [Humane Tech Community](https://community.humanetech.com)! I gather that - since we are a hosted instance, and this is a Theme Component - we are able to apply this for our community.

The documentation on how to use this component is still a bit thin, though. I gather since this is derived from the [Linkify](https://meta.discourse.org/t/linkify-words-in-post/82193) component, it will work similarly?

If that is the case, there is the mention by @sam that the UI is still [very painful to use for long lists](https://meta.discourse.org/t/linkify-words-in-post/82193/13), which I am not sure has been addressed yet.

We have community members with many different professional backgrounds and expertise (medical, psychology, IT, education) and the need for a crowdsourced glossary, with _a lot_ of terms, ultimately. Given how Linkify works, that would mean having a workflow that goes something like this:

- There is a (sub)category that needs Moderator approval before posting
- Some member posts a new term for the glossary, with explanatory text
- When approved, an admin takes the post URL and adds the proper config (term + URL) to the Abbrev/Linkify list in Settings

Not ideal for this use case, maybe (a bit involved, with the Admin interaction needed), but workable.

Is this indeed how the module works, and is the workflow I described the one to go for?

* * *

**Edit** : Additionally - since we are a hosted instance - I am wondering, if a view of an abbreviation ‘balloon’ counts as a pageview on our account quotum?

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [November 2, 2018, 2:44pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/15 "2018-11-02T14:44:02Z")

</div>

> [@aschrijver](#):
>
> I gather since this is derived from the [Linkify](https://meta.discourse.org/t/linkify-words-in-post/82193) component, it will work similarly?

Yep, most of the code is exactly the same.

> [@aschrijver](#):
>
> If that is the case, there is the mention by @sam that the UI is still [very painful to use for long lists](https://meta.discourse.org/t/linkify-words-in-post/82193/13), which I am not sure has been addressed yet.

This has already been addressed. 🙂

> [@aschrijver](#):
>
> Is this indeed how the module works, and is the workflow I described the one to go for?

If I understand you correctly, this is indeed how it works. Although from you description I am not sure what your end-goal is. Is the abbreviation gonna link to a separate dedicated post? In that case, use the auto-linkify theme. If you just want explanatory text when hoovering over the abbreviation (i.e. `<abbr>` tag, use this theme. You can also combine them.

> [@aschrijver](#):
>
> I am wondering, if a view of an abbreviation ‘balloon’ counts as a pageview on our account quotum?

This is not clear, can you explain exactly how you think it will work? If the “ballon” is gonna be a link leading to your post that I guess yes it will count.

Overall, I’d recommend simply to install the theme and try it out 😉 You’ll quickly see hot it works.

---

<div class="post-metadata">

### Author: ![aschrijver](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aschrijver/32/92004_2.png) [@aschrijver](https://meta.discourse.org/u/aschrijver)
#### Post date: [November 2, 2018, 2:55pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/16 "2018-11-02T14:55:19Z")

</div>

Thanks for your info @danekhollas! I think this is exactly what I’m looking for ❤ , so I’ll give it a go.

PS. With that last part I meant indeed if the explanation of an abbreviation is defined by links, then do they count or not. But maybe that is not how one sets this up, so I will first check it out.

**Edit** : I have installed it, but I see no obvious place where to define abbreviations.

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [November 2, 2018, 3:06pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/17 "2018-11-02T15:06:46Z")

</div>

> [@aschrijver](#):
>
> **Edit** : I have installed it, but I see no obvious place where to define abbreviations.

Which one did you install? Autolinkify or autoabbrify? Can you send a screenshot?

---

<div class="post-metadata">

### Author: ![aschrijver](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aschrijver/32/92004_2.png) [@aschrijver](https://meta.discourse.org/u/aschrijver)
#### Post date: [November 2, 2018, 3:10pm UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/18 "2018-11-02T15:10:14Z")

</div>

Sure, it was the Abbrify Words component, installed from the Github link above and then added as component to the Default theme of the forum:

 ![humane-tech-abbrify-words-component](https://global.discourse-cdn.com/meta/original/3X/b/9/b922f85c02d9caa16a9225826ad0b8e4eda78422.png)

**Edit** : After reading the related lists in Linkify topic, I have the feeling that this does not work as it should. There should be a list here, or not?

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [November 3, 2018, 12:48am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/19 "2018-11-03T00:48:53Z")

</div>

Yep, that does not look correct. What is confusing is that it does not even look like a remote theme for m GitHub. 🤔

Could you try to install the original autolinkify theme and see whether that works?

EDIT: Also, what is your Discourse version? Could you try updating to the latest?

---

<div class="post-metadata">

### Author: ![aschrijver](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aschrijver/32/92004_2.png) [@aschrijver](https://meta.discourse.org/u/aschrijver)
#### Post date: [November 3, 2018, 9:56am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/22 "2018-11-03T09:56:11Z")

</div>

Thank you @danekhollas, my issue was solved with help of the great Discourse team!

---

<div class="post-metadata">

### Author: ![fearlessfrog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fearlessfrog/32/119653_2.png) [@fearlessfrog](https://meta.discourse.org/u/fearlessfrog)
#### Post date: [November 26, 2018, 1:43am UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/23 "2018-11-26T01:43:51Z")

</div>

Do these abbr tags work on mobile, with a touch rather than a pointer?

If I do a manual ex. tag in a post is it meant to work without a mouse?

I don’t think it does in the Discourse app, at least on Android webview.

[Next page](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394.md?page=2)