24

I have been looking around for a decent and fast solution on how to place a paragraph of text inside a circle. I found there are two solutions.

Solution 1

Float multiple div's of the same height as the text to the left an right of the text, and by changing the divs width you adjust the space left over for the text.

Solution 2

Use the generator for the same thing, http://www.csstextwrap.com/index.php.

BONUS (not part of the problem, just a tip)

I am not looking for this, but maybe someone might need it, and I think its nice to have it as a link > http://csswarp.eleqtriq.com/ Its a web based generator that helps you wrap your text around the circle.

The Question?

Is there a simpler solution to putting paragraph of text inside a circle without having to add floating div's and additional markup. Slapping an image that contains that text is not a solution. The best case scenario, the solution would have clean HTML markup with few tweaks in the CSS.

SW4
  • 69,876
  • 20
  • 132
  • 137
Nemanja
  • 588
  • 2
  • 6
  • 16
  • 2
    Like this? http://jsfiddle.net/Kyle_Sevenoaks/Q9k6v/ – Kyle Jun 07 '13 at 11:08
  • @KyleSevenoaks I posted an answer and referred to your fiddle, thanks! – Marc Audet Jun 07 '13 at 11:30
  • 2
    @KyleSevenoaks LOL this is not it Kyle. I love the big circle and everything, but its no where close to what I was asking. Thanks for the reply anyway. – Nemanja Jun 07 '13 at 11:52
  • I think its a fantastic answer. I came here looking for a solution which Kyle provided. I think the question was misleading, so thank you Kyle for the answer – MichaelMcCabe Jan 22 '14 at 09:08
  • @MichaelMcCabe I disagree Michael, this is something I've now offered a bounty towards simply because it's annoying me massively. That solution was something anyone could have figured out and answered and yes the question is vague but I'm fairly sure 90% of people viewing this knew what was actually meant by it. – Joe Corby Dec 12 '14 at 16:45
  • 1
    Did you look at CSS regions? –  Dec 13 '14 at 06:38
  • CSS regions appears to be one of the only ways to go about it. Along with shapes polyfill. – Joe Corby Dec 16 '14 at 09:01

5 Answers5

23

Eric Meyer's book "Eric Meyer on CSS" talks about this (Project 10) and the text wrap solutions that you found use the same principle.

Using a simple border-radius: 50% does not affect the shape of the content box, which are rectangular at this time. For example, see the demo by Kyle Sevenoaks.

There is a CSS3 module under development that addresses this issue:

http://dev.w3.org/csswg/css-shapes

However, this spec is still in draft mode and not currently supported, probably a year or two out.

The short answer is no, but hopefully the comments will provide some insight.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • Yeah, I figured as much. I tried everything I could to avoid additional markup but it seemed that it was not doable. You have confirmed my doubts. Thank you and thanks everyone for responding. – Nemanja Jun 07 '13 at 11:46
  • 1
    2015 is almost over and CSS Shapes is still not widely supported. I think for now if one really needs to wrap text inside a circle, then their best options are [SVG + D3plus](http://d3plus.org/examples/utilities/a39f0c3fc52804ee859a/) or [Canvas/SVG + vanilla JS](http://stackoverflow.com/questions/17709485/wrap-text-to-a-circle-shape-in-svg-or-canvas/17716400#17716400). – thdoan Nov 16 '15 at 18:24
2

hi i think without js i think this is not possible so use js and css3 

.badge {
  position: relative;
  width: 400px;
  border-radius: 50%;
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  -o-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
}

.char1 {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  transform: rotate(6deg);
}

.char2 {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  transform: rotate(12deg);
}



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/BlurredText/js/jquery.lettering.js"></script>
<script>
    $(function() {
        $("h1").lettering();
    });
</script>

</head>

<body>

    <div id="page-wrap">

        <div class="badge">
          <h1>Established 2012</h1>
        </div>

    </div>

</body>

</html>
Pankaj Tiwari
  • 23
  • 1
  • 9
  • I was hoping it was possible without JS, but its starting to seem like that's not the case without the support for circle-inside coming back. – Joe Corby Dec 16 '14 at 08:55
1
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
        var len = str.length, s;
        context.save();
        context.translate(centerX, centerY);
        context.rotate(-1 * angle / 2);
        context.rotate(-1 * (angle / len) / 2);
        for(var n = 0; n < len; n++) {
          context.rotate(angle / len);
          context.save();
          context.translate(0, -1 * radius);
          s = str[n];
          context.fillText(s, 0, 0);
          context.restore();
        }
        context.restore();
      }
      var canvas = document.getElementById('myCanvas'), 
        context = canvas.getContext('2d'),
        centerX = canvas.width / 2,
        centerY = canvas.height - 30,
        angle = Math.PI * 0.8,
        radius = 150;

      context.font = '30pt Calibri';
      context.textAlign = 'center';
      context.fillStyle = 'blue';
      context.strokeStyle = 'blue';
      context.lineWidth = 4;
      drawTextAlongArc(context, 'Text along arc path', centerX, centerY, radius, angle);

      // draw circle underneath text
      context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);
      context.stroke();
    </script>
  </body>
</html>

CLICK HERE for Another Solution (jsfiddle).

Sandy
  • 663
  • 1
  • 4
  • 9
  • 5
    Would you consider adding some narrative to explain why this code works, and what makes it an answer to the question? This would be very helpful to the person asking the question, and anyone else who comes along. – Andrew Barber Jun 07 '13 at 16:33
  • 1
    Drawing text along an arc is not the same thing as wrapping text inside a circle. – thdoan Nov 16 '15 at 17:55
1

an orignal (?)...cover!

    function writeInCircle(phrase, cx, cy, fontSize) {
        var num = phrase.length
        var r = num * fontSize / 6
        var d = $("<div>").addClass("writeInCircle").appendTo("body")
        $(d).css({position:"absolute",
                   width: (2*r) + "px",
                  height: (2*r) + "px",
                  left: (cx-r) + "px",
                  top:  (cy-r) + "px"})
        for (var i=0; i < num; i++) {
           var s = $("<span>").html( phrase.charAt(i)).appendTo(d)
           a = i/num *2*Math.PI
           var x = cx   + r*Math.cos(a) 
           var y = cy  + r*Math.sin(a)
           $(s).css({"position":"absolute",
                 left: x + "px", top: y + "px",
                 "fontSize": fontSize, "transform":"rotate(" + a + "rad)" })
           console.log(z.charAt(i) + " " + x + "," + y)
        }
    }

see http://jsfiddle.net/alemarch/42o8hqb7/ http://jsfiddle.net/alemarch/42o8hqb7/1/ http://jsfiddle.net/alemarch/42o8hqb7/2/ http://jsfiddle.net/alemarch/42o8hqb7/3/

Alessandro Marchisio
  • 535
  • 3
  • 11
  • Fair enough, fancy circular text looks well and good but it's not text positioned normally but wrapped within a circle. Sorry if I was too vague – Joe Corby Dec 16 '14 at 08:56
0

The most applicable answer I found can be located here:

It's easier to use this method and then just hide the overflow / use text that fits rather than overflowing.

Cut out shape (triangle) from div and show background behind

Community
  • 1
  • 1
Joe Corby
  • 551
  • 4
  • 16