Je rencontre un problème de rendu de police lors de l’utilisation d’une police personnalisée en ourdou, à savoir Jameel Noori Nastaliq (une variante de Noto Nastaliq Urdu) dans Discourse. Ma configuration est la suivante :
Navigateur : Chrome version 138.0.7204.183
Police : Jameel Noori Nastaliq
Plateforme : Discourse (j’utilise un composant de thème suivant ceci)
Problème
Lorsque j’applique Jameel Noori Nastaliq à Discourse, le texte ne s’affiche pas comme prévu :
Certains mots sont mal formés. Sur l’image ci-jointe, le texte à droite montre comment Discourse le rend actuellement, tandis que la gauche montre le rendu attendu (en utilisant la même police et le même navigateur).
D’autres polices en ourdou (non-Nastaliq) s’affichent correctement dans le même environnement.
De plus, Noto Nastaliq Urdu s’affiche avec une taille de police inhabituellement grande par rapport aux autres polices. Cela donne au texte une apparence disproportionnée et incohérente avec le reste de l’interface utilisateur.
Ce que j’ai essayé
Tester plusieurs polices Nastaliq : Toutes les polices Nastaliq, c’est-à-dire Jameel, Mehr et Noto, présentent ce problème.
Comparer avec différents navigateurs : (testé sur Firefox/Edge)
Vérifier les substitutions CSS : La police est correctement appliquée via @font-face et chargée par Discourse.
Attendu vs Actuel
Attendu : Ligatures Nastaliq correctes et dimensionnement proportionnel (voir le côté gauche de l’image).
Actuel : Formation de mots incorrecte et texte surdimensionné (voir le côté droit de l’image).
Quelqu’un d’autre a-t-il rencontré ce problème avec Noto Nastaliq Urdu sur Chrome + Discourse ? S’agit-il d’un bug de mise en forme de Chrome, d’un problème de police, ou de la manière dont Discourse gère les polices personnalisées ?
Il est possible que Discourse fasse quelque chose avec les polices de caractères concernant les graisses de police.
Connaissez-vous le CSS ? Vous pourriez être en mesure de modifier certaines des variables de graisse de police définies dans Styling Discourse with variables: Show & Tell dans un composant de thème.
Oui, je pense que c’est principalement le gras qui cause la distorsion.
Soit désactivez toutes les polices en gras avec une règle globale, soit assurez-vous que la police que vous utilisez dispose d’une variante grasse spécifique.
J’ai essayé ma solution localement, et cela a semblé faire l’affaire. Dites-vous que le CSS n’est pas appliqué, ou qu’il est appliqué mais ne résout pas le problème ?
@chapoi merci. Ce que je veux dire, c’est que la règle CSS est appliquée mais qu’elle ne produit pas les effets souhaités. Voici les liens pour que vous puissiez reproduire ce que je rencontre
/* Mehr Nastaliq Web Font v2 */
@font-face {
font-family: "Mehr";
src: url("https://cdn.jsdelivr.net/npm/mehr-nastaliq/fonts/mehr.woff2") format("woff2")
}
Le problème est causé par les paramètres par défaut de la fonctionnalité de police CSS de Discourse qui interfèrent avec le rendu des scripts complexes :
css
// Paramètres par défaut problématiques
font-variant-ligatures: none;
font-feature-settings: "calt" 0;
// La solution consiste à remplacer
font-variant-ligatures: normal;
font-feature-settings: normal;
