Html - How can I wrap text around a heart shape (not just a circle)?

mountainclimber11
October 31, 2023
284 views
3 votes
3 Answers

I have an image of a heart that is square image and I’d like the text to wrap around the heart in a heart shape/pattern so it hugs close to the heart in the image. The issue I think is that the heart is heart shaped (how I want the text to wrap around on one side) and the image itself is square/square-ish so when I use border-radius: 35%; and shape-outside: margin-box; for example, the text wraps to a circle around the image, not the heart in the image or in a heart pattern. (Difficult to explain, but basically I want it to look professional with text outlining the heart, not the image necessarily.)

Possible solution: modifying the image so it is/is more heart-shaped, but I use this image a lot so I’d like to not do that because it might mess up some other stuff.

Here is what it looks like now at the top of this website: confluenceinfinite.org. It’s not terrible, but not professional enough for me. The text outlines a circle, not a heart shape on the right side. I think it would be much cooler looking if it were tighter to the heart.

What am I missing?

* {
  padding: 0;
  box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  border-radius: 35%;
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left; /* this keeps the text wrapping around the heart as a cirlce */
  shape-outside: margin-box;
}

<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>

Edit: I am not a css/html/markup expert at all.

Tags: css html

Answers

shape-outside can accept a custom polygon or a path (like the the ones that conform a .svg):

shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");

If you create any of those, resembling your target shape, the text would wrap around it like you want.

Also, shape-outside can be a .png image with an alpha channel (that is, transparent and opaque areas). The text will wrap around the opaque ones – just get a heart-shaped one and add it to your css:

shape-outside: url(/images/your-heart-image.png);

 * {
  padding: 0;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  border-radius: 35%;
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  shape-margin: 15px;
  float: left;
  /* this keeps the text wrapping around the heart */
  shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Heart-SG2001-transparent.png/1200px-Heart-SG2001-transparent.png);
}

<img id="black_heart_globe_top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Heart-SG2001-transparent.png/1200px-Heart-SG2001-transparent.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>

Adjusting the border radius property to give the bottom right a larger value does nicely.

* {
  padding: 0;
  box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  border-radius: 35% 35% 200%;
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left; /* this keeps the text wrapping around the heart as a cirlce */
  shape-outside: margin-box;
}

<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>

Use shape-outside: polygon(…)` to have a custom shape for your text to wrap around.

EG:

* {
  padding: 0;
  box-sizing: border-box;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 10px 5px 10px;
  float: left; /* this keeps the text wrapping around the heart as a cirlce */
  shape-outside: polygon(50% 100%, 0% 35%, 10% 10%, 40% 0%, 60% 0%, 90% 10%, 100% 35%);
}

<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>

Tip: Basic shapes + a tool for creating your own polygon here: https://bennettfeely.com/clippy/

Alternatively you could use shape-outside: url(...); to use the alpha channel of the image itself as path. It won’t work in this demo because of CORs but the code you need is

shape-outside: url("https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png");

shape-outside:polygon() and shape-outside:<image> are supported in all modern browsers and many old ones.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I wrap text around a heart shape (not just a circle)?

Answers