A formatação da lista está quebrada

Exemplo: * 1932.

Estes estão funcionando surpreendentemente: * 1917-32.

  • 1917-32.

Estou usando a versão mais recente 3.3.0.beta3-dev sem nenhum plugin.

2 curtidas
    1. testando
    1. teste de segunda linha

Marcação usada

* 1932. teste algo
* 1933. de novo agora então

Sim, consigo ver o problema, mas isso não parece ser uma marcação Markdown válida. Testei o acima com outro editor Markdown e vejo um problema semelhante:

Você pode evitar isso omitindo o ponto após o número. Por exemplo:

  • 1932 - testando
  • 1933 - teste de segunda linha

ou excluindo o * no início:

  1. testando
  2. teste de segunda linha
1932. testando
1933. teste de segunda linha
1 curtida

Mas isso só funciona para anos consecutivos

  1. primeiro
  2. segundo
  3. terceiro
2008. primeiro
2014. segundo
2015. terceiro

Talvez usar HTML em vez de Markdown também funcione como alternativa:

  • 1997. primeiro
  • 2000. segundo
  • 2015. terceiro
<ul>
  <li> 1997. primeiro</li>
  <li> 2000. segundo</li>
  <li> 2015. terceiro</li>
</ul>
1 curtida

Isso também é uma limitação do Markdown. Testei o Github e alguns outros editores de Markdown, todos eles usam listas sequenciais por padrão.

3 curtidas

Remover esta margem com CSS a normaliza.

li>ul, li>ol, .cooked li>ul, .cooked li>ol, .d-editor-preview li>ul, .d-editor-preview li>ol {
    margin: 0; /* Remover isto */
}
1 curtida
12983298. um
2. teste
  1. um
  2. teste

Sim, eu já vi isso antes, fazemos coisas sofisticadas em CSS que quebram isso visualmente para casos extremos.

Acho que o motivo para isso foi que pode ser abusado, talvez o @awesomerobot se lembre.

2 curtidas

hmmm, outro teste:

- 12983298\. um
- 2\. teste
  • 12983298. um
  • 2. teste
* 12983298\. um
* 2\. teste
  • 12983298. um
  • 2. teste

Evidentemente um número seguido por um ponto, mesmo que não seja o primeiro token na linha, será visto como uma lista numérica.

1 curtida

Isso ocorre porque, no markdown, quando um . é colocado após um número, assume-se que é uma lista ordenada.

Portanto, ao usar formatação como * 1932., você está gerando o HTML:

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

Tecnicamente válido, mas estranho e não intencional.

Isso ocorre porque, quando você introduz um -, não é mais um número sequencial, portanto, não é uma lista ordenada e o . é desconsiderado.

Para evitar isso, o ideal seria usar:

* 1932 (lista não ordenada se os números não forem sequenciais)

ou

1932. (lista ordenada se os números forem sequenciais)

Se o . for necessário, e não for uma lista ordenada, você pode escapar o . com um \ assim:

* 1932\ూ.

Esta é uma questão separada e acontece com o CSS padrão do navegador também:

O marcador do item em uma lista HTML é um pseudo-elemento que é colocado antes que o padding/margin sejam considerados, então ele sempre aparece fora da “caixa” do conteúdo. Mesmo ao remover a margem/padding de uma lista, os marcadores transbordarão.

Por exemplo, com a margem/padding removidos da lista e overflow: hidden no contêiner pai, você não vê os marcadores da lista:

Então, de qualquer forma, como o padding aplicado à esquerda da lista é um valor estático, e os marcadores da lista são colocados de forma que caem dentro do padding, em algum momento os números transbordarão.

Nosso CSS torna as listas um pouco mais compactas horizontalmente do que o padrão, e temos margem esquerda e padding… mas o resultado é essencialmente o mesmo:

Existe algum CSS… list-style-position: inside que pode substituir o posicionamento do marcador, isso coloca o marcador dentro da caixa de conteúdo. Mas isso significa que você não obteria mais um bom alinhamento dos números:

list-style-position: outside; (padrão):

image

list-style-position: inside; (marcador da lista ocupa espaço de conteúdo)

image

Então, para suportar adequadamente listas ordenadas de qualquer comprimento e evitar impactar o alinhamento do conteúdo, teríamos que fazer algo como… usar JS para detectar o número de dígitos no marcador (começar do primeiro número da lista, depois contar todos os itens da lista para determinar o comprimento) e aplicar padding suficiente para acomodar o maior número.

4 curtidas

Obrigado pelo relatório. Fornecemos uma solução alternativa que acreditamos que ajudará. No momento, não conseguimos corrigir todos os casos extremos e encerraremos este relatório por enquanto.

2 curtidas