Lorsque vous utilisez du texte dynamique, il arrive parfois que le texte soit plus long que prévu, ce qui crée un problème. Si vous le rencontrez, nous avons la solution ! Cet article de blog décrit comment contrôler votre texte dynamique sans devoir modifier votre conception visuelle.
Par exemple, créez un fichier vierge, utilisez du gris pour la couleur de l'arrière-plan, ajoutez deux éléments DIV blancs, puis placez les éléments textuels par-dessus. Comme vous pouvez le constater, le contenu textuel est associé au nom du produit dans le panneau "Créations dynamiques".
Voici ce que vous voyez lorsque vous lancez l'aperçu :
Toutefois, si vous ajoutez un texte trop long, l'erreur suivante se produit :
Dans ce cas, deux erreurs se sont produites : la taille de la police du texte de l'élément de droite a été réduite, et le texte dépasse de son conteneur.
Affichage tronqué et taille de police minimale
Pour résoudre ces deux problèmes, passez à la vue Code, puis recherchez le tag gwd-text-helper suivant le tag "body". Copiez le code ci-dessous, puis collez-le dans le tag avant le signe de ponctuation fermant.
gwd-fitting-truncate="true" gwd-min-font-size-px="7"
Voici alors ce que vous voyez lorsque vous lancez l'aperçu :
C'est bien mieux. Le texte reste maintenant dans la boîte englobante, car il a été tronqué. Sa police risque par contre d'être un peu petite. Pour en ajuster la taille, il suffit de modifier l'attribut gwd-min-font-size-px ajouté ci-dessus. Actuellement, la taille du texte est définie sur 7, mais il peut être préférable de la définir sur 12. Deux méthodes permettent de modifier la taille. Vous pouvez soit utiliser le tag gwd-text-helper pour spécifier un paramètre global pour la totalité du texte de votre document, soit contrôler chaque élément textuel séparément (cette dernière méthode est couramment utilisée pour les titres) en ajoutant le tag directement à l'élément de paragraphe. Pour ce faire, procédez comme suit :
Vous pouvez également empêcher tout redimensionnement du texte à l'aide d'une valeur gwd-min-font-size-px définie sur la taille initiale (16 px dans ce cas).
Ces commandes devraient permettre de résoudre la plupart des problèmes liés au texte dynamique, mais il est possible que vous souhaitiez bénéficier de davantage de contrôle dans un cas précis, celui du centrage vertical. Dupliquez les deux zones de texte et associez-en le contenu aux produits 2 et 3 (ici, j'ai également modifié la quantité de texte pour mettre le problème en évidence) :
Centrage vertical du texte dynamique
Il est possible de centrer verticalement les champs de texte. Faites-le donc pour les produits 2 et 3. Commencez par encapsuler chaque champ de texte dans un nouvel élément DIV. Pour ce faire, faites un clic droit sur l'élément de paragraphe, puis sélectionnez Encapsuler. Ajoutez également le suffixe -ctn au nom du nouvel élément DIV et utilisez -txt pour les éléments textuels à des fins d'organisation.
Double-cliquez sur le nouvel élément DIV -ctn pour modifier l'élément de paragraphe, puis appliquez les paramètres suivants dans le panneau CSS :
left: 0;
width: 100%;
top:doit être désélectionné
Remplacezheightparmax-height: 100%
Ensuite, accédez à la vue Code, puis ajoutez la classe v-center au tag de paragraphe.
Répétez les étapes ci-dessus pour les deux nouveaux champs de texte.
Pour terminer, copiez le code ci-dessous, puis collez-le à la fin des styles CSS de l'élément head de votre document :
p {
margin: 0px;
}
.v-center {
position: relative;
top: 49%;
transform: translateY(-50%);
}
.v-bottom {
position: relative;
top: 100%;
transform: translateY(-100%);
}Désormais, lorsque vous lancez l'aperçu, vos champs de texte devraient être centrés verticalement, tels qu'illustrés ci-dessous :
Remarque : La classe v-bottom présentée ci-dessus permet d'aligner le texte sur la partie inférieure de son conteneur.
Ces trois commandes (affichage tronqué, taille de police minimale et positionnement vertical) devraient vous permettre de résoudre les problèmes les plus courants liés à la mise en forme du texte dynamique. Appliquez ces astuces et faites-nous part de votre expérience en commentaire !