Le présent article est la réécriture d’un précédent article publié il y a une dizaine d’années pour appeler les gens à rectifier la mauvaise façon d’aligner les nombres dans les listes ordonnées. C’était alors en 2005.
Dix ans après, ce n’est guère différent. Il semble que les avis et les messages de personnes comme moi ont peu de chance de recevoir un écho favorable. En dépit de cela, aujourd’hui dans une nouvelle tentative, j’écris un nouvel article avec un nouvel espoir d’attirer l’attention des gens sur cette déplorable manière de faire. C’est que je m’inquiète!
Mais de quoi parle-t-il au juste vous questionnez-vous peut-être? Eh bien, «il» parle du principe élémentaire de l’alignement vertical des unités sous les unités, les dizaines sous les dizaines, les milliers sous les milliers, etc.
1 - Whitney Houston
2 - Luther Vandross
3 - Stevie Wonder
4 - Aretha Franklin
5 - Lionel Richie
6 - Marvin Gaye
7 - Seal
8 - Tracy Chapman
9 - Barry White
10 - Gil Scott-Heron
11 - Musiq Soulchild
12 - Eryka Badu
Remarquez l'affreux décalage qui se produit à partir de la ligne N°10. Tout le monde peut voir que dans ce mauvais alignement les unités sont au-dessus des dizaines. Vous pouvez me taxer de puriste si vous voulez mais j’ai franchement horreur de ça.
Or, il est de plus en plus fréquent aujourd’hui de voir cet alignement vertical disgracieux dans les listes numérotées. Cette erreur humaine est transposée au niveau de nombreux logiciels, puisque ce sont les hommes qui créent ces logiciels. Et cette erreur semble être piteusement devenue naturelle!
Il n’est plus rare de rencontrer des choses pareilles, par exemple, sur des pochettes de music.
La pochette-arrière d’un disque de Snoop Dogg illustre la chose.
Et comme ça commence toujours à partir du dixième élément, le titre 10 de l’album est très à-propos. «Real Shit», hum? À qui le dis-tu Snoop Dogg; à qui le dis-tu?
Sur une autre pochette d’un album de TQ, c’est pareil.
Mais bizarrement au numéro 10, l’artiste nous demande d’être «Relax», et on se demande comment être relax quand on n’apprécie pas cet effet disgracieux.
Par contre sur la pochette ci-dessus, la disposition est faite comme ça se doit et comme on aime. Alors, «Is It Still Good to You»? Et comment! Sincèrement, tant que ce sera bien disposé comme ça, oui, ce sera toujours good pour nous. Et par suite, on est bien d’accord pour le faire durer tout le temps («Make It Last Forever» en titre 11). lol, lol de lol. Hia, hia, hiaaah!
Maintenant, voyons quelques illustrations de quelques applications d’affectation automatique de numéro:
Mauvais alignement de chiffres/nombres dans Google Analytics.
Mauvais alignement de chiffres/nombres dans Word.
Mauvais alignement de chiffres/nombres dans Windows Explorer.
Mais, la raison pour laquelle les titres sont bien alignés, c’est parce qu’ils sont dans une colonne séparée.
Mauvais alignement de chiffres/nombres dans Winamp.
Vous voyez comme les titres 10 et 11 sont décalés sur la droite par rapport aux autres? Pas beautiful, n’est-ce pas? Aussi, je me demande comment quelqu’un qui ne sait pas disposer les unités sous les unités, les dizaines sous les dizaines pourrait bien aider un enfant (le sien ou celui d’un autre) à faire ses devoirs d’arithmétique à la maison. Ça craint!
Mais pour Winamp, on peut passer par l’édition des préférences de la playlist pour modifier ce vilain décalage, en cochant la case pour préfixer les numéros du chiffre zéro (0).
Par contre dans Notepad++, l’affectation de numéros respecte l’alignement des unités sous les unités, les dizaines sous les dizaines, comme il se doit; et on aime bien. Bravo Notepad++!
Alignement normal de chiffres/nombres dans Notepad++.
Bon, le précédent article publié il y a dix ans se limitait essentiellement à ça. Mais étant donné que le sujet se rapporte substantiellement à l’énumération de listes, j’ai décidé d’ajouter dans ce nouvel article quelques procédés pratiques de réalisation, en html+css, de listes ordonnées numérotées.
C’est une simple utilisation de la balise <ol></ol>, en l’état, dont voici le résultat dans Mozilla Firefox.
L’élément html ol en action.
L’usage de CSS (Cascading Style Sheet) dans cet exemple est relatif au contenu de la liste seulement. Cette utilisation basique de la balise <ol></ol> est d’une simplicité enfantine. Mais dès que vous voulez l’utiliser autrement, vous tombez dans des difficultés éprouvantes. Par exemple, comment accoler un zéro (0) de nul effet avant le chiffre/nombre en utilisant l’élément ol? Ceci est un réel besoin; mais l’élément ‘Ordered List’ ol, en soi, ne peut pas satisfaire ce besoin (sic). What a pity! comme disait un de mes professeurs d’anglais. Alors en cherchant un peu, et même plus qu’un peu, pour être véridique, j’ai abouti à quelques techniques avec des remarques intéressantes que je vais partager avec vous.
Le code est le suivant pour Firefox:
Notez bien qu’il peut s’avérer nécessaire de changer les valeurs données à padding-top.
Pour Chrome, il faut faire:
Donc, ici, pas de recours à padding dans les blocs de zéro.
Ça donne ceci:
Conteneurs span et liste ol dans Firefox (à gauche) et dans Chrome (à droite).
Voyons sans attendre la seconde technique avec span et ol.
Voici le code html+css:
Et voici le résultat dans Firefox:
Bande span et liste ol dans Firefox.
Pour le navigateur Chrome, le problème est résolu essentiellement avec le réglage de la marge de haut à 0 pixel (margin-top: 0px) sur la liste ol.
Le code est:
Continuons...
Le code pour Chrome est:
Pour Firefox, il faut plutôt faire:
Le réglage de l’interligne à 116.5% est ici ce qui résout le problème dans Firefox.
Et voici ce que ça donne:
Table de listes ul et ol dans Firefox (à gauche) et dans Chrome (à droite).
Cette expérience, ma foi décevante, de l’utilisation de l’élément ul en combinaison avec son frère ol nous donne l’impression d’un défaut de conformité dans la conception des deux éléments html ‘Unordered List’ ul et ‘Ordered List’ ol. En outre pour moi, le principe d’uniformité voudrait que pour avoir un intervalle de cinq (05) pixels entre deux lignes, il faut mettre un espacement de deux pixels et demi (2.5) sous la ligne de dessus et un autre de deux pixels et demi au-dessus de la ligne suivante ou ligne de dessous.
Je ne sais pas si c’est la même équipe qui a bossé sur les deux éléments ul et ol ou s’il s’agit de deux équipes différentes mais il me paraît logique que ces deux éléments mis face à face présentent sans condition le même alignement vertical, chaque ligne en regard de la ligne de même niveau. Ça m’intéresserait bien de pouvoir mettre la main sur les documents techniques des éléments ul et ol, pour comprendre comment ils ont été élaborés.
Le code qui marche dans Firefox est le suivant:
Avec pour résultat dans Firefox:
Table de zéros et table de liste ol.
Vous avez remarqué qu’ici on procède à un réglage au niveau des deux tables. La valeur de l’interligne de la table de zéros est 116% et la marge de haut de la liste ol est 3 pixels.
Pour Chrome, il suffit de mettre la marge de haut de la liste ol à 0 pixel, la table de zéros pouvant rester intacte.
Le code html+css est:
Le résultat est le suivant:
Table de zéros et table de liste ol.
Bon, au total je pense que ce n’est pas mal. On dirait même que c’est assez satisfaisant. Je dois vous avouer qu’en général je n’aime pas beaucoup utiliser les tables pour autre chose que la présentation de données tabulaires, mais l’élément html table utilisé dans ce contexte est d’une aide si appréciable pour qu’on s’en prive.
On n’est évidemment pas obligé de rendre les tableaux visibles; je le fais seulement à titre indicatif.
Par ailleurs, les personnes parmi vous qui ont l’habitude d’utiliser les listes ordonnées numérotées savent que ce n’est pas seulement les zéros (sur une, deux, trois, n positions) qu’on a envie de préfixer aux numéros de listes ordonnées. Parfois on a besoin d’accoler ou de préfixer autre chose, comme un dièse (#1, #2, #3, etc.); des fois on a besoin d’écrire le texte "N°" ou autre devant le numéro pour faire la liste (N°1, N°2, N°3, etc.). Mais la balise <ol></ol> n’offrant pas cette possibilité, on peut recourir à l’une des techniques abordées ci-dessus pour y parvenir.
Exemple de deux zéros préfixés (ici dans Firefox).
D’un autre côté, l’handicap de l’élément html ol, c’est le point ‘.’ figé, intimement lié aux numéros de la liste. Ça fait partie de la construction de la balise et on n’a aucun moyen de s’en défaire. Or, on a parfois envie de mettre un tiret après le numéro ou de mettre une parenthèse fermante ou un slash ou autre chose à la place du point qui nous est imposé.
Exemples de listes numérotées avec tiret, slash ou parenthèse fermante comme délimiteur.
Les techniques vues dans cet article ne sont malheureusement d’aucun secours dans ces cas. Vous vous doutez donc que je ne me suis pas uniquement servi de la balise <ol></ol> pour faire ça. Il faut soi-même pourvoir le numéro avec le symbole délimiteur combiné à une liste à laquelle on affectera la propriété ‘list-style-type: none;’. C’est un procédé semblable qui a été utilisé par exemple dans l’article sur les points faibles de Moov.
Pour être le plus près de la réalité, je me suis servi, comme guide, de l’affichage normal des numéros dans le medium, notamment le document web (voir exemple sur conteneurs span et liste ordonnée ol). Mais il se pourrait que le résultat obtenu ne soit pas très au point pour vous. Vous savez, nous n’avons pas la même vue, sans parler de l’illusion d’optique. Par conséquent, regardez bien et si vous pensez que le rendu n’est pas bon, -considérez-vous libre- de modifier les valeurs comme cela vous convient.
Ces différentes remarques montrent que les balises <ol></ol> et <ul></ul> ont besoin d’une petite retouche pour introduire plus de flexibilité et d’harmonie dans le jeu html.
Bon, il est sûr et certain que le contenu de cet article m’a pris un certain temps. Pourtant, pour étonnant que cela puisse paraître, personnellement je ne trouve pas les techniques proposées très professionnelles. C’est du bricolage, mais je n’en suis pas plus gêné étant donné que je passe moi-même pour un apprenti-bricoleur; hia hia hiaaah. Ce qui serait par contre professionnel, ce serait d’avoir une nouvelle version de balise <ol></ol qui soit assez customizable. Si l’organisme du web, le W3, et sa branche pour la formation, le W3 Schools, m’entendent! En attendant, je vous exhorte à essayer ces techniques, à vous en inspirer pour en créer d’autres et à écrire votre propre article pour nous en faire part.
Comme je l’ai déjà dit, il y a dix ans que j’ai pour la première fois parlé de ce sujet mais ça m’agace de continuer de voir le même mauvais alignement fait dans les listes. Comme j’y ai aussi déjà fait allusion, je ne suis membre d’aucun groupe de décision affilié ou agréé auprès d’une organisation, d’une firme ou d’une multinationale et je n’appartiens pas non plus à un cercle de pouvoirs d’aucune sorte. Le seul pouvoir que j’exerce se limite au partage de quelques réflexions et à la publication de quelques opinions. Ceux qui ont la possibilité de porter le message plus loin et plus haut sont appelés à le faire en toute amitié et en toute amabilité.
Je vous remercie pour votre précieuse attention à la lecture de cet article. Toute l’équipe de United Kingdom of LOVE (c.-à-d. l’auteur de cet article) vous souhaite l’Amour et le meilleur chez vous.
À plus tard.
© Copyright United Kingdom of Love - Tous droits réservés.
Dix ans après, ce n’est guère différent. Il semble que les avis et les messages de personnes comme moi ont peu de chance de recevoir un écho favorable. En dépit de cela, aujourd’hui dans une nouvelle tentative, j’écris un nouvel article avec un nouvel espoir d’attirer l’attention des gens sur cette déplorable manière de faire. C’est que je m’inquiète!
Mais de quoi parle-t-il au juste vous questionnez-vous peut-être? Eh bien, «il» parle du principe élémentaire de l’alignement vertical des unités sous les unités, les dizaines sous les dizaines, les milliers sous les milliers, etc.
1ère Partie: Disposition calamiteuse des nombres, dizaines sous unités
Concrètement, considérons par exemple la liste subjective suivante des voix mélodieuses les plus remarquables. (Il est évident que cette appréciation n’engage que moi.)1 - Whitney Houston
2 - Luther Vandross
3 - Stevie Wonder
4 - Aretha Franklin
5 - Lionel Richie
6 - Marvin Gaye
7 - Seal
8 - Tracy Chapman
9 - Barry White
10 - Gil Scott-Heron
11 - Musiq Soulchild
12 - Eryka Badu
Remarquez l'affreux décalage qui se produit à partir de la ligne N°10. Tout le monde peut voir que dans ce mauvais alignement les unités sont au-dessus des dizaines. Vous pouvez me taxer de puriste si vous voulez mais j’ai franchement horreur de ça.
Or, il est de plus en plus fréquent aujourd’hui de voir cet alignement vertical disgracieux dans les listes numérotées. Cette erreur humaine est transposée au niveau de nombreux logiciels, puisque ce sont les hommes qui créent ces logiciels. Et cette erreur semble être piteusement devenue naturelle!
Il n’est plus rare de rencontrer des choses pareilles, par exemple, sur des pochettes de music.
La pochette-arrière d’un disque de Snoop Dogg illustre la chose.
Et comme ça commence toujours à partir du dixième élément, le titre 10 de l’album est très à-propos. «Real Shit», hum? À qui le dis-tu Snoop Dogg; à qui le dis-tu?
Sur une autre pochette d’un album de TQ, c’est pareil.
Mais bizarrement au numéro 10, l’artiste nous demande d’être «Relax», et on se demande comment être relax quand on n’apprécie pas cet effet disgracieux.
Par contre sur la pochette ci-dessus, la disposition est faite comme ça se doit et comme on aime. Alors, «Is It Still Good to You»? Et comment! Sincèrement, tant que ce sera bien disposé comme ça, oui, ce sera toujours good pour nous. Et par suite, on est bien d’accord pour le faire durer tout le temps («Make It Last Forever» en titre 11). lol, lol de lol. Hia, hia, hiaaah!
Maintenant, voyons quelques illustrations de quelques applications d’affectation automatique de numéro:
Mauvais alignement de chiffres/nombres dans Google Analytics.
Mauvais alignement de chiffres/nombres dans Word.
Mauvais alignement de chiffres/nombres dans Windows Explorer.
Mais, la raison pour laquelle les titres sont bien alignés, c’est parce qu’ils sont dans une colonne séparée.
Mauvais alignement de chiffres/nombres dans Winamp.
Vous voyez comme les titres 10 et 11 sont décalés sur la droite par rapport aux autres? Pas beautiful, n’est-ce pas? Aussi, je me demande comment quelqu’un qui ne sait pas disposer les unités sous les unités, les dizaines sous les dizaines pourrait bien aider un enfant (le sien ou celui d’un autre) à faire ses devoirs d’arithmétique à la maison. Ça craint!
Mais pour Winamp, on peut passer par l’édition des préférences de la playlist pour modifier ce vilain décalage, en cochant la case pour préfixer les numéros du chiffre zéro (0).
Par contre dans Notepad++, l’affectation de numéros respecte l’alignement des unités sous les unités, les dizaines sous les dizaines, comme il se doit; et on aime bien. Bravo Notepad++!
Alignement normal de chiffres/nombres dans Notepad++.
Bon, le précédent article publié il y a dix ans se limitait essentiellement à ça. Mais étant donné que le sujet se rapporte substantiellement à l’énumération de listes, j’ai décidé d’ajouter dans ce nouvel article quelques procédés pratiques de réalisation, en html+css, de listes ordonnées numérotées.
2ème Partie: Quelques techniques de listes ordonnées numérotées
Les techniques décrites cherchent essentiellement à satisfaire le besoin de préfixer les numéros de listes de zéro (0). Ces techniques approximatives et expérimentales ne sont évidemment pas, à l’état actuel, définitives et infaillibles. Une ligne au-dessus, une ligne au-dessous peut fausser le résultat, et il faudra réajuster. Ayez aussi à l’esprit que le code n’a pas été testé dans beaucoup de navigateurs. La machine que j’utilise n’a pas une connexion à internet; et les seuls browsers qui ont servi pour les tests sont Mozilla Firefox et Chrome.Liste ordonnée numérotée basique avec ol
Le HTML (HyperText Markup Language) met à notre disposition pour la réalisation de listes ordonnées numérotées l’élément ol de balise <ol></ol> portant le nom ‘Ordered List’ (traduction: liste ordonnée). On aime bien l’élément html ol car il nous fait une liste ordonnée, unité sous unité, dizaine sous dizaine. Voici comment la balise s’utilise:C’est une simple utilisation de la balise <ol></ol>, en l’état, dont voici le résultat dans Mozilla Firefox.
L’élément html ol en action.
L’usage de CSS (Cascading Style Sheet) dans cet exemple est relatif au contenu de la liste seulement. Cette utilisation basique de la balise <ol></ol> est d’une simplicité enfantine. Mais dès que vous voulez l’utiliser autrement, vous tombez dans des difficultés éprouvantes. Par exemple, comment accoler un zéro (0) de nul effet avant le chiffre/nombre en utilisant l’élément ol? Ceci est un réel besoin; mais l’élément ‘Ordered List’ ol, en soi, ne peut pas satisfaire ce besoin (sic). What a pity! comme disait un de mes professeurs d’anglais. Alors en cherchant un peu, et même plus qu’un peu, pour être véridique, j’ai abouti à quelques techniques avec des remarques intéressantes que je vais partager avec vous.
Conteneurs span et liste ordonnée ol
La technique consiste à utiliser l’élément html span de balise <span></span> pour créer des blocs de zéros et juxtaposer la liste numérotée par une fumeuse astuce de positionnement. Mais l’alignement entre les zéros et la liste ol est inégal par défaut dans Mozilla Firefox que je considère être le browser de référence pour la navigation sur les appareils desktop et laptop. Pour y remédier, on va donner une valeur à la propriété padding-top dans le style css, ensuite on jette un coup d’œil pour voir ce que ça donne comme résultat et on corrige si l’effet obtenu n’est pas bon. On répète l’opération ainsi de suite et autant que nécessaire jusqu’à un résultat satisfaisant. Ça signifie qu’on cherche à tâtons en fait. Ne dites rien, je sais: c’est chiant de travailler de cette façon. L’alignement semble toutefois bien fonctionner dans Chrome sans nécessité de réglage additionnel mais je doute que ce soit une simple question d’implémentation réussie au niveau de Chrome et pas au niveau de Firefox. Indubitablement si l’élément html ol était conçu avec un peu plus de cohérence par rapport aux autres éléments html, ça nous éviterait tout ceci.Le code est le suivant pour Firefox:
Notez bien qu’il peut s’avérer nécessaire de changer les valeurs données à padding-top.
Pour Chrome, il faut faire:
Donc, ici, pas de recours à padding dans les blocs de zéro.
Ça donne ceci:
Conteneurs span et liste ol dans Firefox (à gauche) et dans Chrome (à droite).
Voyons sans attendre la seconde technique avec span et ol.
Bande span et liste ordonnée ol
Dans la seconde méthode basée sur span et ol, on se sert toujours de l’élément span pour disposer les zéros mais cette fois-ci on va jouer sur les valeurs de margin-top des ‘list elements’ de la ‘Ordered List’. Ici, c’est <br/> qui nous sert à aller à la ligne suivante. Le style float: left est appliqué sur l’élément span et les zéros sont laissés intacts. La différence aussi, c’est qu’on n’utilise qu’un seul span comme une simple bande linéaire plutôt qu’une succession de blocs; c’est pourquoi je m’y réfère comme étant une bande alors que dans l’exemple précédent j’en parle comme d’un conteneur.Voici le code html+css:
Et voici le résultat dans Firefox:
Bande span et liste ol dans Firefox.
Pour le navigateur Chrome, le problème est résolu essentiellement avec le réglage de la marge de haut à 0 pixel (margin-top: 0px) sur la liste ol.
Le code est:
Continuons...
Table de listes ul et ol
L’idée ici était d’exploiter le second élément html de liste, ul, appelé ‘Unordered List’ (liste non ordonnée, en français) en combinaison avec l’élément html ol. Dans cette optique, les deux ont été placés côte à côte dans deux colonnes d’une table. J’aurais parié que ul et ol ferait le couple parfait rendant cette méthode la plus compatible pour tous les browsers, façon norme appliquée. Mais j’ai eu tort de penser ça car le résultat dans Firefox est loin d’être celui souhaité; c’est plutôt une catastrophe. C’est avec Chrome que ça s’accorde bien.Le code pour Chrome est:
Pour Firefox, il faut plutôt faire:
Le réglage de l’interligne à 116.5% est ici ce qui résout le problème dans Firefox.
Et voici ce que ça donne:
Table de listes ul et ol dans Firefox (à gauche) et dans Chrome (à droite).
Cette expérience, ma foi décevante, de l’utilisation de l’élément ul en combinaison avec son frère ol nous donne l’impression d’un défaut de conformité dans la conception des deux éléments html ‘Unordered List’ ul et ‘Ordered List’ ol. En outre pour moi, le principe d’uniformité voudrait que pour avoir un intervalle de cinq (05) pixels entre deux lignes, il faut mettre un espacement de deux pixels et demi (2.5) sous la ligne de dessus et un autre de deux pixels et demi au-dessus de la ligne suivante ou ligne de dessous.
Je ne sais pas si c’est la même équipe qui a bossé sur les deux éléments ul et ol ou s’il s’agit de deux équipes différentes mais il me paraît logique que ces deux éléments mis face à face présentent sans condition le même alignement vertical, chaque ligne en regard de la ligne de même niveau. Ça m’intéresserait bien de pouvoir mettre la main sur les documents techniques des éléments ul et ol, pour comprendre comment ils ont été élaborés.
Table de zéros et table de liste ol
Conséquemment à l’expérience précédente qui montrent que les balises <ul></ul> et <ol></ol> s’accordent mal pour tous les navigateurs, l’idée-astuce qui m’est venue à l’esprit est de me débarrasser de l’élément ul et de placer la liste ol dans une table séparée. On a donc une table contenant des zéros et une seconde table contenant une liste ol.Le code qui marche dans Firefox est le suivant:
Avec pour résultat dans Firefox:
Table de zéros et table de liste ol.
Vous avez remarqué qu’ici on procède à un réglage au niveau des deux tables. La valeur de l’interligne de la table de zéros est 116% et la marge de haut de la liste ol est 3 pixels.
Pour Chrome, il suffit de mettre la marge de haut de la liste ol à 0 pixel, la table de zéros pouvant rester intacte.
Le code html+css est:
Le résultat est le suivant:
Table de zéros et table de liste ol.
Bon, au total je pense que ce n’est pas mal. On dirait même que c’est assez satisfaisant. Je dois vous avouer qu’en général je n’aime pas beaucoup utiliser les tables pour autre chose que la présentation de données tabulaires, mais l’élément html table utilisé dans ce contexte est d’une aide si appréciable pour qu’on s’en prive.
On n’est évidemment pas obligé de rendre les tableaux visibles; je le fais seulement à titre indicatif.
Quelques observations
D’abord, je crois qu’il est bon d’utiliser les éléments ul et ol vu que cela peut permettre de faire savoir à un moteur de recherche que votre article contient effectivement une liste. De plus avec la balise <ol></ol>, lorsque vous rajoutez ou soustrayez une ligne, vous n’avez pas besoin de corriger les numéros, c’est automatiquement fait pour vous comme dans le logiciel Word avec l’avantage d’un bon alignement des numéros, unité sous unité, dizaine sous dizaine.Par ailleurs, les personnes parmi vous qui ont l’habitude d’utiliser les listes ordonnées numérotées savent que ce n’est pas seulement les zéros (sur une, deux, trois, n positions) qu’on a envie de préfixer aux numéros de listes ordonnées. Parfois on a besoin d’accoler ou de préfixer autre chose, comme un dièse (#1, #2, #3, etc.); des fois on a besoin d’écrire le texte "N°" ou autre devant le numéro pour faire la liste (N°1, N°2, N°3, etc.). Mais la balise <ol></ol> n’offrant pas cette possibilité, on peut recourir à l’une des techniques abordées ci-dessus pour y parvenir.
Exemple de deux zéros préfixés (ici dans Firefox).
D’un autre côté, l’handicap de l’élément html ol, c’est le point ‘.’ figé, intimement lié aux numéros de la liste. Ça fait partie de la construction de la balise et on n’a aucun moyen de s’en défaire. Or, on a parfois envie de mettre un tiret après le numéro ou de mettre une parenthèse fermante ou un slash ou autre chose à la place du point qui nous est imposé.
Exemples de listes numérotées avec tiret, slash ou parenthèse fermante comme délimiteur.
Les techniques vues dans cet article ne sont malheureusement d’aucun secours dans ces cas. Vous vous doutez donc que je ne me suis pas uniquement servi de la balise <ol></ol> pour faire ça. Il faut soi-même pourvoir le numéro avec le symbole délimiteur combiné à une liste à laquelle on affectera la propriété ‘list-style-type: none;’. C’est un procédé semblable qui a été utilisé par exemple dans l’article sur les points faibles de Moov.
Pour être le plus près de la réalité, je me suis servi, comme guide, de l’affichage normal des numéros dans le medium, notamment le document web (voir exemple sur conteneurs span et liste ordonnée ol). Mais il se pourrait que le résultat obtenu ne soit pas très au point pour vous. Vous savez, nous n’avons pas la même vue, sans parler de l’illusion d’optique. Par conséquent, regardez bien et si vous pensez que le rendu n’est pas bon, -considérez-vous libre- de modifier les valeurs comme cela vous convient.
Ces différentes remarques montrent que les balises <ol></ol> et <ul></ul> ont besoin d’une petite retouche pour introduire plus de flexibilité et d’harmonie dans le jeu html.
En conclusion
Si vous avez été assez attentif jusqu’ici, ce que je veux croire, vous devriez pouvoir répondre à des questions comme: pourquoi dans la technique de listes ul et ol dans une table, on a préféré utiliser deux listes ol avec la seconde commençant à 10 (propriété "start = 10")? Et vous auriez aussi remarqué une chose intéressante sur le dimensionnement des lignes produit par le HTML, qui m’inspire déjà l’écriture d’un autre article. Si ce n’est pas le cas, relisez avec un peu plus d’attention, ça pourrait être bénéfique pour vous.Bon, il est sûr et certain que le contenu de cet article m’a pris un certain temps. Pourtant, pour étonnant que cela puisse paraître, personnellement je ne trouve pas les techniques proposées très professionnelles. C’est du bricolage, mais je n’en suis pas plus gêné étant donné que je passe moi-même pour un apprenti-bricoleur; hia hia hiaaah. Ce qui serait par contre professionnel, ce serait d’avoir une nouvelle version de balise <ol></ol qui soit assez customizable. Si l’organisme du web, le W3, et sa branche pour la formation, le W3 Schools, m’entendent! En attendant, je vous exhorte à essayer ces techniques, à vous en inspirer pour en créer d’autres et à écrire votre propre article pour nous en faire part.
Comme je l’ai déjà dit, il y a dix ans que j’ai pour la première fois parlé de ce sujet mais ça m’agace de continuer de voir le même mauvais alignement fait dans les listes. Comme j’y ai aussi déjà fait allusion, je ne suis membre d’aucun groupe de décision affilié ou agréé auprès d’une organisation, d’une firme ou d’une multinationale et je n’appartiens pas non plus à un cercle de pouvoirs d’aucune sorte. Le seul pouvoir que j’exerce se limite au partage de quelques réflexions et à la publication de quelques opinions. Ceux qui ont la possibilité de porter le message plus loin et plus haut sont appelés à le faire en toute amitié et en toute amabilité.
Je vous remercie pour votre précieuse attention à la lecture de cet article. Toute l’équipe de United Kingdom of LOVE (c.-à-d. l’auteur de cet article) vous souhaite l’Amour et le meilleur chez vous.
À plus tard.
© Copyright United Kingdom of Love - Tous droits réservés.
