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éthode adaptText.
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.
Si le texte est toujours trop long suite à la réduction, les caractères non affichés seront résumés par “…“
Important : Pour ajuster correctement la taille du texte dans son espace dédié, spécifiez les propriétés CSS suivantes à votre élément, exprimées en pixels :
font-size / line-height / width / height
Pour ajuster la taille du texte d’une div :
Pour ajuster la taille du texte d’une class :
<div class="wording">
< Texte par défaut >
</div>
<script type="text/javascript"> ADventori.Display.adaptText(document.getElementsByClassName('wording'), 10); </script>
Vous voulez dynamiser et adapter votre texte directement ? La méthode setAndAdaptText est faite pour vous :
De la même manière , vous pouvez appliquer cette fonctionnalité aux éléments d’une class :
<div class="wording">
< Texte par défaut >
</div>
<script type="text/javascript"> ADventori.Display.setAndAdaptText(document.getElementsByClassName('wording'),ADventori.data.wording, 10); </script>
Important : Pour utiliser les fonctions adaptText, le container ciblé par cette fonction ne peut pas utiliser la propriété CSS display:none (privilégiez opacity:0;visibility:hidden;).
Vous pouvez également définir la taille de votre conteneur directement depuis la méthode setAndAdaptText
ADventori.Display.setAndAdaptText(document.getElementById('ADventori_text1'),ADventori.data.wording, 10,{width:270,height:160});