Juste pour voir, j’ai voulu, sur la page des archives de ce blog, permettre de modifier le tri des mots-clés — actuellement triés par fréquence d’utilisation — par ordre lexicographique. Pour l’instant, un petit bout de Javascript, qui réagit sur un clic sur le titre de cette section et qui fait le job attendu :
/*global $ */
'use strict';
$(document).ready(function() {
$('#arch-by-tag h3').click(function() {
const ul = document.getElementsByClassName('arch-tag-list')[0];
Array.from(ul.getElementsByTagName('LI'))
.sort((a, b) => a.textContent.localeCompare(b.textContent))
.forEach(li => ul.appendChild(li));
});
});Ça fonctionne très bien, la liste est triée comme attendu sauf que…
… la coupure des mots se fait au niveau de tous les mots composés et ce quelle que soit la place encore disponible en fin de ligne !
C’est étrange, non ?
Quelqu’un a une idée de ce qui se passe et comment je pourrais y remédier ?
J’ai demandé ce matin sur ##openweb (IRC), si quelqu’un comprenait le souci et finalement Karl m’a expliqué d’où venait le souci. En fait les éléments de la liste étaient stylés en display: inline, et se comportaient donc comme des mots, collés les uns aux autres si on fait abstraction du padding-right: 1em.
Du coup un changement en display: inline-block et tout rentre dans l’ordre \o/
Merci Karl !
1 De saymonz -
Les espaces entre la tags ne seraient-ils pas d’un genre totalement insécable par inadvertance ? Ce qui fait que le navigateur coupe comme il peut, c’est à dire aux points de coupure dans les mots ?
2 De Franck -
Non, non, des espaces tout à fait ordinaires, entre les mots-clés.
3 De Franck -
En fait je dis des conneries, y’a pas d’espaces du tout, c’est une liste non numérique (ul, li).
4 De saymonz -
Oui pardon, j’étais pas très réveillé. De toute évidence, le navigateur considère qu’il ne peut pas couper entre les mots, mais je ne connais rien à JS.
À quoi ressemble le code en entrée et en sortie ? Est-ce que faire en sorte il y ait un espace entre chaque élément li ferait le job ?
De toute évidence (mais ça ne t’aura pas échappé je pense) le navigateur considère comme impossible de couper entre les tags après la transformation alors qu’il le pouvait avant. On voit bien que le style des éléments ne change pas (les tags les plus utilisés sont toujours grossis), donc ça voit venir du HTML après transformation…
5 De Franck -
Je pense qu’il doit y avoir un truc avec les moteurs de rendu (Chrome ou Firefox rendent pareil dans ce cas). Y’a surement une technique pour faire ça en arrière-plan et relancer le dessin ensuite, mais ça dépasse mes compétences, pour l’instant !
6 De Karl, La Grange -
Et pour comprendre pourquoi cela marchait avant le filtre, il y avait un espace entre les éléments
li. Après la transformation, plus d’espace.7 De Bernard -
Ca semble retombé en marche…
C’était donc un problème d’espace entre les éléments
li?8 De Franck -
Bernard, en effet et une règle CSS
li { display: inline; }transformée enli { display: inline-block; }, corrige le problème.