Add <abbr> tags to words in posts

Theme component
24

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

1 Like
25

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

26

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
27

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
28

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) ")";
}
6 Likes
29

Greetings! Thanks for sharing the code :raised_hands:
How can I achieve the effect of a comment appearing above an abbreviation? as indicated in this example:

image

1 Like
30

After fiddling around for half a day, I was able to create the code using Discourse AI bot from @Falco :muscle:
I’ve been receiving help from a bot for two weeks now, be it here on Meta (in terms of searching for the meaning of the query) or on my website with writing this or that code. Here’s the code I was able to put together to solve the above problem:

abbr[title] {
    position: absolute;
    background: transparent; /* Прозрачный фон в неактивном состоянии */
    overflow: visible; /* Позволяет содержимому выходить за границы элемента */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* White or black hue for the script? */
    }
}
abbr[title]:hover {
    background: #FF6; /* Upon hovering, the background bathes in a vibrant hue of yellow.*/
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* Alter this value to control the discrepancy. */
    left: 0;
    width: 250px; /* Fixed breadth */
    height: auto; /*"Adjustable elevation" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* Specify the background hue for the commentary. */
    color: #333;
    margin-bottom: 10px; /* Incorporate a lower margin to forge a separation. */
}

I’m leaving this here; perhaps someone might find it beneficial :slightly_smiling_face:

Ps. Exercise leniency should you encounter an error within the code, as I am unequivocally not a software engineer by profession.

6 Likes