étoiles d'évaluation : Unicode ou .svg ?

Bonjour,

Pour vos étoiles d'évaluation utilisez-vous Unicode ou une planche .svg ?

Si Unicode :
★
☆
Mais les espaces entre les étoiles sont difficiles à raccourcir.
  est sensé être plus fin qu'un espace mais peu de navigateurs le gèrent.

Si .svg, connaissez-vous une adresse pour charger une planche d'images libre de droit ?

Merci de vos lumières.

Salut !

Alors pour le coup autant mettre une font-icon directement non ? Tu pourras gérer toutes les icones de ton site en une seule fois.
Modifié par _laurent (07 Feb 2023 - 09:47)

Salut,

Sur fontawesome, tu as l'embarras du choix pour des étoiles .

Si c'est juste une étoile qu'il te faut, fontawesome ne sera pas pertinent. Autant utiliser une entité html.

Il ne faut pas oublier non plus les sprites SVG qui sont la solution du moment, bien plus fiable à l'utilisation qu'une font.

Un petit exemple en ligne : CodePen

Il suffit pour cela de mettre les SVG sélectionné dans un dossier puis d'appliquer un script qui les transformera en sprites (exemple pour l'étoile à 5 branches version Material Icon) :

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="start" viewBox="0 0 48 48">
    <path d="m16.15 37.75 7.85-4.7 7.85 4.75-2.1-8.9 6.9-6-9.1-.8L24 13.7l-3.55 8.35-9.1.8 6.9 6ZM11.65 44l3.25-14.05L4 20.5l14.4-1.25L24 6l5.6 13.25L44 20.5l-10.9 9.45L36.35 44 24 36.55ZM24 26.25Z"/>
  </symbol>
</svg>

Pour produire ces sprites sous npm j'utilise svg-symbol-sprite.

Toutes les icônes présentes sur mon site de démonstration sont affichées avec cette technique.
Modifié par Olivier C (09 Feb 2023 - 13:12)

J'ai répondu sans avoir vu la réponse d'Olivier C ci-dessus.
J'y reviens demain soir.

Bonjour,

Olivier C a écrit :
Salut,
L'unicode c'est casse gueule, non seulement pour la compatibilité entre navigateurs mais surtout en fonction du système d'exploitation. Maintenant ça va mieux, mais il n'y a pas si longtemps encore c'était très mal géré par les téléphones mobiles.

Donc tu penses qu'il faut éviter ★ et ☆ ?

Même avec une police sur le serveur ?

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
url(../font/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'),
url(../font/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
font-display: swap
/* unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; */
}

Truc sympa je viens de découvrir que sans espace il y a un petit espace entre les étoiles, voir le codepen.

Question subsidiaire, pour l'accessibilité, la note est précisée dans la balise parente avec la propriété title, voir le codepen.
Est-ce une bonne méthode ?
Modifié par boteha_2 (07 Feb 2023 - 22:14)

boteha_2 a écrit :
Donc tu penses qu'il faut éviter ★ et ☆ ?

En réalité j'ai gardé une utilisation très réduite de ces unicodes, au nombre de... 3 (et ton étoile en fait partie) !

Je les écrits directement sous leur forme d'icône, jne peux pas les écrire ici car le forum d'alsa ne les acceptera pas à la validation du commentaire. Mais on peu les retrouver ici : Typography . Documentation (utilisé via data-uri pour l'élément HTML <hr>).

Autant dire que comme marge de manœuvre ce n'est pas terrible.
Modifié par Olivier C (09 Feb 2023 - 13:11)

Bonjour Olivier C,

Encore merci pour ton suivi.

Je n'arrive pas ouvrir les deux liens vers ton site démonstration.

Olivier C a écrit :
En réalité j'ai gardé une utilisation très réduite de ces unicodes, au nombre de... 3 (et ton étoile en fait partie) !

Si je comprends tu les utilises...
Alors je ne comprends pas pourquoi tu préfères les incorporer sous forme d'icône au lieu d'entité html ?

L'entité est reconnue par ma fonte Roboto.
Ne penses-tu pas qu'un problème d'affichage ne soit limité qu'à de vieux téléphones marginaux ?

C'est par défaut que je les utilise, à partir d'un design de codage antérieur. Le code avait pour but de donner du style à une balise HTML <hr> via data-uri et CSS. Difficile de faire autrement si l'on veut se passer du JavaScript.

Mais maintenant, avec l'avènement des tags d'accessibilité Aria, sur la prochaine mouture je passerai sans doute au SVG avec le bon tag Aria associé (role="separator").

PS : a priori l'unicode étoile n'a rien à voir avec ta font, il s'agit sans doute de l'étoile par défaut présente dans l'unicode. En effet, rares sont les polices qui vont jusqu'à courir les symboles unicode. Il y en a quelques-unes, mais il s'agit le plus souvent de remplacer quelques symboles seulement.
Modifié par Olivier C (09 Feb 2023 - 20:53)

Bonjour Olivier C,

Olivier C a écrit :
PS : a priori l'unicode étoile n'a rien à voir avec ta font, il s'agit sans doute de l'étoile par défaut présente dans l'unicode. En effet, rares sont les polices qui vont jusqu'à courir les symboles unicode. Il y en a quelques-unes, mais il s'agit le plus souvent de remplacer quelques symboles seulement.

Tu as sans doute raison, je ne vois pas d'étoile dans Roboto ni Roboto de Google.

Bon, pour l'instant sauf contre-indication majeure je garde mes entités HTML, c'est trop simple.
Modifié par boteha_2 (09 Feb 2023 - 22:26)