Conflito de H1 entre título do TabNews e Markdown

[ruidosujeira]

Descrição

Inconsistência de hierarquia visual ao renderizar H1 no conteúdo

O título nativo do TabNews é renderizado como <h1>.
Quando o conteúdo começa com # (H1), o resultado é dois <h1> consecutivos, sem margin adequada entre eles.

Sem a formatação #

Com a formatação #

Impacto:

• hierarquia visual duplicada
• leitura confusa
• quebra de expectativa de layout
• mistura estética entre título da plataforma e título do autor

Reprodução:

1. Criar um post com conteúdo iniciando com #
2. Publicar
3. Observar o overlap visual entre o título do TabNews e o H1 do Markdown

Causa:

• ambos os títulos compartilham weight e hierarquia sem espaçamento vertical definido

Solução sugerida:

• Forçar conversão automática do primeiro H1 do conteúdo para H2 (<h2>)
  ou
• Adicionar margin-top consistente ao primeiro heading do conteúdo (h1:first-of-type { margin-top: Xpx })

Resultado esperado:

• separação clara entre título principal e o heading do autor
• hierarquia visual previsível
• consistência com padrões de renderização Markdown em plataformas similares

Sugestão de implementação

No response

[Rafatcb]

@ruidosujeira, obrigado pela sugestão.

Visualmente não é bom ter mais de um h1 seguidos, e semanticamente também não.

Fazer o ajuste visual modificando o código para renderizar como h2, bagunçaria toda hierarquia de conteúdo que o autor planejou. Usar o margin-top adicionaria um esforço de manutenção no código desnecessário, considerando que o autor pode editar o conteúdo. Já houveram casos assim que alguém comentou a sugestão e o autor editou o conteúdo para corrigir.

Se alterarmos todos os títulos para manter a hierarquia (h1 vira h2, h2 vira h3 etc.) quebraria os títulos h6 (que precisariam virar outra coisa, provavelmente negrito), e a formatação de alguns conteúdos, que o autor usou a formatação apenas para modificar visualmente, e não para ter o melhor significado semântico possível.

Considerando que qualquer pessoa pode publicar no TabNews formatando como bem entender, o esforço em tentar corrigir isso no código não trará bons frutos. Se o autor não colocou esforço na estrutura do conteúdo, é possível que também não tenha colocado esforço no conteúdo, e se colocou, basta sugerir a edição.

[marlonwq]

Gostaria de pegar essa issue para resolver.

Analisando a discussão acima, concordo que alterar a tag H1 automaticamente pode prejudicar a semântica intencional do autor. Minha proposta é implementar um aviso visual (warning) no Editor quando o usuário iniciar o texto com # .

Dessa forma, educamos o usuário sobre a hierarquia visual do TabNews sem forçar uma alteração no conteúdo original. Já estou trabalhando nisso.