Curved Type using shape-outside (or other solutions?)

HTML & CSS
1

I have a transparent .PNG antique ribbon graphic that I’d like to place my name onto in lower caps and I’m not even sure shape-outside is the best way for me to approach this little project. What I’ve done is get it to a reasonable facsimile of the font size and font family and uploaded the graphic to my /origin folder just to be on the safe side. The endgame is to take a hi-res screenshot of the page and create a standalone .PNG image with different background colors . . . or even using my parchment-a background.

I’m really open to this creatively ((paging @snadyleiby!)) so here is a very basic point of departure. Thank you friends!

By the way, this image is 100% transparent. Only the lines are solid:

<!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=Roboto: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=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&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=Courier+Prime: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=Fira+Sans: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">
  <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">
  <link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&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=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">

  <title>TYPEPATH-A &#7172; by semicodin</title>

  <style>

body {
    width: 100%;
    background-color: white;
    margin: 100px 50px 100px 50px;
    color: black;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 15rem;
    line-height: 1.1;
}
.main {
    width: 100%;
    background-color: white;
    margin: 0;
    color: black;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 15rem;
    line-height: 1.1;
}

.plead {margin-top: 2rem; text-align: center;}
u {text-decoration: underline}
* {box-sizing: border-box}
.ctr {text-align: center; margin-top: 0;}
.blu {color: blue}
.crim {color: crimson}
.green {color: green}
.mono {color: blue; font-family: 'courier prime', monospace; font-weight: bold;}
.goudy {font-family: 'goudy bookletter 1911', serif; font-weight: bold;}

.ribbon-a {
    float: left;
    width: 1920px;
    height: 1003px;
    shape-margin: 1.25rem;
    margin: 0;
    shape-image-threshold: 0.5;
    shape-outside: url(https://semicodin.nekoweb.org/origin/ribbon-8881930.png);
}

</style>
</head>

<body>

<div class="main">
<img class="ribbon-a" src="https://semicodin.nekoweb.org/origin/ribbon-8881930.png" alt="Lucy">
</div>
<p class="plead" style="text-align: center">
semicodin<br>
</p>


</body>
</html>
1 Like
2

Incorporate the text into the ribbon image as here:

semicodin-ribbon
semicodin-ribbon923×344 70.6 KB

1 Like
3

I want it to curve Archibald, with the ribbon. Also it slightly skews. And above in my OP I mistakingly said lower caps when I meant lower case. You didn’t post any code Archibald!

4

There is no code. It’s just an image!

1 Like
5

Here is a SVG example- ( using .Goudy Bookletter1911 font )…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>TYPEPATH-A by semicodin</title>

<link href="https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" rel="stylesheet" media="screen">

<style media="screen">
body {
  background-color: #f9f9f9;
  font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
svg{
  background-color:#fee;
  background-image:
   url(https://semicodin.nekoweb.org/origin/ribbon-8881930.png),
   linear-gradient(to bottom,#fff 60%,#888 100%);
  background-size:100% auto;
 }
text {
  font-family:'Goudy Bookletter 1911', serif;
  font-size:12em;
 }
text:nth-of-type(1){ transform:rotateZ(-10deg);}
text:nth-of-type(2){ transform:rotateZ( -8deg);}
text:nth-of-type(3){ transform:rotateZ( -6deg);}
text:nth-of-type(4){ transform:rotateZ( -4deg);}
text:nth-of-type(6){ transform:rotateZ(  4deg);}
text:nth-of-type(7){ transform:rotateZ(  6deg);}
text:nth-of-type(8){ transform:rotateZ(  8deg);}
text:nth-of-type(9){ transform:rotateZ( 10deg);}
</style>

</head>
<body>
 <svg viewBox="0 0 1920 1003">
  <text x="458" y="545">S</text>
  <text x="580" y="520">e</text>
  <text x="690" y="493">m</text>
  <text x="860" y="467">i</text>
  <text x="952" y="404">c</text>
  <text x="1065" y="334">o</text>
  <text x="1172" y="293">d</text>
  <text x="1290" y="252">i</text>
  <text x="1355" y="208">n</text>
</svg>

</body>
</html>

Note
Using different fonts would most probably mean
editing the text x and y values.

You can see the example here…
https://codepen.io/Snady_Leiby/full/eYwgzRm

Side note
In your title element you have used…

&#7172;

…which does not appear to exist.

2 Likes
6

If using an SVG, there is no need to place and rotate every character. See: https://css-tricks.com/snippets/svg/curved-text-along-path/

What’s the purpose of using SVG when you can simply incorporate the text into the image?

7

There is a curve and a skew to this ribbon Archibald. If you don’t acknowledge that then you don’t understand the purpose of this thread. You didn’t post a solution, you posted an example. How about sharing with us how you did it. And don’t say Adobe Illustrator because I don’t have it!

8

Thank you Snady! I’ll study this and adapt it to the font ‘Solway’.

9

Snady, I’m crashing and burning on the “i”. Arrrgh! I’m not good at this. Could I trouble you to make one of these using the font “Solway”? You’ve got an artiat’s eye; me, I’m all thumbs. :wonky:

10

Here is my pathetic attempt. You see the “i” is not right . . .

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" rel="stylesheet" media="screen">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">

<title>@snadyleiby2 TYPEPATH-A by semicodin</title>


<style media="screen">
body {
  background-color: #f9f9f9;
  font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
svg{
  background-color:#fee;
  background-image:
   url(https://semicodin.nekoweb.org/origin/ribbon-8881930.png),
   linear-gradient(to bottom,#fff 60%,#888 100%);
  background-size:100% auto;
 }
text {
  font-family:'solway', serif;
  font-size:12em;
 }
text:nth-of-type(1){ transform:rotateZ(-10deg);}
text:nth-of-type(2){ transform:rotateZ( -8deg);}
text:nth-of-type(3){ transform:rotateZ( -6deg);}
text:nth-of-type(4){ transform:rotateZ( -6deg);}
text:nth-of-type(6){ transform:rotateZ(  4deg);}
text:nth-of-type(7){ transform:rotateZ(  6deg);}
text:nth-of-type(8){ transform:rotateZ(  8deg);}
text:nth-of-type(9){ transform:rotateZ( 10deg);}
</style>

</head>
<body>
 <svg viewBox="0 0 1920 1003">
  <text x="458" y="545">s</text>
  <text x="580" y="520">e</text>
  <text x="690" y="493">m</text>
  <text x="855" y="495">i</text>
  <text x="952" y="404">c</text>
  <text x="1065" y="334">o</text>
  <text x="1172" y="293">d</text>
  <text x="1290" y="252">i</text>
  <text x="1355" y="208">n</text>
</svg>

</body>
</html>
11

And isn’t there a more automatic method of doing this — one that plots the coordinates based upon a line, which we have a perfectly good one! :rolleyes: A shape-outside method, as an example?

12

This

That isn’t what shape-outside does.

1 Like
13

Solway

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>TYPEPATH-A by semicodin</title>

<link href="https://fonts.googleapis.com/css?family=Solway" rel="stylesheet" media="screen">

<style media="screen">
body {
  background-color: #f9f9f9;
  font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
svg{
  background-color:#fee;
  background-image:
   url(https://semicodin.nekoweb.org/origin/ribbon-8881930.png),
   linear-gradient(to bottom,#fff 60%,#888 100%);
  background-size:100% auto;
 }
text {
  font-family:'Solway', serif;
  font-size:11em;
 }
text:nth-of-type(1){ transform:rotateZ(-16deg);}
text:nth-of-type(2){ transform:rotateZ( -11deg);}
text:nth-of-type(3){ transform:rotateZ( -7deg);}
text:nth-of-type(4){ transform:rotateZ( -4deg);}
text:nth-of-type(6){ transform:rotateZ(  4deg);}
text:nth-of-type(7){ transform:rotateZ(  7deg);}
text:nth-of-type(8){ transform:rotateZ(  11deg);}
text:nth-of-type(9){ transform:rotateZ( 16deg);}
</style>

</head>
<body>
 <svg viewBox="0 0 1920 1003">
  <text x="366" y="582">s</text>
  <text x="502" y="542">e</text>
  <text x="636" y="496">m</text>
  <text x="828" y="457">i</text>
  <text x="912" y="395">c</text>
  <text x="1032" y="325">o</text>
  <text x="1150" y="262">d</text>
  <text x="1280" y="172">i</text>
  <text x="1355" y="53">n</text>
 </svg>

</body>
</html>

example
https://codepen.io/Snady_Leiby/full/ExBZgGp

2 Likes
14

Then what is the method? Because I read about people doing this on stackoverflow — typing on the curve of an image.

I’ll get some links. There are dozens, possibly hundreds of them and they’re not doing this with a paint program. I appealed to @snadyleiby because he posted one (somewhat playfully) with my name following the curve of an image and I thought it was shape-outside but I guess I was mistaken. He had it wrapping around a circle if memory serves . . .

15

Thank you Snady! It looks great! Now tell me — did you plot those coordinates manually? Because they’re perfect. Literally the only thing I tweaked was to make the font bold.

Okay I would like one thing to be different: the gradient. Could you remove the gradient and give the image outside the ribbon a background of solid #666666? I need to be able to erase the greyscale and replace it with different solid colors (thus greyscale; there can’t be any whiteishness).

Edit:
Never mind! I think I can do this myself just using your coordinates! If not I’ll come back and ask. You’ve got the touch Snady! :biggrin:

16

@snadyleiby it’s no good I can’t lose the gradient or the #fee or the #f9f9f9 . . . or I wipe out the image! :eek: I need the transparency to be preserved because I will be colorizing both the ribbon and the background and I can’t get your gradients and backgrounds to go safely. You’ve embedded them somehow.Help?

17

Just remove the background color and the gradient.

svg{
  background-color:transparent;
  background-image:
   url(https://semicodin.nekoweb.org/origin/ribbon-8881930.png);
  background-size:100% auto;
 }
1 Like
18

You would need to do this in an image editor
such as Photoshop.

Example one

red-ribbon
red-ribbon1920×1003 193 KB

Example two

blue-ribbon
blue-ribbon1920×1003 246 KB

2 Likes
19

Here is how to do it without placing individual characters using coordinates and rotation angles:

You can change ribbon colour, text colour and background colour in the CSS.

I will leave you to colour-in the rest of the ribbon :grinning:.

3 Likes
20

It doesn’t work Paul. It blankets out everything but my name, curved. That was obviously the first thing I tried. :tongue: