Web Development
Shape Outside URL Redux – HTML & CSS – SitePoint Forums
I’m starting a new thread on <shape-outside: URL> since my original thread is certifiably jinxed because of my inexplicable inability to get one graphic on two different servers to display and I don’t want the whole thread to be my rant. 
I want to explain something about the image: I’ve named her ”Lucy” and she does indeed look like the prow of a ship but I made her image long so that I could fit in the content. I expect to do serious editing of my content in which I’ll pare it down by half and have a length certain to crop the image so she comes in for a graceful landing.
I made a start. Predictably it doesn’t work. I used the Google Developer’s blog as my very rough guide. All help will be appreciated. Thanks friends.
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>99 <shape-outside: polygon> by semicodin ᰄ </title>
<style>
body {
width: 1080px;
margin: 0; /* note this doesn’t work with FLOATS :( */
padding: 0;
border: 0;
outline: 0;
color: black;
font-size: 100%;
background: #ffffee;
vertical-align: text-top;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.02;
font-weight: 600;
}
p {line-height: 1}
* {box-sizing: border-box;}
.undr {text-decoration: underline}
.main {
margin: 7rem 3.13rem 7rem 3.13rem;
background-color: #ffffee;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.02;
font-weight: 600;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.lucy {
float: left;
width: 620px;
height: 1690px;
shape-margin: 2rem;
margin: 0;
shape-image-threshold: 0.5;
shape-outside: url("https://lh3.googleusercontent.com/pw/AP1GczPgNSCdtdELibu8_s9LmgZPdqtY8HkrvtSu4Gdi71hb96Sd6JhJWNCPvXgSgobQVqHg6enGsPNfeMuDCRpoD_zJVNfOokDMQC4gJp8Uoh6SvgAcrQ=w620-h1690" alt="");
}
.contact {
margin: 0;
padding: 0rem 0rem 7rem 0rem;
background-color: #d4d4ff;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.henpen {
text-align: center;
color: black;
margin: 1rem 0rem 0rem 11rem;
font-size: 4rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
.here {
color: black;
text-align: center;
padding-top: 5rem;
margin: 0rem 0 1rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1.1;
font-weight: bold;
}
.thanks {
color: black;
text-align: center;
margin: 0rem 4rem 1rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.quest {
color: black;
text-align: center;
margin: 2.25rem 2rem 2.25rem 2rem;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.05;
font-weight: bold;
}
.end {
color: black;
text-align: center;
margin: 1rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
a:active {color: blue}
a:hover {color: crimson}
a:link {color: blue}
a:visited {color: blue}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬1*/
</style>
</head>
<body>
<img class="lucy" src="https://lh3.googleusercontent.com/pw/AP1GczPgNSCdtdELibu8_s9LmgZPdqtY8HkrvtSu4Gdi71hb96Sd6JhJWNCPvXgSgobQVqHg6enGsPNfeMuDCRpoD_zJVNfOokDMQC4gJp8Uoh6SvgAcrQ=w620-h1690" alt="">
<div class="main">
<span class="blu"><a href="https://web.dev/articles/shapes-getting-started">This short intro will not get you started with <shape‑outside: URL> — for that you need to read Razvan Caliman’s 23-Page Primer</a> on the <shape‑outside> property here.</span> I’ve included the entire article as a .PDF in your .ZIP file! My small contributoon is to put you in the way of tools you will need to wrap text around an image, and what graphic types will not work with the <shape‑outside: URL> property.</span>
Briefly, the CSS <shape‑outside> property allows you to structure text flow around a user-defined shape that has transparency: .PNGs and .SVGs work beautifully; <span class="undr">.JPGs and .GIFs will not work with <shape-outside></span>.
<p></p><p></p>
If your image is a .JPG or a .GIF I recommend converting it into a .PNG. While you can use any of dozens of free online graphics converters you will inevitably need some skill using a GRAPHICS EDITOR to erase the portion of your graphic that the text will be flowing around. I highly recommend the Android App <a href="https://play.google.com/store/apps/details?id=com.iudesk.android.photo.editor>dev.macgyver’s FREE ”PHOTO EDITOR”</a> however there is a steep learning curve. If you don’t have an editor — or just very little experience — there is also a free Android app you can use perfect for beginners: Check out <a href="https://play.google.com/store/apps/details?id=com.handycloset.android.eraser">handycloset’s easy! ”BACKGROUND ERASER”</a>.
<p></p><p></p>
Briefly there are four types of <shape‑outside> properties: CIRCLE, ELLIPSE, POLYGON, and URL (an image available on the internet, supplied as a path).
<p></p><p></p>
We’ll call our silouette “Lucy”. For the purposes of Lucy we’re using a “URL.” path which tells the browser to extract a shape from Lucy’s link <i>automatically based upon her transparency</i>. The goal is to move the text around the solid portion of Lucy”s profile — her hat, face, neck & chest — allowing a 2rem margin. These are the <i>primary</i> building blocks for <shape‑outside> so begin with the tools I’ve suggested you try and use Razvan’s easy-to-follow PDF for Getting Started with <shape‑outside>. There are dozens of additional sites that can help you as well.
<div class="henpen">semicodin</div>
</div>
</div> <!-- Closing MAIN -->
<div class="contact">
<div class="here">
<a href="https://semicodin.nekoweb.org/comingsoon.html">Code Here</a>
</div>
<div class="thanks">
This code courtesy of the Sitepoint Forums
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a><span class="clambu35">!</span><br>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a><br>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html>
