Paragraph of text in circle using CSS

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.

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.

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>

<!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).

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/

Joe Corby

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

来源：https://stackoverflow.com/questions/16982545/paragraph-of-text-in-circle-using-css

标签

html