Texte adapté

Conception de texte adapté

Les conteneurs de texte doivent être redimensionnés à mesure que la taille de la zone d’affichage change pour empêcher le texte de déborder. Évitez les conteneurs fixes et statiques.

Bon exemple : Le conteneur de texte est redimensionné avec la zone d’affichage

Dans cet exemple, le conteneur de texte a une valeur de width de 75 %. Le texte se reformate à mesure que l’utilisateur modifie la taille de la zone d’affichage.

Début du code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis massa id justo egestas egestas in a urna. Cras et nunc fringilla, feugiat nisl tempus, aliquam nisi. Quisque rhoncus eros sed malesuada tincidunt. In commodo dignissim nulla ac porta. Nunc scelerisque quam sit amet sapien hendrerit sollicitudin. Curabitur tristique, tortor et ultricies dignissim, sem arcu tempor libero, sed aliquet tellus ex non lectus. Vestibulum maximus dolor ante, eget tincidunt mi accumsan a. Fusce euismod mauris neque, vitae sagittis ex faucibus eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Fin du code

HTML

Début du code

<div style="width:75%; padding: 1em; border: 1px dotted black">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis massa id justo egestas egestas in a urna. Cras et nunc fringilla, feugiat nisl tempus, aliquam nisi. Quisque rhoncus eros sed malesuada tincidunt. In commodo dignissim nulla ac porta. Nunc scelerisque quam sit amet sapien hendrerit sollicitudin. Curabitur tristique, tortor et ultricies dignissim, sem arcu tempor libero, sed aliquet tellus ex non lectus. Vestibulum maximus dolor ante, eget tincidunt mi accumsan a. Fusce euismod mauris neque, vitae sagittis ex faucibus eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Fin du code

Mauvais exemple : Le conteneur de texte utilise une largeur fixe

Dans cet exemple, le conteneur de texte est réglé avec une valeur de width de 800 pixels. Le texte ne se reformate pas lorsque l’utilisateur modifie la taille de la zone d’affichage.

L'exemple commence

L'exemple finit

HTML

Début du code

<div style="width:800px; padding: 1em; border: 1px dotted black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis massa id justo egestas egestas in a urna. Cras et nunc fringilla, feugiat nisl tempus, aliquam nisi. Quisque rhoncus eros sed malesuada tincidunt. In commodo dignissim nulla ac porta. Nunc scelerisque quam sit amet sapien hendrerit sollicitudin. Curabitur tristique, tortor et ultricies dignissim, sem arcu tempor libero, sed aliquet tellus ex non lectus. Vestibulum maximus dolor ante, eget tincidunt mi accumsan a. Fusce euismod mauris neque, vitae sagittis ex faucibus eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>

Fin du code

Haut de la page