How to create curved text

HTML & CSS
1

How would I add curved text like this?

Code:
https://liveweave.com/mmIOWL

do this
do this397Ă—369 42.6 KB

1 Like
2

As this post has veered off from the original topic, I have split it into a new one.

Before this topic grows into another epically long thread @asasass, can you please let us know what your end goal is here. What are you trying to achieve? What is this for?

Thank you.

1 Like
3

Use <textPath>. See example here:

2 Likes
4

I don’t know how to do this.

5
2 Likes
6

The <textPath> element is simple: it is just the text and an href reference to a path.

You will need to read up about the <path> element in especially its d attribute:

1 Like
7

Use this well trusted method…
“Practice, practice, practice”
…take a short break and then repeat.

Note though that…

850Ă—400 57.3 KB

2 Likes
8

If I just want to be able to place horizontal text anywhere on the image.

How best to write that into the code?

Where I would be able to move it around anywhere giving it a px value.

2 texts, but not with each other.

Where I would be able to move then anywhere.

Text 1

Text 2

https://liveweave.com/mmIOWL

.wrap {
  width: 400px;
  height: 400px;
  background: #000;
  display: grid;
  margin: auto;
  align-content: center;
 
}

h1 {
  text-align: center;
}

p {
  margin: 0;
  line-height: 1px;
  font-size: 28px;
  color: #ed1c24;
  font-family: "Roboto", sans-serif;
}

.shape {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--bg-color);
  color: white;
  margin: 1rem auto;
  gap: 4px;
  width: 302px;
  
}

/* set all blocks to red */
.shape > * {
  background-color: var(--base-color);
  aspect-ratio: 1 / 1;
  flex: 0 0 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-b] {
  background: var(--bg-color);
}

.shape2 > * {
  --base-color: rgb(34, 177, 76);
}

/*.shape2>*:not(:empty) {
  background: var(--highlight-color)
}*/

/* shape3 example*/
.shape3 > * {
  --base-color: blue;
}

.edge {
  background: green;
}

<div class="wrap">

<div class="shape shape3">
  <p data-b></p>
  <p class="edge"></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge"></p>
  <p class="edge"></p>
  <p data-b></p>
  <p class="edge">n</p>
  <p>n</p>
  <p>G</p>
  <p class="edge">H</p>
  <p data-b></p>
  <p class="edge">V</p>
  <p>h</p>
  <p>n</p>
  <p class="edge">l</p>
  <p class="edge"></p>
  <p></p>
  <p></p>
  <p></p>
  <p class="edge"></p>
  <p></p>
  <p></p>
  <p></p>
  <p class="edge"></p>
  <p class="edge">h</p>
  <p>u</p>
  <p>j</p>
  <p>j</p>
  <p></p>
  <p>j</p>
  <p>h</p>
  <p>g</p>
  <p class="edge">E</p>
  <p data-b></p>
  <p class="edge"></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge">f</p>
  <p>I</p>
  <p>f</p>
  <p>j</p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge"></p>
  <p></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p class="edge"></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
  <p data-b></p>
</div>
</div>
9

My attempt:

When I move the purple text up and down, the red one moves.

Can I prevent that from occuring?

https://liveweave.com/mmIOWL

.wrap2 {
  width: 400px;
  height: 400px;
  background: #000;
  margin: auto;
}


.hr1  {
  color: purple;
  font-style: normal;
  font-family: roboto;
  font-size: 30px;
  margin-left: 80px;
  margin-top: -80px;

}

.hr2  {
  color: red;
  font-style: normal;
  font-family: roboto;
  font-size: 30px;
  margin-top: 40px;
  margin-left: 100px;
}

html:

</div>


<p class="hr1">Testing</p>
 
<p class="hr2">Testing</p>


</div>
10

If you want them independent of any other content then you need to remove them from the flow. That means absolutely positioning them into where you want them to overlay.

e.g.

.wrap2{
position:relative;/* stacking context*/
}
.hr1,.hr2{
  position:absolute;
  margin:0;
}
.hr1{
  top:10%;
  left:10%;
}
.hr2{
   top:20%;
   left:20%;
}

Of course it is now up to you to make sure they don’t overlap each other and fit where you need them to fit.

11

I can do this?
https://liveweave.com/twgVPh

.box1 p{
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  position: fixed;
} 

.hr1  {
  color: purple;
  margin-left: 80px;
  margin-top: -80px;
}

.hr2  {
  color: red;
  margin-top: -40px;
  margin-left: 100px;
}
12

The original question was asking about curved text.
Is this yet another new topic?

3 Likes
13

It’s all referring to text.

Maybe change the title of it.

14

Yes but don’t do that because it is not correct and not what I told you to do.

Position:fixed removes the element from the flow but does not keep it within the black box as its context is the viewport and not the black box.

This is what happens when you scroll.

texttest
texttest759Ă—377 5.66 KB

Use position:absolute as instructed and get rid of the margins and use positioning instead.

1 Like
15

I did it:
https://liveweave.com/twgVPh

16

As I have asked at the top of this thread

Before this topic grows into another epically long thread @asasass, can you please let us know what your end goal is here. What are you trying to achieve? What is this for?

If we can get that information from you, then I can give it an appropriate title. For now I will leave it as is.

17

I just wanted to know how to properly position the text on the screen.

It is all good now.