El formato de la lista está roto

Ejemplo: * 1932.

Estos funcionan sorprendentemente: * 1917-32.

  • 1917-32.

Estoy usando la versión más reciente 3.3.0.beta3-dev sin ningún plugin.

2 Me gusta
    1. prueba
    1. prueba de segunda línea

Marcado utilizado

* 1932. prueba algo
* 1933. otra vez ahora entonces

Sí, puedo ver el problema, pero esto no parece ser un marcado Markdown válido. Probé lo anterior con otro editor de Markdown y veo un problema similar:

Puedes evitar esto omitiendo el punto después del número. Por ejemplo:

  • 1932 - prueba
  • 1933 - prueba de segunda línea

o excluyendo el * al principio:

  1. prueba
  2. prueba de segunda línea
1932. prueba
1933. prueba de segunda línea
1 me gusta

Pero eso solo funciona para años consecutivos

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

Quizás usar HTML en lugar de Markdown también funcione como alternativa:

  • 1997. first
  • 2000. second
  • 2015. third
<ul>
  <li> 1997. first</li>
  <li> 2000. second</li>
  <li> 2015. third</li>
</ul>
1 me gusta

Eso también es una limitación de Markdown. Probé Github y algunos otros editores de Markdown, todos ellos usan listas secuenciales por defecto.

3 Me gusta

Eliminar este margen con CSS lo normaliza.

li>ul, li>ol, .cooked li>ul, .cooked li>ol, .d-editor-preview li>ul, .d-editor-preview li>ol {
    margin: 0; /* Eliminar esto */
}
1 me gusta
12983298. uno
2. prueba
  1. uno
  2. prueba

Sí, he visto esto antes, hacemos cosas elegantes en CSS que visualmente lo rompen para casos atípicos.

Creo que la razón de esto fue que se puede abusar, quizás @awesomerobot lo recuerde.

2 Me gusta

hmmm, otra prueba:

- 12983298\. uno
- 2\. prueba
  • 12983298. uno
  • 2. prueba
* 12983298\. uno
* 2\. prueba
  • 12983298. uno
  • 2. prueba

Evidentemente, un número seguido de un punto, incluso si no es el primer token de la línea, será visto como una lista numérica.

1 me gusta

Esto se debe a que en markdown, cuando se coloca un . después de un número, se asume que es una lista ordenada.

Así que al usar un formato como * 1932. estás generando el HTML:

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

Técnicamente válido, pero extraño y no intencionado.

Esto se debe a que cuando introduces un -, ya no es un número secuencial, por lo que no es una lista ordenada y el . se ignora.

Para evitar esto, idealmente usarías:

* 1932 (lista desordenada si los números no son secuenciales)

o

1932. (lista ordenada si los números son secuenciales)

Si el . es necesario, y no es una lista ordenada, puedes escapar el . con un \ así:

* 1932\ూ.

Este es un problema separado, y sucede también con el CSS predeterminado del navegador:

El marcador del elemento en una lista HTML es un pseudo elemento que se coloca antes de que se consideren el padding/margin, por lo que siempre aparece fuera de la “caja” del contenido. Incluso al eliminar el margin/padding de una lista, los marcadores se desbordarán.

Por ejemplo, con el margin/padding eliminado de la lista y overflow: hidden en el contenedor padre, no ves los marcadores de la lista en absoluto:

Así que, dado que el padding aplicado a la izquierda de la lista es un valor estático, y los marcadores de la lista se colocan de manera que caen dentro del padding, en algún momento los números se desbordarán.

Nuestro CSS hace que las listas sean un poco más compactas horizontalmente que las predeterminadas, y tenemos tanto margen izquierdo como padding… pero el resultado es esencialmente el mismo:

Hay algo de CSS… list-style-position: inside que puede anular el posicionamiento del marcador, esto coloca el marcador dentro de la caja de contenido. Pero esto significa que ya no obtendrías una buena alineación de los números:

list-style-position: outside; (predeterminado):

image

list-style-position: inside; (el marcador de la lista ocupa espacio de contenido)

image

Así que, para soportar adecuadamente listas ordenadas de cualquier longitud y evitar afectar la alineación del contenido, tendríamos que hacer algo como… usar JS para detectar el número de dígitos en el marcador (empezar desde el primer número de la lista, luego contar todos los elementos de la lista para determinar la longitud) y aplicar suficiente padding para acomodar el número más grande.

4 Me gusta

Gracias por el informe. Hemos proporcionado una solución que creemos que debería ayudar. En este momento, no podemos solucionar todos los casos extremos y cerraremos este informe por ahora.

2 Me gusta