Pra mim também aparece com todo o texto na mesma linha, e acredito que vai acontecer o mesmo com todo mundo, por causa do HTML gerado e do CSS que o site usa.
O problema
Este Markdown:
<sub>
###### Área de rascunho
Esta é uma postagem para fins de teste, não gerando Tabcoins propositalmente como definido nas regras do algoritmo do Tabnews. O conteúdo aqui produzido não tem valor informativo. Este espaço está sendo utilizado apenas para testar novas publicações, sua aparência, antes de serem publicadas definitivamente no portal.
Por favor, não pontuar
</sub>
Gera este HTML:
<sub>
<h6 id="gpoleszuk-content-área-de-rascunho-1">Área de rascunho</h6>
<p>Esta é uma postagem para fins de teste, não gerando Tabcoins propositalmente como definido nas regras do algoritmo do Tabnews. O conteúdo aqui produzido não tem valor informativo. Este espaço está sendo utilizado apenas para testar novas publicações, sua aparência, antes de serem publicadas definitivamente no portal.</p>
<p>Por favor, não pontuar</p>
</sub>
E se olharmos no developer tools do browser, vemos que o sub possui line-height igual a zero:
.markdown-body sub, .markdown-body sup {
line-height: 0;
... etc
}
Isso que faz com que todo o texto fique em uma única linha. Se desabilitarmos o line-height (ou mudarmos para algum valor maior que zero), aí o texto passa a ser exibido normalmente.
Como resolver?
Somente pelo site, com todo o conteúdo que vc quer, não sei se tem um jeito simples. Eu até tentei forçar o line-height para algum valor diferente de zero:
<sub style="line-height: 1 !important;">
Mas o renderer parece ignorar e remover qualquer style que eu coloque. Segue o teste abaixo:
Área de rascunho
Esta é uma postagem para fins de teste, não gerando Tabcoins propositalmente como definido nas regras do algoritmo do Tabnews. O conteúdo aqui produzido não tem valor informativo. Este espaço está sendo utilizado apenas para testar novas publicações, sua aparência, antes de serem publicadas definitivamente no portal.
Por favor, não pontuar
O trecho acima foi colocado com style na tag sub, mas o HTML foi gerado sem o style. O curioso é que se eu editar, o style continua lá, então ele só é ignorado na hora de converter para HTML.
Uma solução seria usar algo externo ao site, como por exemplo o Stylus, que é uma extensão do Chrome que permite que vc altere/customize o CSS de qualquer site. No meu caso, eu só adicionei o trecho abaixo para o TabNews:
.markdown-body sub, .markdown-body sup {
line-height: 1.5;
}
E assim o texto passou a ser exibido normalmente. Mas mudar o line-height diretamente via Markdown ou HTML no próprio post não sei se dá, pois como já disse acima, o renderer parece remover o style do elemento e usar somente o que está configurado na engine.
Sobre usar sub para estilizar
Na própria documentação da MDN tem o seguinte:
The
<sub>element should be used only for typographical reasons - that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.
E na especificação do HTML temos:
These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.
Ou seja, sub e sup não deveriam ser usados com o propósito de estilizar texto. É um uso torto e portanto não há garantia e nem obrigação de funcionar em todos os casos. Vale mencionar que nos links já citados é mencionado que o conteúdo destes elementos deve ser apenas phrasing content (e a lista destes elementos está aqui e aqui). Repare que h6 e p não estão na lista.
Ah, então a culpa é do Markdown que gerou esse HTML inválido.
Sim e não :-)
Historicamente as ferramentas que lidam com HTML (tanto os browsers quanto os softwares que geram) sempre foram - e ainda são - bem lenientes com HTML inválido e até mesmo mal-formado, e acabam aceitando muita coisa que não deveria. Cabe a nós tomar cuidado para não gerar nada fora do padrão (mesmo que muitas vezes "funcione").
