Linha do tempo horizontal no celular: como não esconder a história atrás do arrasto

Segunda de manhã, uma cliente abre a página "Nossa história" da padaria no celular, dentro do ônibus. Vê uma linha com sete bolinhas, a data de 1987 e meio parágrafo cortado por reticências. Não sabe que precisa arrastar, nem para que lado. Fecha a aba. A timeline horizontal que impressionou na reunião acabou de esconder justamente a história que deveria contar.

A resposta curta: cada marco precisa ser legível sem gesto escondido. No celular, empilhe os eventos na vertical, com data, título e texto completos. Deixe o layout horizontal para telas largas, como melhoria, e mesmo lá mantenha todo o conteúdo no HTML, acessível por rolagem comum e por teclado. Se são só três eventos, uma lista simples resolve melhor que qualquer componente.

Por que a timeline horizontal quebra no celular

A linha do tempo horizontal nasceu pensando em mouse e monitor largo. Cada marco ganha uma largura fixa, a altura do bloco de texto é travada para a linha ficar alinhada e o excedente some com overflow: hidden. Em 360 pixels de largura, sobra espaço para uma data e duas linhas de texto. O resto vira reticência.

O segundo problema é a descoberta. Arrastar para o lado é um gesto que a pessoa só faz se souber que existe algo ali. Setas pequenas nas pontas ajudam pouco, e em vários celulares o arrasto horizontal perto da borda conflita com o gesto de voltar do sistema. A pessoa tenta ir para o próximo evento e sai da página.

O terceiro é estrutural. Muitas demos carregam o texto de cada evento só quando você clica na bolinha, via JavaScript. Quem usa leitor de tela, quem está com conexão ruim e o robô do buscador veem uma lista de datas sem conteúdo. O efeito virou o produto. A história, não.

Antes do CSS: o conteúdo que a linha precisa carregar

Vamos usar o mesmo caso do começo ao fim: a página da Padaria Trigo Fino, com sete marcos. Antes de escolher componente, escreva os marcos como um texto comum, num documento. Cada um precisa ter três coisas: data, título curto e um parágrafo que se entende sozinho.

• 1987: A primeira porta. Dona Lurdes abre a padaria com um forno elétrico e duas mesas.
• 1994: O forno a lenha. A troca do forno muda a casca do pão e dobra a fila de sábado.
• 2003: A segunda loja, no centro, com café e almoço executivo.
• 2011: O incêndio na cozinha. Quarenta dias fechada e a reabertura com a vizinhança ajudando.
• 2016: Entrega pelo bairro, primeiro por telefone, depois por aplicativo.
• 2020: A pandemia, o balcão na calçada e o pão de fermentação natural congelado.
• 2026: A escola de panificação no andar de cima.

Se esse texto não funciona lido em sequência, nenhum efeito vai salvá-lo. E se a lista tivesse só três itens, você já teria a resposta: publique a lista e pronto. Timeline visual se justifica quando há sequência longa e a ideia de progressão importa para quem lê. Para quando escolher esse formato e quando evitar, o guia de linha do tempo na página aprofunda o lado editorial.

Como montar a timeline que funciona nos dois tamanhos

A estratégia é mobile-first: o HTML é uma lista ordenada com todo o texto, o CSS base empilha na vertical, e uma media query transforma em linha horizontal quando há espaço. Nada depende de JavaScript para aparecer.

1. Use <ol>, porque a ordem importa. Cada evento é um <li> com <time>, um título e um parágrafo.
2. Escreva todo o texto no HTML. Nada de carregar o parágrafo só no clique.
3. No CSS base, desenhe a linha na vertical, à esquerda, com os marcos empilhados e sem altura fixa.
4. Na media query de tela larga, troque para grid em colunas, com rolagem horizontal nativa e scroll-snap para cada marco parar alinhado.
5. Deixe a região rolável alcançável por teclado com tabindex="0" e um nome acessível.
6. Teste no celular real, com fonte do sistema aumentada, e no desktop só com teclado.

O HTML da Padaria Trigo Fino

<section aria-labelledby="historia-titulo">
  <h2 id="historia-titulo">Nossa história</h2>
  <ol class="timeline" tabindex="0" aria-label="Linha do tempo da Padaria Trigo Fino">
    <li class="marco">
      <time datetime="1987">1987</time>
      <h3>A primeira porta</h3>
      <p>Dona Lurdes abre a padaria com um forno elétrico e duas mesas na Rua das Acácias.</p>
    </li>
    <li class="marco">
      <time datetime="1994">1994</time>
      <h3>O forno a lenha</h3>
      <p>A troca do forno muda a casca do pão e dobra a fila de sábado.</p>
    </li>
    <!-- os outros cinco marcos seguem o mesmo formato -->
  </ol>
</section>

O CSS que empilha no celular e deita na tela larga

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid #c8a26b;
}

.marco {
  position: relative;
  margin-bottom: 2rem;
}

.marco::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 8px);
  top: 0.3rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c8a26b;
}

.marco time {
  display: block;
  font-weight: 700;
}

@media (min-width: 60rem) {
  .timeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1rem 0;
    border-left: 0;
  }

  .marco {
    margin-bottom: 0;
    padding: 1.25rem 1.5rem 0 0;
    border-top: 3px solid #c8a26b;
    scroll-snap-align: start;
  }

  .marco::before {
    left: 0;
    top: -8px;
  }
}

Repare no que não está ali: nenhuma altura fixa, nenhum text-overflow: ellipsis, nenhum display: none em texto. No celular, a linha é a borda esquerda da lista e a bolinha fica centrada sobre ela. Na tela larga, cada marco ocupa pelo menos 16rem; com sete marcos, a largura passa da tela e a rolagem horizontal aparece sozinha, com barra visível, que é o sinal mais honesto de que há mais conteúdo.

O tabindex="0" na lista permite que quem navega por teclado foque a região e role com as setas. No modo vertical ele não atrapalha, mas se preferir, aplique-o só no layout largo com um pequeno script. Se quiser botões de avançar e voltar, use scrollBy no elemento e respeite prefers-reduced-motion antes de ligar rolagem suave. Os botões são um atalho, não o único caminho.

Como testar se a história sobrevive

Abra a página num celular de verdade, não só no modo responsivo do navegador. Aumente a fonte do sistema e confirme que o texto cresce sem ser cortado. Depois, desligue o JavaScript nas ferramentas do desenvolvedor e recarregue: todos os sete marcos precisam continuar lá, em ordem. Por fim, no desktop, use só Tab e setas para percorrer a linha.

Um teste rápido de conteúdo: peça para alguém que não conhece a padaria ler a página por um minuto no celular e contar o que aconteceu em 2011. Se a pessoa não achou o incêndio, o problema não é a pessoa.

Erros comuns

• Altura fixa no bloco do evento: o texto maior que a caixa some com reticências, e o marco mais importante costuma ser justamente o mais longo.
• Conteúdo carregado só no clique: leitor de tela, buscador e quem está com JavaScript falhando veem uma fila de datas vazias.
• Arrasto como único caminho: a pessoa não descobre o gesto, ou dispara o voltar do sistema e sai da página.
• Esconder a barra de rolagem por estética: você remove o único indício visual de que há mais marcos à direita.
• Timeline para três itens: o componente pesa mais que o conteúdo, e uma lista comunicaria melhor.
• Trocar de biblioteca em vez de corrigir o texto: marco sem data clara ou sem parágrafo próprio continua ruim em qualquer componente, como mostra o post sobre a segunda biblioteca de timeline.

Checklist

• Cada marco tem data, título e um parágrafo que se entende sozinho.
• Todo o texto está no HTML, sem depender de clique para aparecer.
• No celular, os marcos aparecem empilhados e completos, sem arrastar.
• Nenhum bloco de evento tem altura fixa ou reticências.
• No layout largo, a rolagem horizontal é nativa e a barra fica visível.
• A região rolável recebe foco por teclado e tem nome acessível.
• Com fonte do sistema aumentada, nada é cortado.
• Com JavaScript desligado, a ordem e o conteúdo continuam lá.

Abra agora a sua página de história no celular, sem tocar na tela: os marcos principais aparecem inteiros, ou a pessoa precisa adivinhar o gesto para descobrir o que aconteceu?