Fonte Monospace no editor apenas de Markdown

Aviso rápido:

Para aqueles que estão testando o novo editor (aqui no meta ou em seu próprio site), acabamos de trocar a fonte do markdown (também conhecida como código-fonte) para uma fonte monoespaçada.

Isso ajuda a esclarecer aos usuários que você está no modo “markdown” em vez do modo “rico”.

A mudança alinha a escolha da fonte ao que é geralmente aceito na indústria (reddit / stack exchange).

A mudança só entra em vigor em sites com o editor rico habilitado e deve estar ativa aqui em 20-40 minutos.

13 curtidas

[quote=“sam, post:1, topic:359936”]A alteração alinha a escolha da fonte ao que é geralmente aceito na indústria (reddit / stack exchange)
[/quote]

Como não uso nenhum deles, mas sou de um ramo totalmente diferente da indústria, como posso voltar a usar uma fonte mais… agradável? Em uma instância auto-hospedada, é claro.

3 curtidas

Você tem a capacidade de introduzir temas e componentes em seu site, substituindo esta escolha de fonte com 3 linhas de CSS.

A fonte mais agradável permanece no novo editor, não mudamos para monoespaçada lá.

4 curtidas

Normalmente escrevo posts mais longos e não preciso de WYSIWYG, mas meus usuários precisam, então eu usaria markdown. Mas monoespaçado é realmente difícil de ler, e há um motivo pelo qual a grande maioria da indústria não usa monoespaçado em editores.

Só por curiosidade — qual foi o motivo dessa mudança? Isso meio que quebra a usabilidade agora.

Mas sim, vou começar a fuçar nas classes quando estiver em um dispositivo mais amigável, o que o iPad é nesse assunto :joy:

2 curtidas

Isso não é realmente verdade, todos os editores de código usam fontes monoespaçadas, é o padrão da indústria.

Dito isso, conviva com a mudança aqui, se isso realmente o incomoda no meta, recomendo tentar clicar nisso:

O editor rico funciona muito bem aqui. Estamos atentos ao feedback sobre a fonte.

6 curtidas

Eu não uso editores de código. Estou criando texto e conteúdo.

Funciona.

Isso me incomoda muito, mas posso conviver com isso aqui, porque não escrevo muito. Mas recebi uma dica sua de como consertar isso no meu fórum, e isso funcionou. Obrigado.

Mas eu tenho a resposta, mesmo que eu ainda não entenda o significado e o propósito dessa mudança, mas eu também não preciso. O Meta está fazendo o que o Meta está fazendo, e eu posso mudar isso do meu lado. A maioria das pessoas está feliz.

2 curtidas

Embora isso seja verdade, estou me perguntando se essa é a metáfora certa aqui. Se eu penso em escrever posts no Discourse com Markdown, eu mentalmente não estou no “espaço de codificação”, mas sim no “espaço de edição web”. E se eu olho para Discord ou JIRA, onde também escrevo posts formatados em Markdown, ambos não usam fontes monospace.

Agora, estou majoritariamente satisfeito com o novo editor (já que ele pode ser usado em uma espécie de “modo semi-WYSIWYG”, onde você ainda insere Markdown e ele é formatado após você completar o bloco de linha), e acho que usarei o antigo com menos frequência quando for implementado. No entanto, se você decidir manter a fonte monospace, acho que seria bom reduzir o peso da fonte, para que fique mais próximo do texto renderizado. Atualmente, o texto parece um pouco muito em negrito.

8 curtidas

Esta é uma mudança interessante! Tendo usado isso para escrever algumas postagens mais longas hoje, a principal coisa a que estou tendo dificuldade em me acostumar é que o lado esquerdo ocupa mais espaço do que o lado direito, o que significa que os dois lados rapidamente perdem o alinhamento.

Estou tão acostumado a observar a prévia enquanto escrevo para confirmar que parece como eu quero, a ponto de que, mesmo depois de todos esses anos, eu AINDA às vezes clico no lado da prévia em vez do lado do markdown!

Com esta mudança, isso é claro onde devo digitar.

Terei que dar um tempo para me acostumar, mas acho que concordo com @schneeland que a fonte do markdown poderia ser menor.

6 curtidas

Entendo a intenção de ter uma dica visual. Faz sentido neste contexto! Às vezes, me pergunto se estou usando o editor rico.
Também é importante dar uma dica a favor do editor rico, pois ele tem tido um desempenho notavelmente bom no geral.

Ainda uso o editor markdown com frequência por causa dos bugs com o editor rico.
No momento, não é fácil de ler:

Como Schneeland disse, não considero o editor Markdown um editor de código; levará tempo para me acostumar com ele. Seria ótimo se o tamanho da fonte pudesse ser ajustado para corresponder mais de perto à fonte de pré-visualização.

8 curtidas

Se você baixar uma extensão de navegador chamada Stylus para os navegadores Firefox e Chromium, você pode substituir o CSS em outros sites.

Eu não uso muito o Safari e não tentei, mas há uma configuração para adicionar uma folha de estilo personalizada em AvançadoFolha de Estilo.

Uma captura de tela da configuração do Safari

Acho que este CSS funcionará:

.d-editor-input {
    font-family: var(--font-family) !important;
}

(Substitua var(--font-family) por outro nome de fonte se quiser uma fonte diferente.)

2 curtidas

Este tem sido um feedback repetido, vou experimentar usar o JetBrains Mono e mexer um pouco no tamanho para ver se as coisas se alinham melhor.

Um ponto importante que isso ajudou a deixar claro é que todos nós experimentamos a fonte mono um pouco diferente, tornar a experiência consistente pode ajudar aqui.

3 curtidas

Esta é a aparência com JetBrains Mono definido para 14px:

Comparação direta:

O JetBrains Mono parece fantástico para mim. É definitivamente mais fácil de ler e combina bem com a fonte de pré-visualização.

Além disso, faria sentido destacar o conteúdo agora que ele é tratado como código. Existe um tópico, mas não me lembro do conteúdo. Por exemplo:


6 curtidas

É provável que a aparência da fonte monoespaçada não esteja ajudando, pois ela está usando os padrões do sistema para --d-font-family--monospace, ao contrário da base padrão Inter em --font-family. Em 14px (o tamanho da fonte para blocos de código), parece bom, mas no tamanho da fonte do editor de texto, parece estranho ao lado de Inter.

Firefox - Windows

Firefox - MacOS

Safari - MacOS

Embora esse comportamento de recorrer aos padrões do sistema corresponda a outros sites focados em codificação como GitHub e StackOverflow, provavelmente será melhor encontrar uma fonte monoespaçada específica que combine bem com a fonte de corpo padrão Inter.

6 curtidas

Isso deve estar ativo em breve, estou apenas finalizando a revisão no PR.

Esses screenshots que você tem serão resolvidos @Alteras

Isso é complicado, não sou contra isso, mas seria uma mudança bem grande.

Renderizamos markdown em um TEXTAREA agora, para fazer esse destaque sofisticado precisaríamos trocá-lo para usar Ace (que nós enviamos) ou CodeMirror (que nós não enviamos) ou uma configuração ProseMirror personalizada (que seria muito complicada)

Eu pessoalmente gosto de markdown com destaque de sintaxe, mas acho que uma missão secundária nesse departamento nos distrairia muito de todo o progresso que está sendo feito com o editor rico.

7 curtidas

Ainda estou pensando se a solução mais óbvia não seria não usar monospace. E usar um componente simples quando monospace for desejado.

Mas vejo a diferença de política aqui:

  • markdown é para desenvolvedores e codificação
  • editor rico é para todos os outros
  • se alguém é membro de “todos os outros” e gosta de usar markdown, então deve escolher

O que eu realmente não entendo é a necessidade e a demanda real de oferecer monospace ao criar conteúdo para escrita, que é exibido usando uma fonte totalmente diferente.

O que me incomoda muito é novamente a sensação de que algo está sendo feito traçando uma fronteira entre desenvolvedores e pessoas comuns — mas talvez os desenvolvedores sejam a maioria globalmente — mas essa sensação é provavelmente apenas meu problema, porque todos os outros neste tópico estão totalmente felizes (se a questão do tamanho da fonte puder ser corrigida).

Bem, tópico muito acadêmico para mim, porque no meu fórum esse truque de CSS funciona, e meus usuários não precisam desse ponteiro de magnitude para dizer qual deles, markdown ou rico, eles estão usando. E como tenho a sensação de que meta sobre por que e o que isso dá não são desejados ou necessários, é melhor para todos que eu saia — porque, afinal, eu não sou um desenvolvedor e não preciso de editor de código/codificação, mas sim de um editor markdown para conteúdo.

5 curtidas

Precisamos que a mudança respire um pouco, todas as mudanças são chocantes quando você as faz. Os refinamentos de hoje tornaram a mudança significativamente menos chocante.

Monospace vem com outras vantagens quando se trata de markdown, tabelas são muito mais fáceis de trabalhar, texto pré-formatado é muito mais fácil de trabalhar.

Estou aqui, ouvindo os comentários, se eventualmente chegarmos a um estágio onde sentimos que isso é demais devido a feedback esmagador, podemos revisar ou refinar a decisão.

A mudança de hoje também tem um efeito colateral que é fantástico para o Discourse. Monospace significava coisas diferentes para pessoas diferentes, pois cada sistema operacional tem sua própria interpretação. Pessoas com o rich_editor habilitado agora têm uma experiência monospace consistente em todo o produto.

Eu entendo totalmente o feedback de ontem, mas hoje, estou me sentindo muito mais confortável com a fonte ajustada. É bom, e me permite escrever isto:

   \ (^-^)/
     |
    /\

E parece no composer exatamente como aparece na pré-visualização.

7 curtidas

Concordo, faz todo o sentido como padrão.

E uma oportunidade para um componente de tema oferecer mais flexibilidade (um menu suspenso de fonte fixo??)

2 curtidas

Obrigado pela atualização! Parece natural e agora está bem confortável.
Essa pequena mudança faz uma grande diferença, e já consigo me imaginar me acostumando com ela. :chefs_kiss:

5 curtidas

Não sou muito fã. Acho que a fonte monoespaçada me deixa excessivamente ciente do fato de que estou digitando em uma janela e o texto real é renderizado em outra. Evoca algumas memórias de LaTeX…

Se isso for implementado a longo prazo, acho que deveria ter uma variável de fonte dedicada como --d-font-md-composer. Em vez da fonte monoespaçada padrão --d-font-family-monospace. Dessa forma, pode ser facilmente alterada por site sem afetar a fonte monoespaçada.

8 curtidas

Notei que a fonte do Composer aqui no fórum mudou:

image

Não sei se isso foi intencional ou não?
Se foi intencional, espero que não seja uma atualização para todos os usuários do Discourse, pois gosto da fonte normal “Arial/Helvetica/sans serif”. Ou pelo menos que possamos alterá-la em nosso painel de administração.

EDIT: Como meu post era um tópico que foi dividido, ele parece um pouco estranho neste tópico atual, então esqueça. Eu sei que foi intencional…


Minha opinião: Entendo por que ter fontes diferentes para 2 editores diferentes pode fazer sentido, mas, por exemplo, o Obsidian é uma ferramenta de markdown e não usa monospace como padrão. E, como alguém disse, eu não vejo este espaço como “codificação”, embora possamos adicionar coisas que a pessoa “média” não entenderia quando usa o editor de rich text.

Não sei, apenas parece estranho, porque é uma fonte que não usamos com frequência (se é que usamos) quando estamos digitando textos/mensagens. Acostumei-me a usar tanto o Discourse quanto o Obsidian da “maneira antiga”, então é meio estranho digitar com monospace ou usar o editor de rich text.

Não poderia ser um recurso que cada usuário pudesse alterar?