# A formatação da lista está quebrada

**URL:** <https://meta.discourse.org/t/list-formatting-is-broken/309995>\
**Category:** Bug\
**Created:** [Maio 30, 2024, 4:15pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995 "2024-05-30T16:15:47Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [Junho 4, 2024, 3:01pm UTC](https://meta.discourse.org/t/list-formatting-is-broken/309995/8 "2024-06-04T15:01:24Z")

</div>

> [@Arnold](#):
>
> Exemplo: `* 1932.`

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:

```xml
<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.

> [@Arnold](#):
>
> Esses estão surpreendentemente funcionando: `* 1917-32.`

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\ూ.`

> [@sam](#):
>
> 1. um
> 2. teste
> 
> Sim, eu já vi isso antes, fazemos coisas sofisticadas em CSS que quebram isso visualmente para casos extremos.

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/2/f/82f777f0cbedf6ac20c7bc81bdc70d410a3824d9.png)

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:

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/5/c/35c8604d29637da7a9d2eeb422e6586b85f17da5.png)

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:

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/1/e/91ee5bebf5b305bc4fa66cb05593e4b66eae6da8.png)

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](https://global.discourse-cdn.com/meta/original/4X/5/1/b/51b228993a5cd8430d61a23496cabb3d73f60afe.png)

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

![image](https://global.discourse-cdn.com/meta/original/4X/f/c/3/fc376ad0807bb33672bbd75317aeaa3655739ac2.png)

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.

---

_[View the full topic](https://meta.discourse.org/t/list-formatting-is-broken/309995)._