Renderização de fonte do Discourse

[kcahtoor]

Olá,

Estou encontrando um problema de renderização de fontes ao usar uma fonte Urdu personalizada, ou seja, Jameel Noori Nastaliq (uma variante de Noto Nastaliq Urdu) no Discourse. Minha configuração é:

• Navegador: Chrome Versão 138.0.7204.183

• Fonte: Jameel Noori Nastaliq

• Plataforma: Discourse (estou usando um componente de tema seguindo este)

Problema

Ao aplicar Jameel Noori Nastaliq ao Discourse, o texto não é renderizado como esperado:

• Certas palavras são moldadas incorretamente. Na imagem anexada, o texto à direita mostra como o Discourse o renderiza atualmente, enquanto a esquerda mostra a renderização esperada (usando a mesma fonte e navegador).

• Outras fontes urdu (não Nastaliq) são exibidas corretamente no mesmo ambiente.

• Além disso, Noto Nastaliq Urdu é renderizada com um tamanho de fonte incomumente grande em comparação com outras fontes. Isso faz com que o texto pareça exagerado e inconsistente com o restante da interface do usuário.

O que Tentei

• Testando várias fontes Nastaliq: Todas as fontes Nastaliq, ou seja, Jameel, Mehr e Noto, têm esse problema.

• Comparando com navegadores diferentes: (testado no Firefox/Edge)

• Verificando substituições de CSS: A fonte é aplicada corretamente via @font-face e carregada pelo Discourse.

Esperado vs. Atual

• Esperado: Ligaduras Nastaliq corretas e dimensionamento proporcional (veja o lado esquerdo da imagem).

• Atual: Moldagem de palavras quebrada e texto exagerado (veja o lado direito da imagem).

Mais alguém encontrou esse problema com Noto Nastaliq Urdu no Chrome + Discourse? Isso é um bug de moldagem do Chrome, um problema de fonte ou algo na forma como o Discourse lida com fontes personalizadas?

Agradeço antecipadamente por qualquer orientação.

[nat (Natalie T)]

Existe a possibilidade de o Discourse estar a fazer algo com os tipos de letra em relação aos pesos dos tipos de letra.

Você está familiarizado com CSS? Você pode ser capaz de ajustar algumas das variáveis de peso de fonte definidas em Styling Discourse with variables: Show & Tell num componente de tema.

[chapoi]

Sim, acho que é principalmente o negrito que está causando a distorção.
Ou desative todas as fontes em negrito com uma substituição global, ou certifique-se de que a fonte que você está usando tenha uma variante em negrito específica.

Eu li que esta pode funcionar melhor: Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

Obrigado pela resposta. Vou desligar as fontes em negrito. Como você acha que será mais fácil fazer isso?

[chapoi]

@kcahtoor

Eu vou continuar para desativar as fontes em negrito. Como você acha que será mais fácil fazer isso?

Hmm, para ser muito completo, adicionar isso ao seu CSS personalizado deve funcionar:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi Infelizmente isso não está funcionando. O que você acha de

overflow-wrap: break-word;
white-space: nowrap;
text-overflow: ellipsis;

Esses três são comuns a essas palavras

[chapoi]

Nenhum desses fará nada com sua fonte.

Eu tentei minha solução localmente, e isso pareceu resolver. Você está dizendo que o CSS não está sendo aplicado, ou ele é aplicado, mas não resolve o problema?

[kcahtoor]

@chapoi obrigado. O que quero dizer é que a regra CSS está aplicada, mas não está produzindo os efeitos desejados. Abaixo estão os links para você reproduzir o que estou experimentando

/* Jameel Noori Nastaliq v4 */
@font-face {
  font-family: "Jameel-Noori";
  src: url("https://cdn.jsdelivr.net/npm/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2"),
  url("https://unpkg.com/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2");
}

Esta variante em particular está produzindo este tipo de caracteres sobrepostos e está longe do efeito desejado, que está mais abaixo.

/* Mehr Nastaliq Web Font v2 */
@font-face {
  font-family: "Mehr";
  src: url("https://cdn.jsdelivr.net/npm/mehr-nastaliq/fonts/mehr.woff2") format("woff2")
}

[kcahtoor]

O problema é causado pelas configurações padrão de fonte CSS do Discourse, que interferem na renderização de scripts complexos:

css

// Configurações padrão problemáticas
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

// A solução é sobrescrever
font-variant-ligatures: normal;
font-feature-settings: normal;

Isso resolveu o problema com ambas as fontes.