Menu
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.
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.
Use the generator for the same thing, http://www.csstextwrap.com/index.php.
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.
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.
916
Here we just write the characters of a text one by one and start applying the CSS transform properties to make the whole text look curved (or shaped like an arc). However, one advantage of this method is that you can select the text and even perform copy-paste.
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.
177
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).
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
