Om du vill att stycketext ska flöda runt en bild som sträcker sig utanför kortets kant kan du använda float på bilden och en negativ yttre marginal. Lägg till shape-outside för en rundad kontur. I den här handledningen skapar du ett komplett lokalt exempel som du kan öppna i Safari på din Mac.

Vad får text att flöda runt en överlappande bild?

Bilden måste delta i styckets float-layout. CSS float placerar ett element mot ena sidan av behållaren och låter intilliggande text flöda runt det. I det här exemplet gör en högerfloat att texten flödar till vänster om bilden och sedan under den. MDN: float.

Tre val styr resultatet: float skapar textegenskapen, en negativ högermarginal låter bilden sträcka sig utanför behållaren och shape-outside definierar konturen som den intilliggande texten följer. Vanliga floats ger rektangulärt textflöde; en form kan få enskilda rader att följa en cirkel. MDN: shape-outside.

Det räcker inte att flytta bilden visuellt. En absolut positionerad bild tar inte upp något utrymme i det normala flödet, så omgivande element beter sig som om den saknades. En förflyttning ändrar den renderade positionen utan att ordna om det normala dokumentflödet. Därför kan en överlappande bild täcka text när den positioneras med position: absolute eller transform: translateX(...). MDN: position, MDN: Using CSS transforms.

Uppgiften här är avsiktligt specifik: en cirkelformad bild går över högerkanten på ett textkort, och kortets stycken följer cirkelns vänstra kontur. Bilden och styckena tillhör samma textflödesområde.

Skapa ett komplett exempel på din Mac

Skapa en fil med namnet overlap-wrap.html i en vanlig textredigerare för kod. Klistra in hela dokumentet nedan, spara det och öppna det i Safari. Exemplet innehåller en egen abstrakt SVG-bild som en data-URL, så du behöver inte installera några bildfiler, paket eller byggverktyg.

Den float-positionerade bilden visas före styckena som den ska påverka. Placeringen spelar roll eftersom float-positioneringen begränsas av innehåll som kommer tidigare i dokumentet. Om rubriken ligger före bilden kan den också använda kortets hela textbredd. W3C: Visual formatting model.

<!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>

Vid en visningsbredd över 760px är det avsedda resultatet en cirkelformad grafik som sträcker sig in i det högra mellanrummet, med styckesrader som följer dess vänstra sida. Vid 760px eller mindre blir bilden ett centrerat block ovanför styckena. Brytpunkten är ett exempel på ett designval; @media använder de omslutna deklarationerna när frågan matchar. MDN: @media.

Exempelgrafiken är dekorativ, så dess bildelement använder alt="". Om du ersätter den med en grafik som förmedlar information ska du ange ett lämpligt textalternativ. WHATWG skiljer mellan dekorativa bilder och bilder vars information behöver en motsvarighet i text. WHATWG: Requirements for providing text to act as an alternative for images.

Hur väljer du överlappning och avstånd till texten?

Börja med bildens position och justera sedan konturen. En högerfloat placeras med hjälp av sin marginalruta. I det här exemplet placerar den negativa högermarginalen bildens högra kant 88px utanför kortets innehållskant. Kortet har 24px högermarginalutfyllnad, så bilden sticker ut 64px utanför den vita bakgrunden. Måtten är beräknade för det här exemplet och anges i CSS-pixlar. W3C: Positioning the float.

Mått Exempelvärde Beräkning eller syfte
Bildbredd 240px Diametern på den visade cirkeln
Förskjutning utåt från innehållskanten 88px Beloppet för den negativa högermarginalen
Kortets utfyllnad 24px Utrymmet mellan innehållskanten och bakgrundskanten
Synligt utskjutande utanför bakgrunden 64px 88 − 24
Bildbredd kvar innanför innehållsområdet 152px 240 − 88
Reserverat utrymme vid rektangulär reservlösning 168px 240 − 88 + 16, inklusive vänstermarginalen

I din egen layout beräknar du den negativa marginalens belopp som önskat utskjutande plus behållarens högra utfyllnad. Ett utskjutande på 40px med 24px utfyllnad kräver till exempel en högermarginal på -64px. Kontrollera att textutrymmet fortfarande räcker varje gång du förstorar bilden eller minskar behållarens bredd.

Den cirkelformade versionen använder shape-outside: circle(50%) border-box så att geometrin följer den kvadratiska bildrutan. Det är användbart att uttryckligen välja border-box här eftersom de asymmetriska marginalerna ändrar marginalrutan. Utan en uttrycklig referensruta använder en grundform som standard margin-box. MDN: Basic shapes with shape-outside.

shape-margin: 16px lägger till utrymme runt textflödeskonturen. Den positiva vänstermarginalen skapar plats för det mellanrummet på den sida som vetter mot texten. Former, inklusive sina formmarginaler, klipps till floatens marginalruta; att bara öka shape-margin kan inte utöka textflödesområdet hur mycket som helst. Den negativa högermarginalen klipper också formen på utsidan, där det här exemplet inte har någon stycketext. W3C: CSS Shapes Module Level 1.

För en rektangulär bild ändrar du border-radius till 0, shape-outside till none och shape-margin till 0. Behåll float och marginaler. Då får du raka textflödeskanter med samma placering utåt. Om du bara tar bort formen men behåller den cirkelformade beskärningen får du en cirkelformad bild med rektangulärt fritt utrymme för text.

Vilka gränser för behållaren påverkar textflödet?

Kortet använder display: flow-root för att skapa en blockformateringskontext som innehåller floaten vertikalt. Då räknas bilden in i kortets höjd även när texten är kort. Det gör också att textflödesområdet hålls oberoende av externa floats. MDN: Block formatting context.

Låt styckena ligga i normalt blockflöde inom det området. Om bilden är ett direkt flex- eller gridobjekt ger dess float inte den här styckeomflytningen. Om en separat styckesbehållare får en egen blockformateringskontext utesluts på samma sätt den externa floaten från behållarens innehåll. Ett yttre grid kan placera hela kortet; kortets inre kan fortfarande använda flödeslayout. MDN: Block formatting context.

Kontrollera beskärning separat. Exemplet låter overflow vara synlig så att det utskjutande kan ritas ut. Om overflow används för att innehålla floats kan det uppstå beskärning eller rullningslister; flow-root innehåller floats utan att kräva det valet. Granska även omgivande komponenter om bilden försvinner precis vid kanten på en överordnad komponent. MDN: Containing internal floats.

CSS Shapes har också en riktningsgräns: en högerfloat tillåter textflöde på vänster sida, och en vänsterfloat tillåter det på höger sida. En enda float kan inte skapa textpassager på båda sidor om en centrerad bild. För den här uppgiften är en float vid kanten den stödda lösningen. W3C: CSS Shapes and float behavior.

Kan du använda den här metoden med Tailwind CSS?

Ja. I ett befintligt Tailwind-projekt ger float-right float: right, medan float-none tar bort floaten. Tailwind tillhandahåller dessa verktygsklasser; det är fortfarande webbläsaren som utför textlayouten. Tailwind CSS: float.

För konturdeklarationen kan Tailwinds syntax för godtyckliga egenskaper uttrycka [shape-outside:circle(50%)_border-box] och [shape-margin:16px]. Understrecket representerar mellanslaget före border-box. Det här är klassnamnsfragment för ett redan konfigurerat Tailwind-projekt, inte en ersättning för hela dokumentet ovan. Behåll samma mått, marginaler, behållarlayout och återställning för smala fönster när du överför det. Tailwind CSS: Adding custom styles.

Hur felsöker du ett felaktigt textflöde?

Använd det lokala exemplet som utgångspunkt och inför sedan dina befintliga stilar en ändring i taget. Följ den här ordningen för att kontrollera villkoren som styr layouten:

  1. Kontrollera först rektangulärt textflöde. Ställ tillfälligt in shape-outside: none. Om texten fortfarande fortsätter under bilden kontrollerar du om bilden har float, är absolut positionerad eller är ett direkt flex-/gridobjekt.
  2. Kontrollera dokumentordningen. Placera floaten före styckena som ska flöda runt den.
  3. Kontrollera textflödesområdet. Låt floaten och styckeinnehållet ligga i samma blockformateringskontext; ta bort en onödig separat kontext från styckesbehållaren.
  4. Kontrollera konturen. Återställ cirkeln och dess uttryckliga referens till border-box. Kontrollera att den visade bilden är kvadratisk innan du beskär den till en cirkel.
  5. Kontrollera mellanrummet. Öka visningsbredden och leta efter beskärning av kortet eller dess överordnade komponenter. Kontrollera att sidan reserverar tillräckligt med yttre utrymme för det utskjutande.
  6. Kontrollera den smala layouten. Ändra storlek genom exemplets brytpunkt och kontrollera att både floaten och den negativa marginalen återställs.

Kontrollerna följer de dokumenterade reglerna för float-placering, formateringskontexter och formreferensrutor. Undvik att lägga till manuella radbrytningar för att justera enskilda rader; då skulle texten bli bunden till en viss fönsterstorlek.

MDN anger att shape-outside har brett stöd, men påpekar att stödet kan variera för vissa delar av syntaxen. Det här exemplet använder den dokumenterade formen circle(). Jämför sidan i de Mac-webbläsare du tänker stödja och bedöm avstånd och läsbarhet i stället för att kräva identiska radslut. Om formdeklarationen inte stöds behåller floaten ett rektangulärt textflöde. MDN: shape-outside.

Välj bildstorlek och utskjutande tillsammans för den färdiga layouten, se till att textpassagen får tillräcklig bredd och behåll den staplade reservlösningen. När måtten fungerar kan du finjustera avståndet runt bilden med konturen. Då kan stycket flöda om när texten eller den tillgängliga bredden ändras.

Källor