Ajouter des balises <abbr> aux mots dans les posts

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

1 « J'aime »

Ce plugin fonctionne bien, merci. Cependant, en combinaison avec linkify, cela ne fonctionne pas. Est-il possible que le lien fonctionne également avec la balise ??

Je reposts également la réponse ici. :slightly_smiling_face:


Je pense que le problème vient du fait que le plugin abbrify ignore par défaut les balises lien. Vous pouvez essayer de le corriger en modifiant le code et en supprimant la ligne 16 dans head_tag.html :

'a': 1,

Faites-moi savoir si cela a fonctionné ou si vous avez besoin de plus de conseils. :slightly_smiling_face:


Notez que pour le thème linkify, il existe un paramètre utilisateur distinct pour modifier les balises ignorées. Je soumettrai également une PR sur ce dépôt dès que j’aurai un moment.

3 « J'aime »

Existe-t-il une possibilité d’ajouter ici la fonctionnalité du composant de thème d’infobulle ?

Ce serait un excellent ajout, car les balises abbr sont pratiquement inutiles sur mobile.

2 « J'aime »

J’ai créé une feuille de style utilisateur (CSS) approximative pour me permettre de voir les infobulles sur mobile.
Elle nécessite l’extension Stylus (j’utilise Firefox sur Android qui prend en charge les extensions).

Ce genre de chose pourrait être inclus dans le plugin, mais je l’utilise en fait sur tous les sites.

abbr[title]:hover {
    border: 2px solid white;
    color: #333;
    background: #FF6;
}
abbr[title]:hover:after {
    content: " (" attr(title) ")";
}
6 « J'aime »

Salutations ! Merci d’avoir partagé le code :raised_hands:
Comment puis-je obtenir l’effet d’un commentaire apparaissant au-dessus d’une abréviation ? comme indiqué dans cet exemple :

1 « J'aime »

Après avoir bricolé pendant une demi-journée, j’ai réussi à créer le code en utilisant le bot Discourse AI de @Falco :muscle:
Je reçois de l’aide d’un bot depuis deux semaines maintenant, que ce soit ici sur Meta (pour rechercher la signification d’une requête) ou sur mon site web pour écrire tel ou tel code. Voici le code que j’ai réussi à assembler pour résoudre le problème ci-dessus :

abbr[title] {
    position: absolute;
    background: transparent; /* Fond transparent à l'état inactif */
    overflow: visible; /* Permet au contenu de dépasser les limites de l'élément */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* Teinte blanche ou noire pour le script ? */
    }
}
abbr[title]:hover {
    background: #FF6; /* Au survol, l'arrière-plan baigne dans une teinte jaune vibrante. */
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* Modifiez cette valeur pour contrôler l'écart. */
    left: 0;
    width: 250px; /* Largeur fixe */
    height: auto; /*"Élévation réglable" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* Spécifiez la teinte d'arrière-plan pour le commentaire. */
    color: #333;
    margin-bottom: 10px; /* Incorporez une marge inférieure pour créer une séparation. */
}

Je laisse cela ici ; peut-être que quelqu’un trouvera cela utile :slightly_smiling_face:

Ps. Faites preuve de clémence si vous rencontrez une erreur dans le code, car je ne suis absolument pas un ingénieur logiciel de profession.

6 « J'aime »