ADAPTER LA TAILLE DU TEXTE
Si vous voulez insérer du texte dynamique dans votre publicité, mais que ce texte risque de prendre, dans certains cas, plus de place que l’espace qui lui est réservé dans sa div, vous pouvez utiliser la méthodeadaptText.
La méthode adaptText permet de réduire la taille de la police sur un élément donné, “10“ étant la taille minimum acceptée.
Le facteur de réduction permet d’optimiser l’affichage du texte et d’adapter la taille de la police en fonction de l’espace réservé au champ texte.
Dans le cas où l’ensemble du texte ne tient pas dans l’emplacement qui lui est réservé et que sa taille de police est de 15px, alors la méthode réduira cette dernière jusqu’à 10px.
Exemple :
ADventori.initData({
wording:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
});
ADventori.Display.setText(sym.$("myText"), ADventori.data.wording);
ADventori.Display.adaptText(sym.$("myText"),10);Résultat :
Vous voulez dynamiser et adapter votre texte directement ? La méthode setAndAdaptText est faite pour vous :
ADventori.initData({
wording:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
});
ADventori.Display.setAndAdaptText(sym.$("myText"), ADventori.data.wording,12);Résultat
Important : Adobe Edge ajoute automatiquement l’option css word-wrap : break-word; Cette option css ne devrait pas être utilisée avec la fonction AdaptText, car cette option s’applique ligne à ligne.
Cf explications AdaptText ci-dessus
Correctif à mettre en place :
sym.$("Text")[0].style.wordWrap = "normal !important";
Important : Pour utiliser les fonctions adaptText, le container ciblé par cette fonction doit impérativement exister dès le début de votre timeline.
Vous pouvez également définir la taille du conteneur directement depuis la méthode setAndAdaptText
ADventori.Display.setAndAdaptText(sym.$("myText"),ADventori.data.wording, 10, {width :270, height:150});
Résultat :