Add <abbr> tags to words in posts

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.

4 Likes

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

1 Like

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

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

2 Likes

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?

2 Likes

Well, one solution would be to manually insert the abbr tag in those instances. :slight_smile:
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.

2 Likes

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…

1 Like

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?

1 Like

Yep, most of the code is exactly the same.

This has already been addressed. :slight_smile:

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.

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 :wink: You’ll quickly see hot it works.

2 Likes

Thanks for your info @danekhollas! I think this is exactly what I’m looking for :heart: , 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.

1 Like

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

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?

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

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?

2 Likes

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

4 Likes

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.

That’s really up to the mobile browser in how they implement the HTML tag.

1 Like

This plug works well, thanks. However, in combination with linkify it doesn’t work. Iis it possible for the link to work as well with the class too ??

Reposting the answer here as well. :slightly_smiling_face:


I think the issue is that the abbrify plugin skips link tags by defualt. You can try to fix it by modifying the code, deleting line 16 in head_tag.html

'a': 1,

https://github.com/metabrainz/discourse-abbrify-words/blob/a6651cf1c0a6d5233412f61b486cf256e36ffa1e/common/head_tag.html#L16

Let me know if it worked or if you need more guidance. :slightly_smiling_face:


Note, for linkify theme there is a separate user setting to modify which tags are skipped. I’ll submit a PR to this repo as well when I get a chance.

3 Likes

Is there any possibility to add the tooltip theme component functionality here?

That would be a great addition since abbr tags are basically useless on mobile

2 Likes

I did a rough user stylesheet (CSS) to allow me see tooltips on mobile.
It requires Stylus extension (I use Firefox on Android that supports extensions).

This kind of stuff could be included in the plugin but I actually use it on all sites.

abbr[title]:hover {
    border: 2px solid white;
    color: #333;
    background: #FF6;
}
abbr[title]:hover:after {
    content: " (" attr(title) ")";
}
4 Likes