Le formatage de la liste est cassé

Bug
1

image
image118×702 6.36 KB

Exemple : * 1932.

Ceux-ci fonctionnent étonnamment : * 1917-32.

  • 1917-32.

J’utilise la dernière version 3.3.0.beta3-dev sans aucun plugin.

2 « J'aime »
2
    1. test\n* 1933. deuxième ligne de test\n\nBalises utilisées\nmd\n* 1932. test qqch\n* 1933. encore maintenant \n\n\nOui, je vois le problème, mais cela ne semble pas être un balisage Markdown valide. J’ai testé ce qui précède avec un autre éditeur Markdown et je vois un problème similaire :\n\n
      image
      image2214×794 40.4 KB
      \n\nVous pouvez éviter cela en omettant le point après le nombre. Par exemple :\n\n* 1932 - test\n* 1933 - deuxième ligne de test\n\nou en excluant le * au début :\n\n1932. test\n1933. deuxième ligne de test\n\nmd\n1932. test\n1933. deuxième ligne de test\n
1 « J'aime »
3

Mais cela ne fonctionne que pour les années consécutives

  1. first
  2. second
  3. third
2008. first
2014. second
2015. third

Peut-être qu’utiliser HTML au lieu de Markdown fonctionne également comme alternative :

  • 1997. first
  • 2000. second
  • 2015. third
<ul>
  <li> 1997. first</li>
  <li> 2000. second</li>
  <li> 2015. third</li>
</ul>
1 « J'aime »
4

C’est aussi une limitation de Markdown. J’ai testé Github et quelques autres éditeurs Markdown, ils utilisent tous par défaut des listes séquentielles.

3 « J'aime »
5

Supprimer cette marge avec css la normalise.

image
image258×100 955 Bytes

li>ul, li>ol, .cooked li>ul, .cooked li>ol, .d-editor-preview li>ul, .d-editor-preview li>ol {
    margin: 0; /* Supprimer ceci */
}
1 « J'aime »
6 
12983298. un
2. test
  1. un
  2. test

Oui, j’ai déjà vu ça, nous faisons des choses fantaisistes en CSS qui cassent cela visuellement pour les cas extrêmes.

Je pense que la raison était que cela pouvait être utilisé à mauvais escient, peut-être que @awesomerobot s’en souvient.

2 « J'aime »
7

hmmm, un autre test :

- 12983298\. un
- 2\. test
  • 12983298. un
  • 2. test
* 12983298\. un
* 2\. test
  • 12983298. un
  • 2. test

Évidemment, un nombre suivi d’un point, même s’il n’est pas le premier jeton de la ligne, sera considéré comme une liste numérotée.

1 « J'aime »
8

C’est parce qu’en markdown, lorsqu’un . est placé après un nombre, il est supposé qu’il s’agit d’une liste ordonnée.

Donc, en utilisant un formatage comme * 1932., vous générez le HTML :

<ul>
  <li>
    <ol start="1932">
      <li><!-- item content --></li>
    </ol>
  </li>
  <li>
    <ol start="1933">
      <li><!-- item content --></li>
    </ol>
  </li>
</ul>

Techniquement valide, mais étrange et involontaire.

C’est parce que lorsque vous introduisez un -, ce n’est plus un nombre séquentiel, donc ce n’est pas une liste ordonnée et le . est ignoré.

Pour éviter cela, idéalement, vous utiliseriez soit :

* 1932 (liste non ordonnée si les nombres ne sont pas séquentiels)

ou

1932. (liste ordonnée si les nombres sont séquentiels)

Si le . est nécessaire, et qu’il ne s’agit pas d’une liste ordonnée, vous pouvez échapper le . avec un \ comme ceci :

* 1932\.`

C’est un problème distinct, et il se produit également avec le CSS par défaut du navigateur :

image
image113×116 2.91 KB

Le marqueur d’élément dans une liste HTML est un pseudo-élément qui est placé avant que le padding/marge ne soit pris en compte, il apparaît donc toujours à l’extérieur de la “boîte” du contenu. Même en supprimant la marge/le padding d’une liste, les marqueurs déborderont.

Par exemple, avec la marge/le padding supprimés de la liste et overflow: hidden sur le conteneur parent, vous ne voyez pas du tout les marqueurs de liste :

image
image226×122 3.85 KB

Donc, bref, puisque le padding appliqué à gauche de la liste est une valeur statique, et que les marqueurs de liste sont placés de manière à tomber dans le padding, à un moment donné, les nombres déborderont.

Notre CSS rend les listes un peu plus compactes horizontalement que par défaut, et nous avons à la fois une marge gauche et un padding… mais le résultat est essentiellement le même :

image
image208×115 3.36 KB

Il y a du CSS… list-style-position: inside qui peut remplacer le positionnement du marqueur, cela place le marqueur à l’intérieur de la boîte de contenu. Mais cela signifie que vous n’obtiendriez plus un bel alignement des nombres :

list-style-position: outside; (par défaut) :

image

list-style-position: inside; (le marqueur de liste occupe l’espace de contenu)

image

Donc, pour prendre en charge correctement les listes ordonnées de toutes longueurs et éviter d’impacter l’alignement du contenu, nous devrions faire quelque chose comme… utiliser du JS pour détecter le nombre de chiffres dans le marqueur (commencer par le premier nombre de la liste, puis compter tous les éléments de la liste pour déterminer la longueur) et appliquer suffisamment de padding pour accueillir le plus grand nombre.

4 « J'aime »
12

Merci pour le rapport. Nous avons fourni une solution de contournement qui, selon nous, devrait aider. Pour le moment, nous ne sommes pas en mesure de corriger tous les cas particuliers et nous allons clôturer ce rapport.

2 « J'aime »