Is there any way to bend a text with CSS or leave the text curved in a row?

Question

Is there any way to put a text in this format without using an image?

Or I’d like to do a kind of curved text, but I couldn’t do it. The idea would be to do something close to this image, but only with code to facilitate quick editing etc...

Does anyone know if there’s any way to make that effect in the text?

I’ve reached that point, but I have no idea how to get the text to line up on the curve or anything close to that...

.box {
    background-color: peachpuff;
    text-align: center;
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
.box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 50%;
    border: 1px solid;
    width: 200px;
    height: 100px;
    box-sizing: border-box;
}
.box span {
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 100px;
}

<div class="box">
    <span>
        NEW YORK
    </span>
</div>

Answer 1

There are several options to do the desired, but here I will present two solutions (the answer would get very large with all of them).

Some of the options are:

• Canva
• CSS "pure"
• CSS with Javascript (Example 1)
• SASS
• SVG and path (Example 2)

I could do it with SASS, but the OS doesn’t have snippet support. So let’s do it with a little Javascript (which will apply CSS to elements).

Note: Before understanding what is happening with the code I will emphasize that this is not the best solution, even because there are libraries, with Arctext.js that would do it in a simple way for us, I am only answering the request of the question.

The biggest problem of this method will be that if you change a word in the div would have to go back and tinker with Javascript and CSS again. But anyway, see example 1:

let deg = 6;
for (let i = 1; i <= 20; i++) {
  let div = document.querySelector(".container div:nth-child(" + i + ")");
  div.style.transform = 'rotate(' + deg + 'deg)';
  deg = deg + 6;
}

.container {
  margin: auto;
  position: relative;
  transform-origin: bottom left;
  transform: rotate(-61deg);
  height: 200px;
  width: 200px;
}

.container div {
  display: inline-block;
  font: 900 1.5em Monaco, Monospace;
  color: #000000;
  height: 200px;
  width: 15px;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  text-align: center;
}

<div class="container">
  <div>c</div>
  <div>a</div>
  <div>r</div>
  <div>a</div>
  <div>m</div>
  <div>b</div>
  <div>a</div>
  <div> </div>
  <div>o</div>
  <div> </div>
  <div>c</div>
  <div>a</div>
  <div>r</div>
  <div>a</div>
  <div> </div>
  <div>é</div>
  <div> </div>
  <div>t</div>
  <div>o</div>
  <div>p</div>
</div>

If you look at my example you’ll notice that it’s not 100% aligned, for that I would need to have increased the accuracy of the rotation in div container (the reason: I have proof today).

Basically in this example we have a div container that will be rotated to any direction, and that would allow the arc to go anywhere (stand on the right, left, top...).

Other than that, we just need to apply the property transform: rotate CSS in every child element of it, so they can also rotate together. Also, always maintain a pattern to rotate, in this example I did increasing 6 to each interaction of for.

Note 2: Example 1 (with Javascript) could do 100% with CSS, but the code would be extremely giant since we would need to apply to each element that property increasing 6 in rotation.

Understood the first example we can go to the second done with SVG and path. I find the best solution because it allows to do several things with the text, not just an arc.

Enough text and let’s understand in stages:

Imagine this SVG with a path in the style of an arch, this is where we will "write on top".

<svg viewBox="0 0 500 500">
  <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
</svg>

Now let’s add a text that will follow this path (path, not logical?).

<svg viewBox="0 0 500 500">
  <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Olha a curva vindo
    </textPath>
  </text>
</svg>

And best of all, just change the text and it still continues to follow the path (so it’s better, we don’t need to refactor CSS and Javascript).

But there is a problem, we do not want the curve to appear. So let’s change. To do this just put inside the path the property fill="transparent".

<svg viewBox="0 0 500 500">
  <path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Olha a curva vindo
    </textPath>
  </text>
</svg>

Now we’re all set, just style with CSS and change the SVG a little bit.

body {
  font-family: 'Luckiest Guy', cursive;
  font-size: 50px;
}

path {
  fill: transparent;
}

text {
  fill: #FF9800;
}

<svg viewBox="0 0 1000 1000">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="300">
      <textPath xlink:href="#curve">
        Olha a curva vindo
      </textPath>
    </text>
</svg>

References:

Curved Text

Path