Useful Stuff About:

Text Wrapping Around a custom shape

This page demonstrates the process of making text wrap around a custom shape (instead of straight edge wrap).

Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example. Typically text will wrap around an image with a straight edge like this example.

Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. The image is linked to another webpage but currently the script that makes all of this work ALSO makes the text wrapping around the image clickable - but's something we can live with as long as the link works. The script analyzes your image and creates short horizontal strips with different widths (yellow strips in this example - YOURS won't have the yellow strips) called with class="sandbag". These sandbag divs are floated left or right which forces the text to wrap around the sandbag div. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. The image is linked to another webpage but currently the script that makes all of this work ALSO makes the text wrapping around the image clickable - but's something we can live with as long as the link works. The script analyzes your image and creates short horizontal strips with different widths (yellow strips in this example - YOURS won't have the yellow strips) called with class="sandbag". These sandbag divs are floated left or right which forces the text to wrap around the sandbag div. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. The image is linked to another webpage but currently the script that makes all of this work ALSO makes the text wrapping around the image clickable - but's something we can live with as long as the link works. The script analyzes your image and creates short horizontal strips with different widths (yellow strips in this example - YOURS won't have the yellow strips) called with class="sandbag". These sandbag divs are floated left or right which forces the text to wrap around the sandbag div.

Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides. Using Javascript, CSS, and .png files, you can also have text wrap around custom shaped images. The limitations are that you can only wrap text around EITHER the left OR right, but NOT both sides.

How do you do this?

Create a .png of your image with transparency around the edge of the visible part.
Insert the image on your webpage as you would any normal image IN FRONT OF THE TEXT without the use of any wrapping div or figure tag. So your HTML code will look something like this

<img src="project#/images/photoname.png" width="###" height="###" alt=""/>Paragraph text should be AFTER the image. Paragraph text should be AFTER the image.
Add class="floatLeft wrap" or class="floatRight wrap" so the HTML code NOW looks like this:

<img src="project#/images/photoname.png" width="###" height="###" alt="" class="floatRight wrap"/>Paragraph text should be AFTER the image. Paragraph text should be AFTER the image.
Add id="uniqueID" so the HTML code NOW looks like this

<img src="project#/images/photoname.png" width="###" height="###" alt="" class="floatRight wrap" id="uniqueID"/>Paragraph text should be AFTER the image. Paragraph text should be AFTER the image. 

where each photo must have a UNIQUE ID

Make sure to include these lines in the head of your html file



<!--ONLY ONCE - check that you don't already have this in your code-->
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>


<!--REQUIRED - must be below the minified.js line and just above the </head> tag-->
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/shapes-polyfill.min.js"></script>

Here's the CSS code - copy, paste, and adjust in YOUR CSS file.



.floatRight {/*YOU MAY ALREADY HAVE THIS SO don't copy this in such a case*/
	float:right;
}
.floatLeft {/*YOU MAY ALREADY HAVE THIS so don't copy this in such a case*/
	float:left;
}


.wrap {
	-webkit-shape-margin:0.2rem;/*This determines how close you want the text to be to the image*/
	-moz-shape-margin:0.2rem;/*rem stands for root em - you are changing the size relative to the size of 1em of the body (root) css instead of relative to the font-size of the parent container*/
	-ms-shape-margin:0.2rem;
	-o-shape-margin:0.2rem;
	shape-margin:0.2rem;
}
#uniqueID {/*Repeat this blcok for all image you want text to wrap around*/
	-webkit-shape-outside: url("../images/photoFileName.png");/*IMPORTANT!!!! - the URL path is relative to the CSS file, NOT the html file*/
	-moz-shape-outside: url("../images/photoFileName.png");
	-ms-shape-outside: url("../images/photoFileName.png");
	-o-shape-outside: url("../images/photoFileName.png");
    shape-outside: url("../images/photoFileName.png");
}

Test on real wesbite - not locally to see the effect

Main problems for failing

Not using a .png with transparency
CSS path to image must be relative to CSS, not to HTML