Comment afficher des indices et des exposants dynamiquement dans des champs texte en utilisant les balises HTML <sup> et <sub> en AS3 .

Nous sommes nombreux à charger des contenus depuis des fichiers XML contenant du texte au format HTML, ou tout simplement confrontés au problème pour afficher des exposants dynamiquement.

Une solution consiste à modifier la police de caractères utilisée en remplaçant un caractère inutile par nos caractères en exposant. Ce n’est pas très souple, vous en conviendrez. Et il faut modifier la police de caractères à chaque nouveau caractère.

Une autre solution consiste à utiliser les fonts GGShow, puis à utiliser une feuille de style CSS pour prendre en charge les balises <sup> et <sub>.

Ces polices de caractères contiennent tous leurs caractères en exposant ou en indice (les polices « Subscript » contiennent les caractères en indice, les polices « Superscript » les exposants).

Vous devez incorporer la(es) police(s) (GG Subscript Sans, GG Superscript Sans, GG Subscript Serif, GG Superscript Serif) dans votre swf suivant vos besoins.

Attention si vous incorporez vos polices dans Flash à bien choisir l’option de format du contour correspondant au type de champ texte utilisé (« Classique » ou « TLF ») pour la police GG.

Vous devez ensuite créer une feuille de style CSS que vous appliquerez à votre champ texte :

var css:String =
"p {" +
" font-family: " + fontName_de_votre_police_globale + ";" +
" color: #FFFFFF;" +
" font-size: 20px;" +
"}" +
"" +
"sup{" +
" font-family:" + fontName_de_la_police_GGSuperscript_embeddee + ";" +
" display:run-in;" +
"}" +
"" +
"sub{" +
" font-family:" + fontName_de_la_police_GGSubscript_embeddee + ";" +
" display:run-in;" +
"}";

var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS(css);

champTexte.embedFonts = true;
champTexte.styleSheet = styleSheet;
champTexte.htmlText = « <p>Votre texte normal du XXI<sup>e</sup> siècle.</p> »;

Le contenu de la balise <sup> sera remplacé par la police GG, nous affichant ainsi un exposant, ce qui donnera :
Votre texte normal du XXIe siècle.

Sources :
html sub & super tag
How to use subscript & superscript in dynamic and input text field
Download free TrueType Fonts

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *