Projet

Général

Profil

Evolution #4080

Raccourci puce : se débarasser de l'image

Ajouté par tcharlss (*´_ゝ`) il y a 9 mois. Mis à jour il y a 19 jours.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Catégorie:
css
Version cible:
Début:
24/01/2018
Echéance:
% réalisé:

0%

Resolution:
fixed

Description

J'ai déjà vu cette discussion passer, mais je n'ai pas trouvé de ticket s'y rapportant, donc :

Le raccourci -lorem ipsum produit une puce graphique :
  • Dans le privé :
  • Dans le public :
  • Et le code produit : <img src="local/cache-vignettes/L8xH11/puce-32883.gif?1516750409" class="puce" alt="-" width="8" height="11"> lorem ipsum

Sans rentrer dans la discussion sur leur pertinence (cf. ticket #1817), ces puces sont purement décoratives et pourtant impossibles à styler en CSS.
La seule personnalisation possible consiste à surcharger le fichier puce.gif, mais c'est un pis-aller.

2 possibilités :
  1. Insérer une image au format svg, ce qui permet en CSS de changer facilement la taille, la couleur etc. (et toujours possibilité de surcharger). Le support du svg est à 97,5% : https://caniuse.com/#search=svg
  2. Insérer un simple <span class="spip-puce"></span> avec des styles adéquats (image en background ou méthode des « triangles CSS »).

C'est un détail mais c'est toujours la petite épine dans le pied à la fin des projets d'intégration, au moment de fignoler les détails.

screenshot-127.0.0.1-2018.10.01-10-47-51.png Voir (3,17 ko) erational 👺鬼, 01/10/2018 08:49

Historique

#1 Mis à jour par RastaPopoulos ♥ il y a 9 mois

En fait il y a déjà un plugin qui vire ça du genre "belle puce" (très très mauvais nom qui ne dit pas ce que ça fait) et qui remplace les puces qui se suivent par des vraies listes HTML. Comme en markdown du coup.

Mais pour moi ça mériterait peut-être bien d'être par défaut en ne générant plus cette puce, et inversement un plugin grenier pour celleux qui veulent continuer d'avoir la puce.

#2 Mis à jour par erational 👺鬼 il y a 9 mois

Cette puce est une vieillerie.
Je suis du même avis que RastaPopoulos:
- ne plus générer d'image mais un liste classique propre
- avoir un plugin grenier pour ceux qui veulent conserver l'ancien comportement

#3 Mis à jour par chan kalan il y a 9 mois

Tout à fait d'accord !

#4 Mis à jour par b b il y a 9 mois

  • Version cible mis à 3.3

#5 Mis à jour par tcharlss (*´_ゝ`) il y a 9 mois

Dans le ticket #1817, un des arguments pour générer une vraie liste à la place de puces, c'est que les utilisateurs se trompent de raccourci (ils voudraient une vraie liste mais mettraient de simple tirets au lieu de -*).
Je nuancerais, d'après ce que j'ai vu, je suis presque sûr que des fois c'est volontaire, pour des raisons esthétiques à priori.

À mon avis ça pourrait générer effectivement une vraie liste, mais avec une classe supplémentaire : <ul class="spip puces">. Et ces listes pourraient être stylées avec le chevron à la place du truc par défaut au moyen de list-style-type
Ça ferait donc 3 types de listes en tout : normales, numérotées, et "décorées" (avec un chevron ou autre selon le thème).

Bon, après ça crée une petite incohérence dans la syntaxe. Si toutes les vraies listes commencent par un tiret suivi d'un caractère (étoile ou dièse), idéalement dans ce cas ça devrait être un tiret suivi d'un chevron ou autre : ->

#6 Mis à jour par b b il y a 9 mois

Je nuancerais, d'après ce que j'ai vu, je suis presque sûr que des fois c'est volontaire, pour des raisons esthétiques à priori.

Oui, il faut faire attention aux effets de bord, je vois souvent des gens utiliser les puces graphiques pour décorer un paragraphe et le distinguer de ceux qui suivent. Si on active un comportement "à la belles puces", les pages contiendront des vraies listes avec un seul li...

#7 Mis à jour par RastaPopoulos ♥ il y a 9 mois

Bé oui forcmément après des années avec un truc qui existe, les gens apprennent à l'utiliser comme ça. Mais si un truc n'est pas intuitif (pour les nouvelles personnes qui n'ont pas appris le mauvais comportement), il ne faut pas s'interdire à jamais de corriger par la suite, sinon on se traine des mochetés à l'infini pour toujours.

D'où le fait que le comportement pourrait changer par défaut, et avoir un plugin grenier pour les anciens sites déjà existants qui utilisaient l'ancienne puce moche. On l'indique bien dans la doc de version, avec le lien, et hop.

#8 Mis à jour par tcharlss (*´_ゝ`) il y a 9 mois

Donc les 2 cas pourraient éventuellement être distingués :
  • Une seule ligne : puce graphique
  • Plusieurs lignes : vraie liste avec une classe spécifique

#9 Mis à jour par chan kalan il y a 9 mois

Là je trouve que ça ajoute de la complexité, on va pas réussir à expliquer ça aux rédacteurs... il faut choisir l'un ou l'autre et gérer la compatibilité avec les anciens comportements. Si les utilisateurs n'ont qu'à activer un plugin du grenier c'est pas catastrophique... ?

#10 Mis à jour par cedric - il y a 22 jours

Je note que la demande initiale simple était "ne plus avoir une image sur cette puce parce qu'on ne peut pas la personaliser" et qu'à la fin il s'agit de tout revoir le fonctionnement des raccourcis SPIP et donc qu'on ne fera rien :)

Pour revenir au point de départ :

1/ peut-être ça manque de documentation mais la puce est totalement personnalisable via le mes_options.php :

$GLOBALS['puce'] = '<span class="spip-puce"></span>';
$GLOBALS['puce_rtl'] = '<span class="spip-puce"></span>';
$GLOBALS['puce_prive'] = '<span class="spip-puce"></span>';
$GLOBALS['puce_prive_rtl'] = '<span class="spip-puce"></span>';

2/ ça paraitrait moderne de passer à une puce unicode par défaut décorée en CSS avec un fallback texte pour les sites qui upgraderont sans avoir la CSS qui va bien

<span class="spip-puce"><b>—</b></span>

avec les styles suivants :

.spip-puce b {display:none;}
.spip-puce {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.spip-puce:before {
content: "\2023";
}

Avec puce à choisir parmi
https://unicode-table.com/fr/2023/
https://unicode-table.com/fr/25B8/
https://unicode-table.com/fr/25B6/

Du coup sans ces styles spécifiques, la puce est un simple tiret typographique, et avec les styles c'est un caractère qui s'affiche dans la couleur et taille de texte courante, et stylable

2b/
Voire si on veut faire une transition vraiment smoothly on garde le img actuel en fallback dans le span (au lieu du simple tiret), et il ne s'affichera plus que sur les anciens sites qui n'ont pas ajoutés la nouvelle CSS
(et on prévient que dans une prochaine version cette puce image disparaitra complètement)

3/ à partir du moment où on a un plugin qui permet de transformer ces puces en liste je pense que garder le comportement actuel par défaut dans SPIP est pertinent et le plus logique

#11 Mis à jour par cedric - il y a 22 jours

  • Assigné à mis à cedric -

#12 Mis à jour par erational 👺鬼 il y a 22 jours

Ajouté les 4 constantes puces à la doc.
https://www.spip.net/fr_article1825.html

#13 Mis à jour par tcharlss (*´_ゝ`) il y a 19 jours

Je +1 la solution de l'unicode, propre, facile à surcharger en CSS si on a besoin.

#14 Mis à jour par erational 👺鬼 il y a 19 jours

Je vote pour le caractère
https://unicode-table.com/fr/2023/

Voici un test chez moi en local sur SPIP 3.2, la dist et Firefox Windows (bref 100% vanille)

#15 Mis à jour par George Kandalaft il y a 19 jours

erational 👺鬼 a écrit :

Je vote pour le caractère
https://unicode-table.com/fr/2023/

Voici un test chez moi en local sur SPIP 3.2, la dist et Firefox Windows (bref 100% vanille)

https://unicode-table.com/fr/25B8/ serait mieux car elle a un equivalent pointant vers la gauche pour le RTL:
https://unicode-table.com/fr/25C2/

#16 Mis à jour par cedric - il y a 19 jours

kent1 propose
https://unicode-table.com/fr/203A/
avec sa variante pour le rtl
https://unicode-table.com/fr/2039/

Qui a le mérite de l'élégance (bon ça c'est subjectif mais ça me semble mieux que le triangle plein) et d'un large support (puisque guillemet simple)
La puce étant injectée en CSS (le html sera un tiret comme actuellement - simple ? demi/quart/entier cadratin ?) ça n'est sémantiquement pas gênant

#17 Mis à jour par erational 👺鬼 il y a 19 jours

L’intérêt de la dernière proposition est qu'elle semble bien supportée dans les polices typographiques.
Contrairement peut-être à d'autres caractères qui ne sont pas forcement intégré le jeu des certains polices.

#18 Mis à jour par nico d_ il y a 19 jours

La proposition de Kent1 est élégante, RTL, bien supportée, moi je dis banco.

#19 Mis à jour par cedric - il y a 19 jours

  • Statut changé de Nouveau à Fermé
  • Resolution mis à fixed

http://core.spip.org/projects/spip/repository/revisions/24118
et https://zone.spip.org/trac/spip-zone/changeset/111824

intègrent donc cette puce refondue sans image et stylée en CSS

Les globales restent totalement utilisables pour personaliser les puces, ce qui évitera de casser les sites qui en font usage lors de la migration
(les autres devraient s'en tirer si ils intègrent spip.css)

#20 Mis à jour par nico d_ il y a 19 jours

Une page #canal_historique qui se tourne :)
Merci !

Formats disponibles : Atom PDF