Text indentation in the shape of an arc

Question

Is there a more elegant way of achieving this via CSS? The idea is to shape text like an Arc.

Thanks!

#p1 {
  text-indent: 0;
}
#p2 {
  text-indent: 10px;
}
#p3 {
  text-indent: 20px;
}
#p4 {
  text-indent: 30px;
}
#p5 {
  text-indent: 40px;
}
#p6 {
  text-indent: 30px;
}
#p7 {
  text-indent: 20px;
}
#p8 {
  text-indent: 10px;
}
#p9 {
  text-indent: 0px;
}

<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>

Answer 1

If you want a perfect arc you can use shape-outside to create a circle or ellipse that the text will follow.

You can see how this works

However support is spotty to say the least.

div{
    shape-outside: circle(50%);
    width: 140px;
    height: 140px;
    float: left;
 }
  

<div></div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</span>

Answer 2

You can achieve the same result with one class and one rule on that class. The trick is to repeat the elements inside each other:

.blubb {
  margin: 5px 0 5px 10px;
}

<div class="blubb">
  Lorem ipsum dolor sit amet
  <div class="blubb">
    Lorem ipsum dolor sit amet
      <div class="blubb">
        Lorem ipsum dolor sit amet
          <div class="blubb">
            Lorem ipsum dolor sit amet
            <div class="blubb">Lorem ipsum dolor sit amet</div>
          </div>
          <div class="blubb">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="blubb">Lorem ipsum dolor sit amet</div>
  </div>
  <div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>

Answer 3

As Dale said, use shape-outside for a pure css solution. However due to browser support we have to find a lower-level solution.

Contains comments for non-jQuery solution, code contains jQuery.

var ps = 9;//paragraphs
var i = 1;//start id
var x = 0;//left position
var amount = 50;
for(i=1;i<ps;i++){
 //calculate left position in arc
  //(i/ps) gets value between 0 and 1, Math.PI is to make it radians for sine, *amount is max indent
  //bearing in mind this bit can be changed to give more desired effect.
  x = Math.sin(((i-1)/(ps-1))*Math.PI)*amount;
  
  //get element using jquery and set its text-indent to x
  //otherwise you could use document.getElementById('p'+i); and textIndent JS property if you dont want jQuery.
  $('#p'+i).css('text-indent', x+'px');
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>