Renderizado de fuentes de Discourse

[kcahtoor]

Hola,

Estoy encontrando un problema de renderizado de fuentes al usar una fuente urdu personalizada, es decir, Jameel Noori Nastaliq (una variante de Noto Nastaliq Urdu) en Discourse. Mi configuración es:

• Navegador: Chrome Versión 138.0.7204.183

• Fuente: Jameel Noori Nastaliq

• Plataforma: Discourse (estoy usando un componente de tema siguiendo esto)

Problema

Cuando aplico Jameel Noori Nastaliq a Discourse, el texto no se renderiza como se esperaba:

• Ciertas palabras tienen una forma incorrecta. En la imagen adjunta, el texto de la derecha muestra cómo lo renderiza actualmente Discourse, mientras que la izquierda muestra el renderizado esperado (usando la misma fuente y navegador).

• Otras fuentes urdu (no Nastaliq) se muestran correctamente en el mismo entorno.

• Además, Noto Nastaliq Urdu se renderiza con un tamaño de fuente inusualmente grande en comparación con otras fuentes. Esto hace que el texto parezca sobredimensionado e inconsistente con el resto de la interfaz de usuario.

Lo que he intentado

• Probar múltiples fuentes Nastaliq: Todas las fuentes Nastaliq, es decir, Jameel, Mehr y Noto, tienen este problema.

• Comparar con diferentes navegadores: (probado en Firefox/Edge)

• Verificar las anulaciones de CSS: La fuente se aplica correctamente a través de @font-face y es cargada por Discourse.

Esperado vs. Real

• Esperado: Ligaduras Nastaliq correctas y tamaño proporcional (ver el lado izquierdo de la imagen).

• Real: Formación de palabras incorrecta y texto sobredimensionado (ver el lado derecho de la imagen).

¿Alguien más se ha encontrado con este problema con Noto Nastaliq Urdu en Chrome + Discourse? ¿Es un error de formación de Chrome, un problema de la fuente o algo en la forma en que Discourse maneja las fuentes personalizadas?

Gracias de antemano por cualquier orientación.

[nat (Natalie T)]

Existe la posibilidad de que Discourse esté haciendo algo con las fuentes en lo que respecta a los grosores de fuente.

¿Estás familiarizado con CSS? Es posible que puedas ajustar algunas de las variables de grosor de fuente definidas en Styling Discourse with variables: Show & Tell en un componente de tema.

[chapoi]

Sí, creo que es principalmente el uso de negritas lo que está causando la distorsión.
O desactiva todas las fuentes en negrita con una anulación global, o asegúrate de que la fuente que estás utilizando tenga una variante específica en negrita.

Leí que esta podría funcionar mejor: Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

Gracias por la respuesta. Procederé a desactivar las fuentes en negrita. ¿Cómo crees que será más fácil hacerlo?

[chapoi]

@kcahtoor

Voy a proceder a desactivar las fuentes en negrita. ¿Cómo crees que será más fácil hacerlo?

Hmm, para ser muy minucioso, agregar esto a tu CSS personalizado debería funcionar:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi Desafortunadamente, esto no está funcionando. ¿Qué opinas de

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

Estos tres son comunes para estas palabras

[chapoi]

Ninguna de esas opciones hará nada por tu fuente.

Probé mi solución localmente y pareció funcionar. ¿Estás diciendo que el CSS no se está aplicando, o que se aplica pero no resuelve el problema?

[kcahtoor]

@chapoi gracias. Lo que quiero decir es que la regla CSS se aplica pero no produce los efectos deseados. A continuación, te dejo los enlaces para que puedas reproducir lo que estoy 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 en particular produce este tipo de caracteres superpuestos y está muy lejos del efecto deseado, que es el que se muestra a continuación.

/* 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]

El problema es causado por la configuración predeterminada de las características de fuente CSS de Discourse, que interfiere con la representación de scripts complejos:

css

//Configuración predeterminada problemática
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

//la solución es anular
 font-variant-ligatures: normal;
 font-feature-settings: normal;

Esto resolvió el problema con ambas fuentes.