Trocou o plugin de linha do tempo e continua ilegível: comece por uma lista

A página "Nossa história" da Padaria Trigo Fino usava um plugin de linha do tempo horizontal. Na demo, cartões com duas palavras deslizavam bonitos. Com o conteúdo real, sete marcos de 40 a 90 palavras, o texto aparecia cortado em reticências, os pontos na linha ficavam miúdos e no celular era preciso arrastar seis telas para chegar a 2024. A equipe trocou por outro plugin, com outro efeito. O texto continuou cortado. A resposta curta: o problema não era o visual do plugin, era o formato do conteúdo. Uma lista ordenada com a data em destaque já é uma linha do tempo, funciona em qualquer tela e não depende de JavaScript.

Este guia mostra como montar essa lista com HTML e CSS, como testar com o conteúdo de verdade e em que situação um plugin ainda faz sentido. Se a sua dúvida é especificamente sobre o formato horizontal, o guia de linha do tempo horizontal trata desse caso; aqui o foco é a armadilha de trocar de biblioteca esperando outro resultado.

Por que o segundo plugin repete o problema do primeiro

Plugins de timeline são desenhados para a demo: textos curtos, imagens no mesmo tamanho, poucos itens. Quando o conteúdo é diferente disso, todos falham do mesmo jeito, porque compartilham as mesmas escolhas:

• Largura fixa por item. Um cartão de 280 pixels comporta umas 30 palavras sem rolagem interna. O resto vira reticências ou "leia mais".
• Navegação por arraste ou setas. Sete cartões de 280 pixels somam 1.960 pixels. Numa tela de 360 pixels, são mais de cinco telas de arraste. Quem não arrasta não vê o final da história.
• Ordem construída por posição visual. Itens alternados acima e abaixo da linha, ou à esquerda e à direita, fazem o olho pular. Leitor de tela lê a ordem do HTML, que nem sempre é a da data.
• JavaScript como requisito. Se o script atrasa ou falha, a página mostra uma faixa vazia. O conteúdo, que é texto, depende de código para aparecer.

Trocar de plugin troca a animação, não essas decisões. E colocar dois na mesma página para "ver qual fica melhor" soma o peso dos dois, as regras de CSS globais de ambos e, às vezes, duas versões da mesma dependência brigando.

Como montar a linha do tempo como lista

1. Escreva o conteúdo antes do layout. Liste os marcos com data, título e texto. Conte as palavras do maior. É ele que define o componente, não o menor.
2. Decida a ordem. Cronológica, do mais antigo ao mais recente, é o padrão de uma história. Se o mais importante é o mais recente (um changelog, por exemplo), inverta e diga isso no título da seção.
3. Marque com <ol> e <time>. A lista ordenada diz que a ordem importa; o time com datetime dá a data em formato que máquina entende.
4. Desenhe a linha e os pontos com CSS. Uma borda à esquerda e um pseudo-elemento por item resolvem.
5. Em tela larga, coloque a data numa coluna própria. Em tela estreita, empilhe. Nada de arraste.
6. Teste com o texto real, em 360 pixels de largura e com zoom de 200%.

O HTML da Trigo Fino

<section aria-labelledby="titulo-historia">
  <h2 id="titulo-historia">Nossa história</h2>
  <ol class="linha-do-tempo">
    <li>
      <time datetime="2009-03">Março de 2009</time>
      <h3>A primeira fornada</h3>
      <p>Abrimos com um forno a lenha e três funcionários, vendendo só pão francês e broa de milho.</p>
    </li>
    <li>
      <time datetime="2015-08">Agosto de 2015</time>
      <h3>Fermentação natural</h3>
      <p>Passamos a produzir pães de longa fermentação, com o levain mantido desde então.</p>
    </li>
    <li>
      <time datetime="2024-11">Novembro de 2024</time>
      <h3>Segunda loja</h3>
      <p>Inauguramos a unidade do centro, com cozinha aberta para o salão.</p>
    </li>
  </ol>
</section>

O CSS que desenha a linha

.linha-do-tempo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid #c8c8c8;
}

.linha-do-tempo li {
  position: relative;
  margin-bottom: 2rem;
}

.linha-do-tempo li::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 7px);
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a5fb4;
}

.linha-do-tempo time {
  display: block;
  font-weight: 700;
}

.linha-do-tempo h3 {
  margin: 0.25rem 0;
}

@media (min-width: 48rem) {
  .linha-do-tempo li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    column-gap: 1.5rem;
  }

  .linha-do-tempo li > * {
    grid-column: 2;
  }

  .linha-do-tempo time {
    grid-column: 1;
    grid-row: 1;
  }
}

O ponto fica centralizado sobre a borda porque o deslocamento é o recuo da lista mais metade do ponto e metade da borda: 1,5rem mais 6 pixels mais 1 pixel. É o tipo de conta que vale escrever no CSS em vez de ajustar no olho até "parecer certo", como no guia de centralizar sem número mágico.

No celular, cada marco ocupa a largura toda: data, título, texto, e a rolagem é a da própria página, que todo mundo sabe usar. Em tela a partir de 48rem, a data vai para uma coluna à esquerda e o texto fica alinhado à direita dela. Sem JavaScript, sem arraste, sem reticências.

Quando um plugin ainda faz sentido

Há casos legítimos: centenas de eventos com filtro por categoria, zoom entre décadas e anos, eventos com duração (barras) em vez de pontos. Aí você precisa de um componente de verdade. Mesmo nesses casos, faça a versão em lista primeiro e use o plugin como melhoria por cima: se o script não carrega, a lista continua lá. E escolha um, depois de testar com o seu conteúdo real, não com a demo. O guia sobre peças de interface que o CSS já faz ajuda a separar o que precisa de script do que não precisa.

Erros comuns

• Escolher o plugin pela demo. A demo tem o conteúdo ideal para ela; o seu tem outro tamanho, e o cartão corta.
• Esconder o fato principal atrás de arraste ou clique. Muita gente não arrasta, e o marco mais recente, que costuma ser o mais importante, fica invisível.
• Usar <div> soltas em vez de <ol>. O leitor de tela não anuncia que é uma sequência nem quantos itens há.
• Alternar itens dos dois lados da linha no celular. Cada coluna fica com metade da largura e o texto vira uma tripa de três palavras por linha.
• Carregar dois plugins na mesma página. Peso dobrado, CSS conflitante e uma dependência sobrescrevendo a outra. O guia de combinar scripts mostra o estrago.
• Escrever a data só como texto solto. Sem datetime, ordenar, filtrar ou gerar dados estruturados depois exige parsear "Março de 2009".

Checklist

• O conteúdo real foi escrito antes de escolher o componente.
• A sequência está num <ol>, na ordem do HTML igual à ordem das datas.
• Cada item tem <time datetime> com a data em formato ISO.
• Em 360 pixels de largura, nenhum texto aparece cortado e não há rolagem horizontal.
• Com zoom de 200%, a leitura continua em uma coluna.
• Com o JavaScript desligado, a história inteira aparece.
• Há no máximo uma biblioteca de timeline na página, e só se a lista não atende um requisito escrito.

Desligue o JavaScript no navegador e abra a sua página de linha do tempo: a ordem dos acontecimentos continua óbvia, ou sobra uma faixa vazia?