L’habillage du Texte:habillagetexte

1. Le module CSS

L’habillage du texte par une image est une technique de PAO très classique depuis déjà de très nombreuses années. Cela permet de faire passer le texte autour d’une forme graphique. C’est le module Habillage du texte:CSS Shapes Module Level 1CSS Shapes Module Level 1 qui permet de créer ce type de mise en page. Ce module est presque achevé, il est en Candidate Recommendation au 20 mars 2014 : https://www.w3.org/TR/css-shapes-1/

Voici le tableau de compatibilité des navigateurs, sur le site de Can I Use :

Ce module est bien reconnu par les navigateurs modernes.

2. Créer un habillage

Pour créer un habillage, nous avons besoin d’une image qui sera contournée par le texte. Dans cet exemple, nous utilisons un simple triangle :

Ce triangle sera utilisé deux fois, pour un habillage à gauche et à droite du texte.

Voici la structure HTML :

<div id="habillage"> 
   <img src="triangle.gif" class="triangle-gauche"> 
   <img src="triangle.gif" class="triangle-droite"> 
   <p id="texte-habille">Morbi leo risus, porta ac consectetur ac...</p> 
</div>

Le conteneur est une boîte <div> ayant l’identifiant id="habillage". Nous avons ensuite deux éléments <img> pour insérer les deux triangles. ...