J'essaie d'ajouter une police spécifique à une application Web pour le texte arabe en SVG. La police a l'air bien mais getComputedTextLength () renvoie des résultats qui sont "trop courts", c'est-à-dire que le texte prend plus d'espace qu'il ne devrait lors du rendu. Cela provoque des problèmes lors de la tentative d'habillage du texte, etc.

Quelqu'un connaît une solution de contournement ou un correctif? J'ai essayé quelques polices différentes et j'obtiens le même résultat dans Chrome et Firefox.

https://fonts.google.com/specimen/Cairo

<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap&subset=arabic" rel="stylesheet">

https://www.google.com/get/noto/#kufi-arab

@font-face { font-family: 'NotoKufiArabic'; src: url('../font/NotoKufiArabic-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Exemple de code d3 qui donne des résultats "trop courts":

    legend.append("text")
        .text(function (d) { return d.data.label)})
        .each(function(d) { d.legendWidth = this.getComputedTextLength() + 24 });

Le 24 n'est qu'un rembourrage. La légende Largeur est trop petite. J'ai essayé d'appliquer un facteur, par exemple 1.4 mais cela ne résout pas tous les cas. Cela fonctionne parfaitement si je n'essaie pas d'utiliser une police arabe spécifique.

0
David Tinker 4 nov. 2019 à 11:48

1 réponse

J'ai compris ce qui se passait. Le code du graphique appelle getComputedTextLength () avant le chargement de la police arabe et la largeur est calculée pour la police de secours plus étroite. Ensuite, la police se charge et les éléments de texte deviennent soudainement beaucoup plus gros, mais mon code JS ne s'exécute pas.

0
David Tinker 4 nov. 2019 à 10:27