Rendering dei font di Discourse

[kcahtoor]

Ciao,

Sto riscontrando un problema di rendering dei font durante l’utilizzo di un font urdu personalizzato, ovvero Jameel Noori Nastaliq (una variante di Noto Nastaliq Urdu) in Discourse. La mia configurazione è:

• Browser: Chrome Versione 138.0.7204.183

• Font: Jameel Noori Nastaliq

• Piattaforma: Discourse (sto usando un componente del tema seguendo questo)

Problema

Quando applico Jameel Noori Nastaliq a Discourse, il testo non viene renderizzato come previsto:

• Alcune parole sono modellate in modo errato. Nell’immagine allegata, il testo sulla destra mostra come Discourse lo renderizza attualmente, mentre la sinistra mostra il rendering previsto (utilizzando lo stesso font e browser).

• Altri font urdu (non Nastaliq) vengono visualizzati correttamente nello stesso ambiente.

• Inoltre, Noto Nastaliq Urdu viene renderizzato con una dimensione del font insolitamente grande rispetto ad altri font. Ciò fa apparire il testo sovradimensionato e incoerente con il resto dell’interfaccia utente.

Cosa ho provato

• Testare più font Nastaliq: tutti i font Nastaliq, ovvero Jameel, Mehr e Noto, presentano questo problema.

• Confrontare con browser diversi: (testato su Firefox/Edge)

• Verificare le sovrascritture CSS: il font è correttamente applicato tramite @font-face e caricato da Discourse.

Previsto vs Effettivo

• Previsto: Legature Nastaliq corrette e dimensionamento proporzionale (vedi lato sinistro dell’immagine).

• Effettivo: Modellazione delle parole errata e testo sovradimensionato (vedi lato destro dell’immagine).

Qualcun altro ha riscontrato questo problema con Noto Nastaliq Urdu su Chrome + Discourse? Si tratta di un bug di modellazione di Chrome, di un problema del font o di qualcosa nel modo in cui Discourse gestisce i font personalizzati?

Grazie in anticipo per qualsiasi consiglio.

[nat (Natalie T)]

È possibile che Discourse stia modificando i font per quanto riguarda gli spessori dei caratteri.

Hai familiarità con il CSS? Potresti essere in grado di modificare alcune delle variabili di spessore dei font definite in Styling Discourse with variables: Show & Tell in un componente tematico.

[chapoi]

Sì, penso che sia principalmente il grassetto a causare la distorsione.
O disattiva tutti i font in grassetto con una sovrascrittura globale, oppure assicurati che il font che stai utilizzando abbia una variante in grassetto specifica.

Ho letto che questo potrebbe funzionare meglio: Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

Grazie per la risposta. Procederò a disattivare i caratteri in grassetto. Come pensi che sarà più facile farlo?

[chapoi]

@kcahtoor

Andrò avanti per disattivare i font in grassetto. Come pensi che sarà più facile farlo?

Hmm, per essere molto accurato, l’aggiunta di questo al tuo CSS personalizzato dovrebbe funzionare:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi Purtroppo non funziona. Cosa ne pensi di

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

Questi tre sono comuni a queste parole

[chapoi]

Nessuno di questi farà nulla per il tuo font.

Ho provato la mia soluzione localmente e sembrava fare al caso tuo. Stai dicendo che il CSS non viene applicato, o viene applicato ma non risolve il problema?

[kcahtoor]

@chapoi grazie. Quello che voglio dire è che la regola CSS viene applicata ma non produce gli effetti desiderati. Di seguito sono riportati i link che puoi utilizzare per riprodurre ciò che sto riscontrando

/* 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");
}

Questa particolare variante produce questo tipo di caratteri sovrapposti ed è lontana dall’effetto desiderato che si trova più in basso.

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

Il problema è causato dalle impostazioni predefinite delle funzionalità dei font CSS di Discourse che interferiscono con il rendering di script complessi:

css

// Impostazioni predefinite problematiche
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

// La soluzione è sovrascrivere
 font-variant-ligatures: normal;
 font-feature-settings: normal;

Questo ha risolto il problema con entrambi i font.