Le texte peut-il s'enrouler autour d'images de forme irrégulière ?

Le texte peut-il être enroulé autour d'images non rectangulaires ?

L'enroulement de texte autour d'images non rectangulaires est un défi courant dans la conception Web. Prenons le cas où vous disposez de cartes de différents pays et souhaitez que le texte s'enroule autour de la forme du pays, en maintenant une distance constante par rapport à la frontière. Est-il possible d'y parvenir ?

La solution

Oui, il est possible d'enrouler du texte autour d'images non rectangulaires en utilisant une technique décrite par Tory Lawson dans son ouvrage de 2011. article de blog intitulé « Enrouler du texte autour de formes non rectangulaires ». Cette méthode implique des divs flottants pour bloquer la zone de la forme :

Étape 1 : Définir la zone d'habillage

• Déterminez la distance souhaitée entre le texte et la bordure de l'image.
• Ouvrez l'image dans un programme d'édition et superposez une grille.
• Dessinez une forme englobante représentant l'endroit où le texte doit se terminer, en tenant compte du remplissage (par exemple, 5 px).

Étape 2 : Créer une liste de mesures de largeur

• Mesurer la largeur de la zone d'enveloppement à intervalles réguliers (par exemple, tous les 10 pixels).
• Enregistrez ces mesures sur un morceau de papier.

Étape 3 : Créer des divs

• Créez un div pour agir comme un wrapper pour l'image et le texte.
• Créer des divs supplémentaires pour chaque largeur mesure.

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

Remarque : Cette approche n'est pas aussi simple que l'utilisation d'un "text-wrap" CSS option, mais elle permet un contrôle précis sur le comportement de retour à la ligne du texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!