Add <abbr> tags to words in posts

[Freso]

About

This theme component is ported from Auto-Linkify Words to provide functionality similar to the Abbreviations and acronyms plugin – namely to wrap various abbreviations used in a given forum/site/Discourse installation in <abbr> tags.

Location

GitHub - metabrainz/discourse-abbrify-words: Discourse theme component for automatically adding...

How to install

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. 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.

[southpaw]

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 . 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?

[southpaw]

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:

and

Any idea what I’ve done to cause that?

[Johani (Joe)]

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

You’d only need to change the word

code

to

aside

Like so:

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:

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

Here’s a before:

and after:

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?

[southpaw]

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

[Johani (Joe)]

Thank you for the link @southpaw

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

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.

[southpaw]

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

[anon36484860]

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

[tophee (Christoph)]

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).

[tophee (Christoph)]

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?

[danekhollas (Daniel Hollas)]

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.

[danekhollas (Daniel Hollas)]

@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…

[aschrijver (Arnold Schrijver)]

This is a super project, and exactly what we need for Humane Tech Community! 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 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, 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?

[danekhollas (Daniel Hollas)]

@aschrijver

I gather since this is derived from the Linkify 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, 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.

[aschrijver (Arnold Schrijver)]

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.

[danekhollas (Daniel Hollas)]

@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?

[aschrijver (Arnold Schrijver)]

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:

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?

[danekhollas (Daniel Hollas)]

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?

[aschrijver (Arnold Schrijver)]

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

[fearlessfrog]

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.