OK
AJAX error!

Les forumsGrammalecteIcônes cassées sur Firefox

Icônes cassées sur Firefox

Salut !

Les icônes sont cassées sur Grammalecte sur Firefox.

Capture d'écran : i.imgur.com…

Cordialement,
Lip
le 17 mai 2019 à 21:13
Bonjour,

Ce ne sont pas des icônes mais des caractères, apparemment non supportés par la police que vous utilisez, ce qui est surprenant, attendu que c’est bien la “Trebuchet MS”… Du coup, je déduis que votre OS est ancien ou que la police “Trebuchet MS” fournie sur Linux n’est pas mise à jour.

Quel est votre OS ?
le 18 mai 2019 à 09:04
C'est exactement ce problème que j'ai signalé de manière textuelle dans grammalecte.net…

Naheulf le 16 mai 2019 à 14:57
– Les icônes (caractères) utilisés pour coller le panneau sur les bords sont remplacés par leur point de code Unicode.

le 18 mai 2019 à 10:29
Oui, alors en fait, le problème ce n’est pas tant la police qui est très commune (“Trebuchet MS”) que la version de la police.
Apparemment, les anciennes versions de Windows n’ont pas des polices mises à jour.
Du coup, la “Trebuchet MS” de Windows 10 est plus complète que celle des Windows antérieurs.

Il faudra utiliser des caractères plus communs…
Malheureusement, la politique de sécurité des WebExtension ne permet même pas d’inclure des images incluses dans l’extension elle-même.

Je vais voir ce que je peux faire.
le 18 mai 2019 à 10:45
À ce moment là, pourquoi cela fonctionnait avec les versions précédentes ? Changement de caractère utilisé ?
le 18 mai 2019 à 11:04
C’étaient d’autres caractères, plus communs, mais moins jolis et intelligibles.

Bon, problème réglé, j’ai intégré des images en base64 à l’intérieur du code CSS.
le 18 mai 2019 à 12:44
Quitte à intégrer des images, ça ne srais pas plus léger de mettre des images en SVG (fichier xml) ?
le 18 mai 2019 à 13:25
On peut intégrer du SVG dans du CSS ?
Ce serait plus léger que 1,33 Ko pour les 4 images réunies ?
le 18 mai 2019 à 13:31
C'est possible : jsfiddle.net… (ne pas juger mon coté artistique)
le 18 mai 2019 à 17:22
J’ai testé avec une image similaire, ça prend deux fois plus de place. Pas facile de faire moins que des images de quelques centaines d’octets.
le 18 mai 2019 à 19:22
Pour le bouton "grammalecte_move_button_up" on peut remplacer

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAABcSURBVChTlY67DcAgDEQZhg3oGJMuA9CzoTlbcoQT8zvpFX7cSQQiusKVK1wJCkgfJ/wE4LImA/NuDjCWNWY0lh8wyzvScgW7yIjLTc6zZB7EG/RLx7hyhSvnUOgfudLrksye1QAAAABJRU5ErkJggg==')


par

url('data:image/svg+xml;utf8,<svg xmlns="http&#58;&#47;&#47;www.w3.org&#47;2000&#47;svg" width="12" height="12"><path fill="%23fff" d="m 6,2 6,6 h -12"/></svg>')


Par contre il ne faut pas utiliser Inkscape pour arriver à un résultat aussi compact…

Édit : J’ai été obligé d’encoder les caractères « : » et « / » dans l'url "www.w3.org… " pour que le site ne la transforme pas en lien clickable… (en faisant sauter le « " » final au passage…)
le 19 mai 2019 à 10:48
OK, vendu. Mais je ne connais pas du tout cette norme, il faut donc me fournir le code pour chaque bouton.
le 19 mai 2019 à 11:30
Pour la gauche :

url('data:image/svg+xml;utf8,<svg xmlns="http&#58;&#47;&#47;www.w3.org&#47;2000&#47;svg" width="12" height="12"><path fill="%23fff" d="m 2,6 6,6 v -12"/></svg>')



Pour la droite :

url('data:image/svg+xml;utf8,<svg xmlns="http&#58;&#47;&#47;www.w3.org&#47;2000&#47;svg" width="12" height="12"><path fill="%23fff" d="m 2,0 6,6 -6,6"/></svg>')



Pour le bas :

url('data:image/svg+xml;utf8,<svg xmlns="http&#58;&#47;&#47;www.w3.org&#47;2000&#47;svg" width="12" height="12"><path fill="%23fff" d="m 0,2 6,6 6,-6"/></svg>')



Si je ne me suis pas trompé dans mes calculs, les flèches devraient être dans le bon sens…
le 19 mai 2019 à 18:21
J'utilise Firefox 66.0.5 sur Windows 7
le 19 mai 2019 à 18:24
En bonus un cercle de taille plus proche de ces triangles que le caractère "•":

url('data:image/svg+xml;utf8,<svg xmlns="http&#58;&#47;&#47;www.w3.org&#47;2000&#47;svg" width="12" height="12"><circle fill="#fff" cx="6" cy="6" r="4"/></svg>')



Note : pour déplacer les triangles dans les images, il faut modifier les deux premières coordonnées de l’attribut « d » de la balise « path » 😉.
le 19 mai 2019 à 19:24
Merci, ça fonctionne.
le 19 mai 2019 à 21:12
Bonjour,

c'est peut-être trop tard ma réaction mais il y a cette technique qui peut être utilisé : picturepan2.github.io…
Il y a 40 icônes faite qu'en css ;) qui tiennent dans 11ko.

(Il y en a d'autre ici cssicon.space… )
le 20 mai 2019 à 12:26
Merci.
J’ai réussi à adapter les SVG pour faire ce que je voulais. Merci aux tutoriels du Net.
le 20 mai 2019 à 17:12
Je me permet de revenir sur mon message précédant pour ajouter que les icônes faite qu'en css peuvent avantageusement remplacer font-awesome qui rien qu'a lui seul demande près d'1Mo. Et donc avec beaucoup moins d'espace occupé les 4 / 5 symboles utilisé de font-awesome peuvent être remplacé.
le 21 mai 2019 à 09:22
Ce peut effectivement être utile, pas à cause de la taille, mais parce que le CSS est l’une des rares choses qu’on peut injecter dans une page Web, à cause de la police de sécurité des WebExtensions.
le 22 mai 2019 à 13:13

Notification par e-mail    0