À propos des smileys et emojis #4

Résumé de la discussion ayant lieu sur l'ancienne forge

La v5 est codée avec des technos supportant l'Unicode, et par conséquent les emojis.

L'affichage dépendant de la police d'écriture du client, il a été proposé d'utiliser une police d'emojis sympa. Le choix n'a pas encore été fait.

En ce qui concerne l'insertion d'emojis sur un desktop, je propose un système à la Mastodon :

une icône à proximité du champ de texte pour ouvrir une boite de dialogue avec les emojis ;
une autocomplétion sur :s…m…ile: ;
le serveur converti tout seul :smile: vers 😄 si le javascript n'est pas activé coté client ;
plus des raccourcis type :) ;) :D par exemple.

On oublie les vieux smiley PHPbb

On oublie les smiley PHPbb mais on garde certains sympa comme le :mgreen:

Le coup de la police est le plus handicapant pour moi, il faut faire attention aussi à ceux qui les désactivent (il y en a). Je suis très chaud pour passer à l'Unicode, j'attends juste que ce problème technique soit résolu.

Du reste je ne sais pas encore à quel point il est facile d'autocompléter en JS sur du lightscript. À voir si le client doit vraiment tout parser !

Si tu désactive consciemment les polices, faut pas se plaindre de mal voir les emojis dans ce cas.

Concernant l'autocomplétion, je pense pouvoir pondre un truc maison assez léger (tous les raccourcis commencent par :, donc ça réduit la puissance nécessaire pour parser tout le texte. J'essaierai de présenter un PoC à l'occas' (et de proposer une manière propre de mettre à jour la liste des raccourcis supportés).

Oublie pas qu'on a aussi les raccourcis vers les ressources, du genre :uLephenixnoir qui n'interfèrent pas avec les smileys mais risquent de te pourrir ton autocomplétion.

Petite question, si on choisi de garer certains émojis de la v42, on les implémente comment ?
Avec une police custom ? Ou alors avec des images et ce sont des émojis "en plus" ?

Les smileys de la v42 passeront vraiment pas en police... faudrait que ce soit des images. Possiblement une image avec du CSS pour sélectionner le bon.

Je pensais au mgreen en particulier, qui pourrait peut-être remplacer un autre émoji existant dans la police.
Pour les autres smiley, certains sont déjà existant en unicode et les autres sont des gif trop grand pour passer en tant que caractères.

Hmm, il risque de disparaître celui-là. Je veux pas me prononcer trop vite, mais... tu as 😁 qui ressemble dans le jeu de Twitter/Discord, mais clairement pas sur Gitea. xD

Naaaannnnn 😭 moi je veux le garder(c'est un peu la base de cette issue sur le gitlab) Je voulais justement garder cet émoji là, mais au pire je fait une police custom ou je emplace le 😁 par le magnifique mgreen

On peut pas utiliser les blocs customs d'UTF-8 ? Il me semble que y'a des espaces réservés aux usages personnels…

On pourrait le faire, mais ça veut dire qu'il faut qu'on dessine nous-même le smiley dans une police. Je pense pas qu'on gardera les bitmaps actuels, si ? J'étais parti pour passer définitivement au vectoriel.

On peu redessiner, y'a moyen que l'un d'entre vous envoie une archive avec tous les émojis actuels dedans ?

Comment ça ? Il faudrait déjà sélectionner une police de smileys et ensuite le faire dans un style proche.

Je pense que pour faire les émojis on à besoin de se baser sur 2 choses, la police choisie pour les émojis utf-8 de base, et les émojis actuels.
Pour les émojis utf-8 je ne sais pas quel police sera choisie, mais les émojis actuels sont un peu relou à récupérer sur la v42... du coup est-ce que qqun qui à accès à la v42 peut copier le dossier des émojis, le mettre dans une archive et envoyer ça dans un commentaire du thread ?

Désolé, je n'ai pas ça en local, et le FTP est inaccessible ; je ne peux pas te créer une archive.

Pour moi on utiliserait une police existante et c'est tout. On change de set de smileys, de toute façon ils sont quasiment tous identiques. Reste le :E qu'on pourrait tenter d'ajouter à la police en question mais je suis pas sûr que ce soit facile.

Du coup je vois pas trop ce que tu veux faire les smileys existants...

Edit: Pour citer Darks :

On oublie les vieux smiley PHPbb

Je me permet de linker ZdS...
https://zestedesavoir.com/forums/sujet/538/clem-sur-le-devant-de-la-scene/?page=18
J'ai vraiment envie de garder certains émojis, le :E par exemple pourrait simplement remplacer le 😁 et si c'est pas trop compliqué on pourrais carrément imaginer avoir un set d'émojis custom pour PC

Ça a l'air pas mal en vrai. Le :grin: est un plutôt beaucoup utilisé donc peut-être en virer un autre, mais c'est vrai que le SVG c'est plus facile à faire qu'une police. Est-ce qu'on peut convertir facilement ? Quelqu'un est chaud pour tenter de faire des SVG ?

Je veux bien tenter, je vais un peut plus me renseigner sur comment ça fonctionne,
et peut-être ajouter directement la police des tweetmojis dans PCv5, si vous êtes ok pour choisir cette police là pour uniformiser les émojis.

Moi ça me va. Assigne-toi à l'issue pendant le temps où tu travailleras dessus (quitte à te désassigner plus tard) o/

Je suis pas du tout chaud pour remplacer des émojis par d'autres, pour la simple et bonne raison que les devices utilisant un clavier d'émoji (téléphones et tablettes entre autres) seront complètement perdus…

Utiliser l'espace privé d'UTF-8 me parait être largement plus raisonnable.

On parlait de changer le design en gardant la sémantique, comme sur Zds typiquement. Les espaces privés sont pas beaucoup mieux parce qu'on ne peut juste pas les taper sur un clavier sauf avec des combinaisons chelou.

Pas forcément remplacer totalement un émoji, mais le modifier pour le faire coller à ce qu'on préfère nous.

PS: Comme je ne suis pas dans l'organisation devs et que je n'ai pas la possession de l'issue je ne peut pas m'assigner...

Le 😁 est un plutôt beaucoup utilisé donc peut-être en virer un autre

Justement, je suis contre en virer.

Je t'ajoute au groupe des devs

Et comment tu les saisis alors ?

Tous nos smileys sauf :E ont un équivalent Unicode. On pourrait faire comme ZdS et juste les redesigner. Eux ont fait des clémentines à la place des têtes, par exemple.

Pour :E, je trouve qu'il se mappe bien sur :grin:.

Redessiner les smileys à la ZdS je dis pas non.

Pour :mrgreen: qui remplace :grin: je reste contre. Non seulement je trouve que ça correspond pas du tout au smiley et à l'usage que j'en ai, non seulement

les devices utilisant un clavier d’émoji (téléphones et tablettes entre autres) seront complètement perdus…

Pas d'accord sur la dernière assertion. Si tu remplaces un émoji proche (peu importe lequel) les claviers d'émoji pourront servir. Si tu le mets dans un autre bloc il sera impossible de le taper au clavier sauf sur un PC.

Le deuxième argument peut être pallié avec un bouton permettant l'ajout d'un smiley custom qui est dans la zone réservé pour, mais c'est moche et pas pratique.
Quel est ton usage du :grin: ? @Darks

Le deuxième argument peut être pallié avec un bouton permettant l’ajout d’un smiley custom qui est dans la zone réservé pour, mais c’est moche et pas pratique.

+1

Si tu remplaces un émoji proche (peu importe lequel) les claviers d’émoji pourront servir.

Ce que j'appelle remplacer, c'est changer le sens de l'émoji. Actuellement le :mrgreen: n'a selon moi pas d'équivalent dans les émoji utf-8. Typiquement le :grin: je l'utilise dans le cas où j'ai fait une boulette. À la rigueur je remplacerai plus U+1F602 (😂).

Je sais que vous êtes attachés à :mrgreen:, mais j'irai pas commencer à bidouiller les émojis, c'est pas pour rien que c'est devenu une norme

À la rigueur je remplacerai plus U+1F602 (😂).

Ce qui me va très bien par exemple. Après tout les utilisateurs s'y feront. Au moins ils pourront le taper.

Je sais que vous êtes attachés à :mrgreen:, mais j’irai pas commencer à bidouiller les émojis, c’est pas pour rien que c’est devenu une norme

Il n'y en a qu'un à remplacer. Si ça ne tenait qu'à moi j'utiliserais un set standard.

En fait je tiens beaucoup au :mgreen: principalement car on l'utilise partout pour plusieurs sens différents et que quand je ne l'ai pas je ne sais plus quel émoji mettre puisque je n'ai pas trouvé d'émoji signifiant à peu près les mêmes choses que celui-là.

PS: J'ai beau être dans l'organisation je ne sais pas du tout comment la propriété des issue et des droits est géré, mais je ne peut pas m'assigner(ou alors c'est moi qui sait pas utiliser gitea)

C'est la gestion des organisations de Gitea qui est mal foutue. Le dépôt est associé au groupe Owners de devs, du coup t'avais pas les droits. J'ai du t'ajouter à la main, c'est résolu normalement ^^

En effet, c'est étrange... Bah du coup c'est bon.

J'ai essayé de jouer un peu avec les tweetmoji et j'ai rencontré quelques problèmes.

Comment on génère la police ?
L'émoji mgreen actuel est tellement pixelisé que pour avoir une ombre chaque pixel est d'une couleur différente des autres. Je prend quel couleur du coup ?
L’émoji 😁 des émojis de Twitter est légèrement différent du notre, la bouche n'a pas la même forme. Pour avoir la même forme, et donc la même expression il me faudrait le redessiner presque depuis le début.

Je joint l’émoji actuel en png et un essai en svg.
PS: je peut pas joindre ces fichiers là... svg et gif sont bloqués du coup j'utilise transfer.sh

Petite mise à jour avec des essais en plus, j'ai repris l'émoji de discord qui me semblais plus proche. À vous de juger.
L'émoji basé sur ceux de Twitter à le fond transparent et je n'ai pas remis le blanc des dents.

PS: pour le svg de l'émoji de discord voilà le lien

1f601_discord.png

29 KiB

1f601.png

24 KiB

Hmm, ça pourrait être plus vert. Je tenterais bien de modifier la bouche pour se rapprocher du :E actuel.

J'aime bien la tournure que ça prend. On le met où du coup ?

Ce qui me fait chier dans le fait de refaire c'est que les objets sont mal foutus, c'est opti en place mais pas en édition, j'ai plus tous les chemins, certains morceaux sont fusionnés... c'est hyper relou de refaire mais ça se fait.

Il faudrais trouver un émoji à remplacer. Sur Discord y'a un émoji 😬 et un émoji 😁 et c'est pas du tout le même résultat que les émojis twitter.

Plus de vert ? J'ai juste ajouté du vert, j'aime un peu moins.

Je suis au maximum du vert, là.

1f601-green++.png

23 KiB

Tendre vers le vert et juste rajouter du vert sont deux choses différentes !

mrgreen.png

20 KiB

En effet, le tien rend mieux.
Pour la bouche je vais voir ce que je peut faire mais ça risque d'être long et complexe.

Est-ce que tu as pu progresser ? Ce serait bien que tu partages tes fichiers svg pour qu'on puisse au moins avoir une trace et de quoi reprendre si quelqu'un d'autre veut finir. 😃

Étant en vacances sans avoir pu prendre le temps de continuer, assez paradoxalement en cvacances je suis plus chargé qu'en dehors, je n'ai rien fait de plus, les fichiers svg seraient mieux de quel manière ?

Balancé ici et potentiellement perdus.
Sur le repos du code dans un dossier séparé.
Ou alors je crée un autre repos dédié aux images de la v5(ce qui peut être une idée pour y centraliser les icones, les images et les polices d'écritures)

Si ce n'est pas final je dirais dans cette issue. Tu peux aussi les pousser sur le dépôt, dans un des dossiers statiques, là où les images iront, sur master ou sur une autre branche. (Multiplier les dépôts me semble une mauvaise idée parce que deux issues trackers, et de toute façon les images seront aussi ici.)

Tant que cette issue reste ouverte, je doute que ça tombe dans l'oubli. 😃

Gitea fait chier à pas vouloir envoyer les fichiers bruts alors voilà un zip avec les png et les svg

PCv5.zip

83 KiB

Update, je me suis remit, au travail, j'ai ajouté quelques trucs, mais ça me plaît pas trop, je sais pas ce qui manque, ou qui est en trop, pour le rendre bien.

1f601_discord2.png

25 KiB

Je propose aussi, en me basant sur les émojis utilisés par discord une petite modification des émojis démons, changer le violet en rouge(le violet rend moins bien je trouve)

J'ai déjà fait un essai

69cc1b4583611ccc6.png

22 KiB

Mais pourquoi vous ne voulez pas utiliser des émojis libre de droits ?

Je les trouve rigolo avec cette forme là (c'est en vectoriel).

Y'en a pleins ici dans ce style, et ils sont libre il me semble.

Edit : y'a aussi pleins d'émojis sur FontAwesome, en les colorisant en jaune ça peut être intéressant ? D'autant plus que la question de l'implémentation ne se pose plus avec ce genre de set.

Edit : ajout des images ici, gauche = FontAwesome, droite = émoji carré

Capture du 2019-09-18 15-14-29.png

152 KiB

Capture du 2019-09-18 15-15-52.png

3.1 KiB

En réalité le problème n'est pas de choisir une police d'émoji mais ma volonté de garder le :mrgreen: c'est un des émojis les plus utilisé de PC et je ne le connaît que sur PC, je trouverais dommage de le perdre(surtout que je ne lui connaît pas de remplacement)

Il me semble que les tweetmojis avaient été pris comme émojis. À savoir ils sont libres de droits et régulièrement mit à jour vers la dernière version d’Unicode.
Discord en utilise une variante un peu ancienne, c'est d'un mélange de la version actuelle et de la version de Discord dont je m'inspire pour essayer d'adapter le :mrgreen: à la V5.

Mais pourquoi vous ne voulez pas utiliser des émojis libre de droits ?

Dans mon conservatisme (stupide par moments), je n'aime pas vraiment l'idée de tirer des choses moyennes de FontAwesome (vu et revu, jamais très satisfaisant), d'ensembles réduits pour lesquels on n'a aucun moyen d'extension (surtout qu'on a des smileys assez spéciaux), ou d'uploads aléatoires sur des sites de partage dont les conditions d'utilisation sont changeantes et jamais très bien décrites.

La formulation de la question élude donc les vraies questions.

Maintenant ce n'est pas que je ne veux pas (personnellement) le faire. Mais je me suis déjà fait taper sur les doigts rien que pour avoir essayé d'harmoniser les smileys existants ensemble.

D'une part on a des smileys spéciaux comme :E qui font partie de l'identité du site et qu'on doit absolument garder.

Ensuite il faut supporter ces smileys spéciaux par compatibilités avec les contenus de la v42.

Et ensuite ce n'est pas si difficile de faire des essais à la main, et ça nous donnerait à la fois le contrôle sur les ajustements et la capacité d'étendre le jeu de smileys plus tard.

(Je ne tiens pas à paraître froid ni rien, je suis juste fatigué de 8 heures de prises de notes en LaTeX dans la journée donc je vais un peu droit au but. ^^)

Déjà faut séparer les emojis des smileys. Y'en a qui sont définis par une norme (l'UTF-8), d'autres qui sont définis sur le site.

La première question consiste à choisir une police libre d'utilisation pour les emojis, qui soit pas trop moche. Twitter en propose une, Zeste de Savoir en a refait une, etc. Quoi qu'il arrive ce n'est pas dans cette police qu'on inclue :mrgreen: étant donné qu'il n'est nulle part dans les emojis UTF-8.

La seconde question consiste à créer une police utilisant les zones custom d'UTF-8 pour inclure les smileys de la v42 qu'on veut ajouter à la v5. Et si possible les rendre à peut près cohérents entre eux.

Je rappelle que les smartphones ont des claviers d'emojis UTF-8, d'où la nécessité de ne pas modifier un emoji pour en faire un smiley. Un peu comme si taper sur A insérait un B. Si le smiley est presque pareil, alors c'est comme O → Q. C'est presque pareil, mais d'un point de vue utilisation c'est vraiment relou.

Il faut donc les deux systèmes. Et la première question peut vite être réglée si on choppe une police classique.

Il faut donc les deux systèmes.

Je n'ai pas mieux à proposer.

Et la première question peut vite être réglée si on choppe une police classique.

Attention à ne pas prendre un set ad hoc et l'étendre avec des trucs custom sans faire attention à préserver le style.

Je les trouvais marrant ceux-là les cubicopp, et pas trop compliqué à étendre pour avoir tous les smileys de Planète Casio, un bon coup de svg, je peux peut-être essayer si jamais ça vous intéresse.

Après concernant le pack "universel" (la 1ère question) je trouve les emojis discord pas trop mal, et facile à "étendre dans le même style" (pour la 2ème question), comme les essais fait par Eragon. Mais je n'arrive pas à trouver l'info si ils sont libres de droits ou pas...

Edit : j'ai trouvé Emojipedia/discord, apparemment c'est les Twemoji (je pose le repo twemoji ici).

@Eragon, essaye en enlevant la barre horizontale entre les dents du haut et du bas pour voir ? Et tu peux partager le fichier j'aimerais essayer des trucs aussi ^^ .

Alors... Oui je veux bien partager, je pense que je vais créer une branche sur le repo et push ça dans un dossier, ça permetra de centraliser tout et de versionner en plus.

En plus de ça je vais envoyer un zip avec tous les fichiers que j'ai.

Voilà le zip, il contient, les différents gif/png du mrgreen pixelisé les différents fichiers de base de mon travail(en svg ou png...) et un fichier à peu près correct.
En plus ce ça il y à l'image du démon.

PCv5.zip

154 KiB

Update: Sans la barre au milieu(éditer dans sublime text, c'est génial les svg ❤️ )

image.png

30 KiB

Je préfère comme ça, et tu peux tenter de faire la bouche beaucoup plus large ? Aussi personnellement je préférais la première couleur que tu avais mis (un peu plus bleu).

La couleur ou j'ai uniquement ajouté du vert ?

Plus large dans quel sens ? Vert le haut ou à droite et à gauche ?

La couleur légèrement bleu que tu avais sur la première image du smiley que tu as partagé ici.

Plus large = droite/gauche, comme notre :E qui est très large sur les bords, je trouve que 'est ça qui fait le charme.

La couleur du premier à été prise directement sur l’émoji actuel. Ça m’embête de devoir modifier la bouche... je sais pas lire les paths en svg... c'est assez complèxe. mais je vais voir ce que je peut faire.

Je voudrais essayer avec Inkscape également... ce qui est bien plus facile que de lire le chemin.

Je voudrais essayer avec Inkscape également… ce qui est bien plus facile que de lire le chemin.

Inkscape m'a trop énervé... il refusait de faire ce que je veux. J'ai beaucoup de mal avec lui.

Si vous voulez essayer je vais push sur une nouvelle branche 4 fichiers, le fichier avec le vert, un autre modifié pour le "bleu" et deux autres à modifier pour avoir la large bouche en vert et en "bleu".

EDIT: Je l'ai fait, le branche se nomme emoji l'unique commit sur la branche est visible et ajoute les fichiers dans le dossier app/static/images/emojis

Oh oui, fais, n'hésite plus !

Mmmm, vous êtes pas en train de mettre la charrue avant les bœufs ?

Il faut donc les deux systèmes.

Attention à ne pas prendre un set ad hoc et l’étendre avec des trucs custom sans faire attention à préserver le style.

Pour moi l'ordre c'est :

choisir une foutue police ;
refaire :mrgreen: et les autres suivant la-dite police.

J'ai vite fait cherché quelles polices sont facilement accessibles (i.e. sans du Javascript à fourrer pour parser le texte), y'en a pas tant que ça.

Dans tous les cas, j'ai trouvé une liste (non exhaustive) de polices d'emojis : https://typography.guru/list/topic/emoji-fonts/

Pour ma part, j'aime bien la Twemoji-color. Une version ttf/otf est dispo sur ce fork, dans la partie releases. Selon le readme, c'est du CC-By 4.0 donc plutôt permissif.

Ça tombe bien pour la Twemoji-color j'ai l’idée que ce que je fait est assez compatible... puisque quasi basé dessus(je me base sur la version de twitter qui est obligé d'utiliser du js... mais sinon c'est la même)
De plus cette police me plaît. Je ne l'avait pas trouvé en cherchant la tweetmoji mais en même temps c'est plus simple de travailler en svg puis de passer ça en autre chose.

Seems fair, ce plan avec la Twemoji me va.

Le commit a194136d47 réglant la partie police, et les smileys étant quelque chose à part entière, je clos ce ticket.