Pour faire enrouler le texte d'un paragraphe autour d'une image qui dépasse du bord d'une carte, faites flotter l'image et utilisez une marge externe négative. Ajoutez shape-outside pour un contour courbe. Ce tutoriel construit un exemple local complet que vous pouvez ouvrir dans Safari sur votre Mac.

Ce qui fait enrouler le texte autour d'une image chevauchante

L'image doit participer à la mise en page float du paragraphe. La propriété CSS float place un élément contre un côté de son conteneur et laisse le texte adjacent s'enrouler à côté. Dans cet exemple, un float à droite laisse le texte s'écouler sur sa gauche puis en dessous. MDN : float.

Trois choix contrôlent le résultat : le float crée le comportement d'enroulement, une marge droite négative laisse l'image dépasser du conteneur, et shape-outside définit le contour que suit le texte adjacent. Les floats ordinaires fournissent un enroulement rectangulaire ; une forme peut faire suivre un cercle aux lignes individuelles. MDN : shape-outside.

Déplacer une image visuellement est insuffisant. Une image en position absolue n'occupe pas d'espace dans le flux normal, les éléments environnants se comportent donc comme si elle était absente. Une translation change la position rendue sans réorganiser le flux normal du document. Ces comportements expliquent pourquoi une image chevauchante peut couvrir du texte lorsqu'elle est positionnée avec position: absolute ou transform: translateX(...). MDN : position, MDN : Utilisation des transformations CSS.

La tâche ici est délibérément spécifique : une image circulaire traverse le bord droit d'une carte de texte, et les paragraphes de la carte suivent le contour gauche du cercle. L'image et les paragraphes appartiennent à la même région d'enroulement.

Construire un exemple complet sur votre Mac

Dans un éditeur de code en texte brut, créez un fichier nommé overlap-wrap.html. Collez le document complet ci-dessous, enregistrez-le, et ouvrez-le dans Safari. L'exemple inclut sa propre image SVG abstraite sous forme d'URL de données, il n'y a donc aucun fichier image, paquet ou outil de construction à installer.

L'image flottée apparaît avant les paragraphes qu'elle doit affecter. Ce placement importe car le positionnement du float est contraint par le contenu qui apparaît plus tôt dans le document. Garder le titre avant le float permet aussi au titre d'occuper toute la largeur de texte de la carte. W3C : Modèle de formatage visuel.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Overlapping image and paragraph wrapping</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 96px 32px 32px;
      background: #eef1f5;
      color: #243247;
      font: 18px/1.65 system-ui, sans-serif;
    }
    .card {
      display: flow-root;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 24px;
      background: white;
      box-shadow: 0 0 0 1px #cbd3df;
      overflow: visible;
    }
    .card h2 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.25;
    }
    .card p { margin: 0 0 16px; }
    .card p:last-child { margin-bottom: 0; }
    .art {
      display: block;
      float: right;
      width: 240px;
      height: 240px;
      margin: 0 -88px 16px 16px;
      border-radius: 50%;
      shape-outside: circle(50%) border-box;
      shape-margin: 16px;
    }
    @media (max-width: 760px) {
      body { padding: 16px; }
      .art {
        float: none;
        width: min(240px, 100%);
        height: auto;
        margin: 0 auto 24px;
        shape-outside: none;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Study A: circles and spacing</h2>
    <img class="art" width="240" height="240" alt=""
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect width='240' height='240' fill='%233a628b'/%3E%3Ccircle cx='90' cy='85' r='60' fill='%23b9d8eb'/%3E%3Ccircle cx='165' cy='170' r='45' fill='%238db5cc'/%3E%3C/svg%3E">
    <p>Panel A pairs a circular graphic with a continuous passage of
      sample text. Follow the right edge of this paragraph as each
      line approaches the curved outline. Near the widest part of
      the circle, the available space becomes narrower.</p>
    <p>Panel B continues the same passage with a second paragraph.
      The graphic extends into the outer gutter while the words
      remain inside the white card. As the contour curves inward,
      later lines can use more of the available width.</p>
    <p>Panel C provides enough additional text to show the transition
      below the graphic. Once the passage continues beyond the
      wrapping region, its lines return to the full content width.
      Resize the window to compare the desktop arrangement with
      the stacked layout used in a narrower window.</p>
  </article>
</body>
</html>

À une largeur de fenêtre supérieure à 760px, le résultat visé est un graphique circulaire s'étendant dans la gouttière droite, avec les lignes de paragraphe suivant son côté gauche. À 760px ou moins, l'image devient un bloc centré au-dessus des paragraphes. Le point de rupture est un choix de conception illustratif ; @media applique les déclarations incluses lorsque sa requête correspond. MDN : @media.

L'image d'exemple est décorative, son élément image utilise donc alt="". Si vous la remplacez par un graphique qui communique de l'information, fournissez une alternative textuelle appropriée. WHATWG distingue les images décoratives des images dont l'information a besoin d'un équivalent en texte. WHATWG : Exigences pour fournir un texte servant d'alternative aux images.

Comment choisir le chevauchement et l'espace du texte ?

Commencez par la position de l'image, puis ajustez le contour. Un float à droite est placé en utilisant sa boîte de marge. Dans cet exemple, la marge droite négative place le bord droit de l'image à 88px au-delà du bord de contenu de la carte. La carte a 24px de remplissage droit, laissant un débordement visible de 64px au-delà de son fond blanc. Ce sont des dimensions dérivées pour cet exemple, mesurées en pixels CSS. W3C : Positionnement du float.

Quantité Valeur d'exemple Calcul ou but
Largeur de l'image 240px Diamètre du cercle affiché
Déplacement vers l'extérieur depuis le bord de contenu 88px Amplitude de la marge droite négative
Remplissage de la carte 24px Espace entre le bord de contenu et le bord du fond
Débordement visible au-delà du fond 64px 88 − 24
Largeur d'image restante dans la zone de contenu 152px 240 − 88
Réservation de secours rectangulaire 168px 240 − 88 + 16 incluant la marge gauche

Pour votre propre mise en page, calculez l'amplitude de la marge négative comme le débordement souhaité plus le remplissage droit du conteneur. Par exemple, un débordement de 40px avec 24px de remplissage appelle une marge droite de -64px. Revérifiez la largeur de texte restante chaque fois que vous agrandissez l'image ou réduisez la largeur du conteneur.

La version circulaire utilise shape-outside: circle(50%) border-box pour que sa géométrie suive la boîte d'image carrée. Choisir explicitement border-box est utile ici car les marges asymétriques changent la boîte de marge. Sans boîte de référence explicite, une forme de base prend par défaut margin-box. MDN : Formes de base avec shape-outside.

shape-margin: 16px ajoute de l'espace autour du contour d'enroulement. La marge gauche positive fournit de la place pour cet espace du côté du texte. Les formes, y compris leurs marges de forme, sont rognées à la boîte de marge du float ; augmenter shape-margin seul ne peut pas étendre la zone d'enroulement indéfiniment. La marge droite négative rogne aussi la forme du côté extérieur, où cet exemple n'a pas de texte de paragraphe. W3C : Module CSS Shapes Niveau 1.

Pour une image rectangulaire, changez border-radius en 0, shape-outside en none, et shape-margin en 0. Gardez le float et les marges. Cela donne un enroulement à bords droits avec le même placement vers l'extérieur. Supprimer seulement la forme tout en conservant le rognage circulaire laisse une image circulaire avec un dégagement de texte rectangulaire.

Quelles limites de conteneur affectent l'enroulement ?

La carte utilise display: flow-root pour établir un contexte de formatage de bloc qui contient son float verticalement. Cela permet à la hauteur de la carte de tenir compte de l'image même quand le texte est court. Cela garde aussi cette région d'enroulement indépendante des floats externes. MDN : Contexte de formatage de bloc.

Gardez les paragraphes dans un flux de bloc ordinaire dans cette région. Si l'image est un élément flex ou grid direct, son float ne fournira pas cet arrangement d'enroulement de paragraphes. De même, donner à un conteneur de paragraphe séparé son propre contexte de formatage de bloc exclut le float externe de son contenu. Une grille externe peut positionner la carte entière ; l'intérieur de la carte peut toujours utiliser une mise en page de flux. MDN : Contexte de formatage de bloc.

Vérifiez le rognage séparément. L'exemple laisse le débordement visible pour que le chevauchement puisse être dessiné. Utiliser overflow pour contenir les floats peut introduire du rognage ou des barres de défilement ; flow-root fournit la containment des floats sans exiger ce choix. Inspectez aussi les composants englobants si l'image disparaît précisément au bord d'un ancêtre. MDN : Contenir les floats internes.

CSS Shapes a aussi une limite directionnelle : un float à droite permet l'enroulement à sa gauche, et un float à gauche permet l'enroulement à sa droite. Un seul float ne peut pas créer de passages de texte des deux côtés d'une image centrée. Pour cette tâche, un float de bord est l'arrangement supporté. W3C : Comportement des formes CSS et des floats.

Peut-on utiliser cette approche avec Tailwind CSS ?

Oui. Dans un projet Tailwind existant, float-right produit float: right, tandis que float-none supprime le float. Tailwind fournit ces utilitaires ; le navigateur effectue toujours la mise en page du texte. Tailwind CSS : float.

Pour la déclaration de contour, la syntaxe de propriété arbitraire de Tailwind peut exprimer [shape-outside:circle(50%)_border-box] et [shape-margin:16px]. Le trait de soulignement représente l'espace avant border-box. Ce sont des fragments de nom de classe pour un projet Tailwind déjà configuré, pas un remplacement pour le document complet ci-dessus. Préservez les mêmes dimensions, marges, mise en page du conteneur et réinitialisation pour fenêtre étroite lors de la traduction. Tailwind CSS : Ajout de styles personnalisés.

Comment diagnostiquer un enroulement qui semble incorrect ?

Utilisez l'exemple local comme base, puis introduisez vos styles existants un changement à la fois. Cette séquence vérifie les conditions qui déterminent la mise en page :

  1. Confirmez d'abord l'enroulement rectangulaire. Réglez temporairement shape-outside: none. Si le texte passe encore sous l'image, inspectez si l'image est flottée, en position absolue, ou un élément flex/grid direct.
  2. Vérifiez l'ordre du document. Placez le float avant les paragraphes qui doivent s'enrouler autour.
  3. Vérifiez la région d'enroulement. Gardez le float et le contenu des paragraphes dans le même contexte de formatage de bloc ; supprimez un contexte indépendant inutile du conteneur de paragraphe.
  4. Vérifiez le contour. Restaurez le cercle et sa référence border-box explicite. Confirmez que l'image affichée est carrée avant d'appliquer un rognage circulaire.
  5. Vérifiez la gouttière. Augmentez la largeur de la fenêtre et cherchez un rognage sur la carte ou ses ancêtres. Confirmez que la page réserve assez d'espace extérieur pour le débordement.
  6. Vérifiez la mise en page étroite. Redimensionnez à travers le point de rupture de l'exemple et vérifiez que le float et la marge négative se réinitialisent tous les deux.

Ces vérifications suivent les règles documentées pour le placement des floats, les contextes de formatage, et les boîtes de référence de forme. Évitez d'ajouter des sauts de ligne manuels pour réparer des lignes individuelles ; ils lieraient le passage à une taille de fenêtre particulière.

MDN identifie shape-outside comme largement disponible, tout en notant que le support peut varier pour certaines parties de sa syntaxe. Cet exemple utilise la forme circle() documentée. Comparez la page dans les navigateurs Mac que vous visez à supporter, et évaluez le dégagement et la lisibilité plutôt que d'exiger des fins de ligne identiques. Si la déclaration de forme n'est pas disponible, le float conserve l'enroulement rectangulaire. MDN : shape-outside.

Pour la mise en page finale, choisissez la taille de l'image et le débordement ensemble, préservez assez de largeur pour le passage, et gardez la solution de repli empilée. Une fois que ces dimensions fonctionnent, utilisez le contour pour affiner l'espacement autour de l'image. Cela vous donne un paragraphe qui peut se reformater quand son texte ou sa largeur disponible change.

Sources