Para fazer o texto de um parágrafo contornar uma imagem que ultrapassa a borda de um cartão, flutue a imagem e use uma margem externa negativa. Adicione shape-outside para criar um contorno curvo. Este tutorial cria um exemplo local completo que você pode abrir no Safari do Mac.

O que faz o texto contornar uma imagem sobreposta?

A imagem precisa participar do layout flutuante do parágrafo. O CSS float posiciona um elemento junto a um dos lados do contêiner e permite que o texto adjacente flua ao seu redor. Neste exemplo, uma flutuação à direita deixa o texto fluir à esquerda e, em seguida, abaixo da imagem. MDN: float.

Três escolhas controlam o resultado: a flutuação cria o comportamento de contorno, uma margem direita negativa permite que a imagem ultrapasse o contêiner e shape-outside define o contorno seguido pelo texto próximo. Flutuações comuns criam um contorno retangular; uma forma pode fazer cada linha seguir um círculo. MDN: shape-outside.

Mover uma imagem visualmente não é suficiente. Uma imagem posicionada de forma absoluta não ocupa espaço no fluxo normal, então os elementos ao redor se comportam como se ela não existisse. Uma translação altera a posição renderizada sem reorganizar o fluxo normal do documento. Esses comportamentos explicam por que uma imagem sobreposta pode cobrir o texto quando posicionada com position: absolute ou transform: translateX(...). MDN: position, MDN: Using CSS transforms.

A tarefa aqui é específica de propósito: uma imagem circular ultrapassa a borda direita de um cartão de texto, e os parágrafos do cartão acompanham o contorno esquerdo do círculo. A imagem e os parágrafos pertencem à mesma região de contorno.

Crie um exemplo completo no seu Mac

Em um editor de código de texto simples, crie um arquivo chamado overlap-wrap.html. Cole o documento completo abaixo, salve-o e abra-o no Safari. O exemplo inclui sua própria imagem SVG abstrata como URL de dados, portanto não há arquivos de imagem, pacotes ou ferramentas de compilação para instalar.

A imagem flutuante aparece antes dos parágrafos que deve afetar. Essa posição é importante porque o posicionamento flutuante é limitado pelo conteúdo que aparece antes no documento. Manter o título antes da flutuação também permite que ele ocupe toda a largura de texto do cartão. 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>

Em uma área de visualização com mais de 760px de largura, o resultado esperado é um gráfico circular que avança para o espaço à direita, com as linhas dos parágrafos acompanhando seu lado esquerdo. Com 760px ou menos, a imagem se torna um bloco centralizado acima dos parágrafos. O ponto de quebra é uma escolha ilustrativa de design; @media aplica as declarações internas quando a consulta correspondente é verdadeira. MDN: @media.

O gráfico de exemplo é decorativo, por isso seu elemento de imagem usa alt="". Se você o substituir por um gráfico que comunica informações, forneça um texto alternativo apropriado. A WHATWG distingue imagens decorativas daquelas cujas informações precisam de uma equivalente em texto. WHATWG: Requirements for providing text to act as an alternative for images.

Como escolher a sobreposição e o espaço entre imagem e texto?

Comece pela posição da imagem e, em seguida, ajuste o contorno. Uma flutuação à direita é posicionada usando sua caixa de margem. Neste exemplo, a margem direita negativa coloca a borda direita da imagem 88px além da borda do conteúdo do cartão. O cartão tem 24px de preenchimento à direita, deixando 64px da imagem para além do fundo branco. Essas dimensões são derivadas para este exemplo e medidas em pixels CSS. W3C: Positioning the float.

Quantidade Valor de exemplo Cálculo ou finalidade
Largura da imagem 240px Diâmetro do círculo exibido
Deslocamento para fora da borda do conteúdo 88px Módulo da margem direita negativa
Preenchimento do cartão 24px Espaço entre a borda do conteúdo e a borda do fundo
Parte visível além do fundo 64px 88 − 24
Largura da imagem que permanece dentro da área de conteúdo 152px 240 − 88
Reserva retangular de fallback 168px 240 − 88 + 16, incluindo a margem esquerda

No seu próprio layout, calcule o módulo da margem negativa somando o avanço desejado ao preenchimento à direita do contêiner. Por exemplo, para um avanço de 40px com preenchimento de 24px, use uma margem direita de -64px. Verifique novamente a largura de texto restante sempre que aumentar a imagem ou reduzir a largura do contêiner.

A versão circular usa shape-outside: circle(50%) border-box para que a geometria acompanhe a caixa quadrada da imagem. Especificar border-box é útil aqui porque as margens assimétricas alteram a caixa de margem. Sem uma caixa de referência explícita, uma forma básica usa margin-box como padrão. MDN: Basic shapes with shape-outside.

shape-margin: 16px adiciona espaço ao redor do contorno usado para o texto. A margem esquerda positiva reserva espaço para esse intervalo no lado voltado para o texto. As formas, incluindo suas margens, são recortadas pela caixa de margem da flutuação; aumentar apenas shape-margin não pode estender indefinidamente a área de contorno. A margem direita negativa também recorta a forma no lado externo, onde este exemplo não tem texto de parágrafo. W3C: CSS Shapes Module Level 1.

Para uma imagem retangular, altere border-radius para 0, shape-outside para none e shape-margin para 0. Mantenha a flutuação e as margens. Isso cria um contorno de lados retos com o mesmo posicionamento para fora. Remover apenas a forma e manter o recorte circular deixa uma imagem circular com espaço retangular para o texto.

Quais limites do contêiner afetam o contorno?

O cartão usa display: flow-root para estabelecer um contexto de formatação de bloco que contém verticalmente a flutuação. Isso permite que a altura do cartão leve a imagem em conta mesmo quando o texto é curto. Também mantém essa região de contorno independente de flutuações externas. MDN: Block formatting context.

Mantenha os parágrafos no fluxo normal de blocos dentro dessa região. Se a imagem for um item flex ou grid direto, sua flutuação não criará esse arranjo de contorno para os parágrafos. Da mesma forma, dar ao contêiner separado dos parágrafos seu próprio contexto de formatação de bloco exclui a flutuação externa do conteúdo desse contêiner. Um grid externo pode posicionar o cartão inteiro; o interior do cartão ainda pode usar o fluxo normal. MDN: Block formatting context.

Verifique o recorte separadamente. O exemplo deixa o overflow visível para que a parte excedente possa ser renderizada. Usar overflow para conter flutuações pode introduzir recortes ou barras de rolagem; flow-root permite conter flutuações sem exigir essa escolha. Inspecione também os componentes ancestrais se a imagem desaparecer exatamente na borda de um deles. MDN: Containing internal floats.

O CSS Shapes também tem um limite direcional: uma flutuação à direita permite o contorno à esquerda, e uma flutuação à esquerda permite o contorno à direita. Uma única flutuação não pode criar passagens de texto nos dois lados de uma imagem centralizada. Para esta tarefa, a opção compatível é uma flutuação junto à borda. W3C: CSS Shapes and float behavior.

Você pode usar essa abordagem com Tailwind CSS?

Sim. Em um projeto Tailwind existente, float-right produz float: right, enquanto float-none remove a flutuação. O Tailwind fornece esses utilitários; o navegador ainda faz o layout do texto. Tailwind CSS: float.

Para a declaração do contorno, a sintaxe de propriedade arbitrária do Tailwind pode expressar [shape-outside:circle(50%)_border-box] e [shape-margin:16px]. O sublinhado representa o espaço antes de border-box. Esses são fragmentos de nomes de classe para um projeto Tailwind já configurado, não um substituto para o documento completo acima. Preserve as mesmas dimensões, margens, layout do contêiner e redefinição para janelas estreitas ao traduzi-lo. Tailwind CSS: Adding custom styles.

Como diagnosticar um contorno incorreto?

Use o exemplo local como referência e, em seguida, introduza os estilos existentes uma mudança de cada vez. Esta sequência verifica as condições que determinam o layout:

  1. Confirme primeiro o contorno retangular. Defina temporariamente shape-outside: none. Se o texto ainda passar por baixo da imagem, verifique se ela está flutuante, posicionada de forma absoluta ou se é um item flex/grid direto.
  2. Verifique a ordem no documento. Coloque a flutuação antes dos parágrafos que devem contorná-la.
  3. Verifique a região de contorno. Mantenha a flutuação e o conteúdo dos parágrafos no mesmo contexto de formatação de bloco; remova do contêiner dos parágrafos qualquer contexto independente desnecessário.
  4. Verifique o contorno. Restaure o círculo e sua referência explícita border-box. Confirme que a imagem exibida é quadrada antes de aplicar um recorte circular.
  5. Verifique o espaço à direita. Aumente a largura da janela e procure recortes no cartão ou em seus ancestrais. Confirme que a página reserva espaço externo suficiente para a parte excedente.
  6. Verifique o layout estreito. Redimensione a janela passando pelo ponto de quebra do exemplo e confirme que a flutuação e a margem negativa são redefinidas.

Essas verificações seguem as regras documentadas para posicionamento de flutuações, contextos de formatação e caixas de referência de formas. Evite adicionar quebras de linha manuais para corrigir linhas individuais; elas vinculariam o texto a um tamanho específico de janela.

A MDN identifica shape-outside como amplamente disponível, embora observe que o suporte pode variar em partes de sua sintaxe. Este exemplo usa a forma documentada circle(). Compare a página nos navegadores do Mac que você pretende oferecer suporte e avalie o espaço e a legibilidade, em vez de exigir que as linhas terminem exatamente nos mesmos pontos. Se a declaração da forma não estiver disponível, a flutuação mantém o contorno retangular. MDN: shape-outside.

Para finalizar o layout, escolha em conjunto o tamanho da imagem e o avanço, preserve largura suficiente para o trecho de texto e mantenha o fallback empilhado. Quando essas dimensões funcionarem, use o contorno para refinar o espaçamento ao redor da imagem. Assim, o parágrafo pode se reorganizar quando o texto ou a largura disponível mudar.

Fontes