Plugin Frimousses v2

Un plugin qui modernise la contribution historique en remplaçant les raccourcis ASCII par des emoiji unicode.

Le plugin propose la conversion à la volée, lors de l’affichage, des raccourcis ASCII traditionnellement utilisé pour représenter des smileys en saisie texte par l’emoji unicode adapté.

L’utilisation d’emoji à la place d’images utilisées dans les anciennes versions du plugin permet un rendu plus léger et rapide (un emoji n’est que du texte, représenté par 2 ou 4 octet en UTF8).

Le rendu sera différent selon les plateformes sur lesquelles le texte est visualisé. En contrepartie, et par conséquent, cela utilise le rendu auquel l’utilisateur est habitué.

Dans la barre d’outils de saisie de texte une nouvelle palette apparait permettant d’insérer un smiley si on n’est pas habitué aux raccourcis textes ou de voir quels raccourcis sont supportés

Les smileys sont toujours insérés au format raccourci texte dans l’édition

Mais ils sont bien rendus en emoji.

Attention : la palette de la barre d’outils d’édition utilise des images, elle, pour des raisons techniques. Elle ne représente pas le rendu final qui varie, mais est simplement une représentation parmi d’autres de l’expression qu’on souhaite rendre.

Rendu HTML et styles

Les smileys sont insérés dans une balise <b> avec une classe .smiley :

<b class="smiley" title="PTDR">&#128516;</b>

Il est ainsi possible de personnaliser le rendu pour par exemple grossir un peu les smileys par rapport au reste du texte :

.smiley {
        font-size: 1.2em;
        line-height: 1;
}

updated on 6 April 2020

Discussion

2 discussions

  • 1

    Hello

    Bizarre j’ai un icône vide dans la barre d’édition.
    Dans le code interprété, je vois
    background-image: url('data:image/svg+xml;base64,');

    Pas de problème pour le sous-menu, là j’ai bien les icônes.
    Là j’obtiens
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4b etc...);

    Etonnant, non ?

    Reply to this message

  • 1

    Bonjour.

    J’ai juste une question : pourquoi ce choix des balises b à la place de span ?

    • Parce que c’est moins de code, et que <b> ne porte pas de sémantique (contrairement à <strong> et qu’il n’influe pas sur la mise en forme du smiley ?

      Mais si ça pose des problème on peut basculer sur du span assez simplement je pense

    Reply to this message

Ajouter un commentaire

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom