Shape Outside URL Redux

HTML & CSS
1

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. :unhappy:

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 &lt;shape-outside: polygon&gt; by semicodin &#7172; </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 &lt;shape&#8209;outside: URL&gt; &mdash; for that you need to read Razvan Caliman&rsquo;s 23-Page Primer</a> on the &lt;shape&#8209;outside&gt; property here.</span> I&rsquo;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 &lt;shape&#8209;outside: URL&gt; property.</span> 

Briefly, the CSS &lt;shape&#8209;outside&gt; 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 &lt;shape-outside&gt;</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&rsquo;s FREE &rdquo;PHOTO EDITOR&rdquo;</a> however there is a steep learning curve. If you don&rsquo;t have an editor &mdash; or just very little experience &mdash; 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&rsquo;s easy! &rdquo;BACKGROUND ERASER&rdquo;</a>.
<p></p><p></p>
Briefly there are four types of &lt;shape&#8209;outside&gt; properties: CIRCLE, ELLIPSE, POLYGON, and URL (an image available on the internet, supplied as a path). 
<p></p><p></p>
We&rsquo;ll call our silouette &ldquo;Lucy&rdquo;. For the purposes of Lucy we&rsquo;re using a &ldquo;URL.&rdquo; path which tells the browser to extract a shape from Lucy&rsquo;s link <i>automatically based upon her transparency</i>. The goal is to move the text around the solid portion of Lucy&rdquo;s profile &mdash; her hat, face, neck &amp; chest &mdash; allowing a 2rem margin. These are the <i>primary</i> building blocks for &lt;shape&#8209;outside&gt; so begin with the tools I&rsquo;ve suggested you try and use Razvan&rsquo;s easy-to-follow PDF for Getting Started with &lt;shape&#8209;outside&gt;. 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>
1 Like
2

You cannot use the googleusercontent URL for shape-outside. It needs to be an ordinary URL of a PNG image, starting http and finishing .png. It cannot be a relative URL to a file in your local memory and the server must allow access to the file if it is a cross-origin request.

2 Likes
3

You also left the alt attribute in the background image source.

shape-outside: url("https://lh3.googleusercontent.com/pw/AP1GczPgNSCdtdELibu8_s9LmgZPdqtY8HkrvtSu4Gdi71hb96Sd6JhJWNCPvXgSgobQVqHg6enGsPNfeMuDCRpoD_zJVNfOokDMQC4gJp8Uoh6SvgAcrQ=w620-h1690" alt="");

That alt=“” cannot live there as that is an html attribute not css.

I copied your age into my codepen assets and fixed the above typo and it works out of the box.

You really need to find some reliable hosting where you can store your own assets and pages.

You can store assets in codepen but that only on a pro (paid for) account like mine.

2 Likes
4

Archibald! Where is this fact published? I’m asking because this is the solution to my other thread and the intelligence is ((huge))! You just made my day my friend! :biggrin: Where is this authority published?

And why then were we able to wrap around the little graphic in my political cheatsheet where you first turned me on to shape-outside: polygon? That was a Google link Archibald.

5

Ah! Right into my toolbox. Thank you Paul. Yes I can store images in my nekoweb account. I have 500mb of space which is more than enough for my needs. :weee: Let me take a look at your Codepen.

6

If I remember correctly I believe you used a polygon not an image as the shape-outside value.

7

Because shape-outside: polygon does use a URL.

I am not aware of it published anywhere.

Note when you have uploaded the web page to a server, the shape-outside URL can be a relative URL…

8

You’re absolutely correct. But the significsnce is huge Archibald: I might be able to use <shape-outside: polygon> on my thomas merton piece here.

Couldn’t I? Can we render him as a polygon? Paul? Or is polygon not suited to a shape with many complex angles & slopes such as Merton?

9

Then . . . they all use a URL. Okay! Yes they’d have to wouldn’t they? (it’s early out here in CA :tongue:). Okay. A bit deep for me at this hour but I’ve got it. So you’re exercising your professional judgement when you say that images must be hosted with a direct link? It’s alright if there’s no published instruction on Google Photos, I have great respect for you Archibald but this has to be accurate because it’s going in my pages. Your judgement?

10

What do you mean “relative”? EDIT: Google is my friend:

A relative URL is a URL that only includes the path . The path is everything that comes after the domain, including the directory and slug. Because relative URLs don’t include the entire URL structure, it is assumed that when linking a relative URL, it uses the same protocol, subdomain and domain as the page it’s on.

So this is like when we see
<img src="/image.png">?

11

See:
https://www.w3schools.com/html/html_filepaths.asp

1 Like
12

That’s deep. :eek:

13

You could make a polygon but it would take a bit of work to work out all the co-ordinates. Perhaps an easier way would be to convert the image into a data uri and then you won’t run into the cross origin errors (CORS) that shape urls must have.

As a demo I converted your picture of Lucy into a data uri for use in the shape outside url. The html Lucy is your google user content and displays ok.

You can convert images to data URIs here.

https://websemantics.uk/tools/image-to-data-uri-converter/

The downside is that you have to have all the image data in the css. The plus side is that you get no data requests for that image as its stored as raw data in the css.

1 Like
14

Paul I didn’t want you to go to this much trouble. Look I’m rapidly coming to the conclusion that <shape-outside> — for all that I like it (and I do) — is beyond my reach. I don’t even have $4/month to get a cheap Digital Ocean hosting account. You have no concept of just how poor I am. :sleepy: I thought I could use my Google Photos account but I see now that the technical requirements are only available to people with paid hosting.

Well. At least Archibald handed me my walking papers in one brutal post instead of my flailing around in a miasma of confusion wondering why a perfectly good transparent PNG wouldn’t wrap. Money. Always money. My free site at Nekoweb.org is something called a “static site.” I don’t know what that means but for me it means I can’t do any text wrapping. Thank you anyway Paul. Totally depressed . . .

15

If you upload your .html file and lucy.png to the same folder within Nekoweb.org, then I would expect the text would wrap around the shape of lucy.png. This is because there would be no cross-origin request. All you would need is:

shape-outside: url(lucy.png);

I don’t think it would be difficult to work out polygon coordinates.

1 Like
16

I’ll try it. Thank you Archibald.

17

Try:

margin: 0 10px 0 0;
shape-outside: polygon(70% 0, 100% 5%, 100% 12%, 92% 17%, 97% 22%, 90% 34%, 65% 37%, 58% 42%, 75% 47%, 81% 55%, 78% 66%, 72% 73%, 55% 81%, 46% 85%, 0 98%, 0 100%);

(OK in Chrome but there seems to be a bug in Firefox)

2 Likes
18

It’s working Archibald! The solution was to put it in the same folder as /Vault. But the reason it took me so long to reply is that I’m in a Whack-a-Mole situation with the graphic: The last word lies 11px longer than the graphic and every time I add length to the graphic the code will not yield to the graphic and stubbornly wants that last word hanging 11px below the bottom position of the graphic. I’ve seen something like this once before so I’m ceryain.that’s what’s happening. I’ve tried resizing the graphic; now I pull out the big guns: a new graphic 700 x 1226 in which I’ll append a 700 x 11 slice to the bottom and trick it that this is a brand new graphic with new pixels. The things I do for love . . .

19

Okay guys this is the absolute best I can get it. I thought I had this landed cherry once before at a height of 1215px but I remember now the paragraph fell short by one line. I tried approaching this from a graphics angle but the code played Whack-a-Mole and nothing would persuade it to take the bait and just line up like a good little soldier. Even now it isn’t pixel perfect.

The code wanted the one thing I didn’t want to give it — indeed (and this is what kills me) didn’t need to give it if it would just take the resize: hyphenations. So there are hyphens. All in all I’m wildly pleased Archibald. This was your skill at work and I’ll never forget it my friend. It was literally depressing the hell out of me because it didn’t make any sense. But this was a much deeper game than I could have ever contemplated! So thank you my friend. I’ll get the tabs figured out and upload a final dedicated to ‘Deep Archibald’ on the Sitepoint forums. :weee:

Oh yes. I believe you need this.

1 Like
20

If you think that is deep, consider this from the formal specification of the shape-outside CSS property (here):

User agents must use the CORS protocol defined by the [FETCH] specification for all URLs in a shape-outside value. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

Why do computer scientists always write such gobbledygook?

2 Likes