Member Avatar for suavedesign

How can i wrap my text around the image on this page? it's using a float, but i want it to wrap around the img of the hand.

thanks

  • 4 Contributors
  • 6 Replies
  • 282 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by suavedesign

Dani AI

Generated

A practical, modern fix: use CSS Shapes so the paragraph actually hugs the hand outline instead of sitting against a rectangular box. This keeps the text as real HTML (no rasterizing) and is much less fiddly than breaking content into many positioned pieces. CSS Shapes are implemented with shape-outside on a floated element. (developer.mozilla.org)

Example (basic, ready to adapt):

<img src="hand.png" class="hand" alt="hand illustration">

<p>Long paragraph text that should wrap around the hand...</p>
.hand {
  float: left;
  width: 240px;              /* give the float a size */
  shape-outside: url('hand.png');
  shape-image-threshold: 0.1; /* how much alpha counts as "solid" */
  shape-margin: 12px;        /* breathing room between shape & text */
  display: block;
}

/* graceful fallback for older browsers */
@supports not (shape-outside: circle(50%)) {
  .hand { float: left; margin-right: 12px; } /* simple rectangular wrap */
}

Notes and quick troubleshooting: the image used by shape-outside: url() should have a clean alpha channel (transparent background) or use a polygon/path if you want to hand-author the contour; shape-image-threshold controls how the alpha is interpreted. Browsers generally support CSS Shapes now, but older engines (IE11, some legacy mobile/mini browsers) do not — test with Can I Use and use the @supports pattern above for progressive enhancement. Also, if the image is hosted cross-origin the browser requires appropriate CORS headers for the alpha data to be read; if visual corners look wrong, pair clip-path (or an SVG clip) with the same polygon/path so the visual cut matches the wrapping path. (docs1.w3cub.com)

Context: — try this first. It avoids the manual positioning and discussed and is less destructive than baking text into the pixels (the server-side/image text option mentioned is still an option when supporting very old browsers).

Recommended Answers

All 6 Replies

Member Avatar for EvolutionFallen

Not sure I understand your meaning of "wrap around the image". Do you mean to put the text on top of the image?

Member Avatar for suavedesign

i mean that it should flow around the hand, instead of being aligned in a straight box

Member Avatar for JorgeM

It does seem to be flowing around the hand at this moment. The image itself is a rectagle so you'd have to break the text into multiple elements and position them as best as you can to mimic flowing around a non-rectangle object.

Edited by JorgeM
Member Avatar for EvolutionFallen

If I'm understanding you correctly, then yes, you would need to follow JorgeM's instructions. Keep in mind that for most intents and purposes, elements in a browser are all rectangles! Your image takes up a full rectengle, even if it doesn't look like there's anything in the bottom-right corner. So the text will float along the straight edge of the box.

If you want the text to look like it's fitting the contour of the hand in the image, you'll need to position the text accordingly manually. There are a number of ways to do this. You can use a graphics program to type the text into the image, but then this text can't change without changing the whole picture, and you lose the SEO value of the content. Another option is to use absolute positioning to place the text just so, but you'll need to fiddle around with this manually.

Honestly making the text part of the image is probably your best and easiest bet.

Member Avatar for jimmyyy

This VB.NET imaging control library does not just allow you to draw text on images, it also offers flexible settings for you to adjust the text properties, such as font type, font size, font style, and brush color, etc. After all the editing, you can directly save the images to your local files for future processing.

Member Avatar for suavedesign

Thanks for all your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.