Geek Answers Handbook

How to get text wrapping in circle shape?

I want to wrap text around a round image using CSS or JavaScript, as you can see below.

#corner { border-radius: 100%; background: url(https://osiprodwusodcspstoa01.blob.core.windows.net/en-us/media/187a9a09-fb97-4a5e-a8a2-620c782d6c67.png); background-position: left top; background-repeat: repeat; padding: 20px; width: 150px; height: 150px; } 
 <p id="corner"></p>

I searched the Internet, but could not fine anything useful.

+6
source share
5 answers

You can use conversion (rotation) in css3 for this.

 body{ text-align: center; margin-top: 30px; } #corner{ margin-top: 50px; background: #92d050; width: 150px; height: 150px; border-radius: 50%; display: inline-block; -webkit-box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb; box-shadow: 0 0 6px 6px #a7c5fb, 0 3px 6px #a7c5fb; } .contaner { position: relative; width: 280px; margin: auto; } span { font-family: 'sans-serif', Tahoma, Geneva, Verdana, sans-serif; position: absolute; color: #f8cbad; -webkit-text-stroke: 1px #ed7d31; font-size: 30px; } .char1 { transform: rotate(-90deg); left: 26px; top: 105px; } .char2 { transform: rotate(-72deg); left: 21px; top: 78px; } .char3 { transform: rotate(-56deg); left: 33px; top: 58px; } .char4 { transform: rotate(-56deg); left: 44px; top: 43px; } .char5 { transform: rotate(-49deg); left: 57px; top: 31px; } .char6 { transform: rotate(-37deg); left: 72px; top: 18px; } .char7 { transform: rotate(-32deg); left: 82px; top: 9px; } .char8 { transform: rotate(-17deg); left: 104px; top: 2px; } .char9 { transform: rotate(-8deg); left: 123px; top: -1px; } .char10 { transform: rotate(7deg); left: 143px; top: 0px; } .char11 { transform: rotate(13deg); left: 161px; top: 3px; } .char12 { transform: rotate(36deg); left: 184px; top: 18px; } .char13 { transform: rotate(45deg); left: 207px; top: 33px; } .char14 { transform: rotate(68deg); left: 224px; top: 54px; } .char15 { transform: rotate(68deg); left: 229px; top: 69px; } .char16 { transform: rotate(83deg); left: 234px; top: 89px; } .char17 { transform: rotate(90deg); left: 239px; top: 105px; } .char18 { transform: rotate(114deg); left: 235px; top: 133px; } .char19 { transform: rotate(114deg); left: 233px; top: 146px; } .char20 { transform: rotate(122deg); left: 222px; top: 157px; } .char22 { transform: rotate(143deg); left: 196px; top: 187px; } .char21 { transform: rotate(132deg); left: 211px; top: 173px; } .char23 { transform: rotate(152deg); left: 179px; top: 196px; } .char24 { transform: rotate(172deg); left: 154px; top: 206px; } .char25 { transform: rotate(178deg); left: 131px; top: 208px; } .char25d { transform: rotate(189deg); left: 112px; top: 207px; } .char26 { transform: rotate(213deg); left: 86px; top: 198px; } .char27 { transform: rotate(219deg); left: 79px; top: 190px; } .char28 { transform: rotate(220deg); left: 66px; top: 183px; } .char29 { transform: rotate(228deg); left: 50px; top: 171px; } .char30{ transform: rotate(241deg); left: 44px; top: 157px; } .char31{ transform: rotate(241deg); left: 30px; top: 142px; } .char32{ transform: rotate(241deg); left: 24px; top: 127px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="contaner"> <p id="corner"></p> <!-- <p>I want to bend my text around the circle.</p> --> <span class="char1">I</span> <span class="char2">w</span> <span class="char3">a</span> <span class="char4">n</span> <span class="char5">t</span> <span class="char6">t</span> <span class="char7">o</span> <span class="char8">b</span> <span class="char9">e</span> <span class="char10">n</span> <span class="char11">d</span> <span class="char12">m</span> <span class="char13">y</span> <span class="char14">t</span> <span class="char15">e</span> <span class="char16">x</span> <span class="char17">t</span> <span class="char18">a</span> <span class="char19">r</span> <span class="char20">o</span> <span class="char21">u</span> <span class="char22">n</span> <span class="char23">d</span> <span class="char24">t</span> <span class="char25">h</span> <span class="char25d">e</span> <span class="char26">c</span> <span class="char27">i</span> <span class="char28">r</span> <span class="char29">c</span> <span class="char30">l</span> <span class="char31">e</span> <span class="char32">.</span> </div> </body> </html>
+2
source

You can do this in SVG with <textPath> . If you use SVG, you do not need to break the text into separate characters. A path is simply a circle written with elliptical arc commands .

 <svg viewBox="0 0 400 400"> <defs> <path id="MyPath" d="M 200, 200 m -100, 0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0 " /> </defs> <text font-family="Verdana" font-size="30" fill="rgb(248,203,173)" stroke="rgb(237,125,49)"> <textPath xlink:href="#MyPath"> I want to bend my text around the circle. </textPath> </text> <circle fill="none" stroke="rgb(165,195,251)" cx="200" cy="200" r="80" stroke-width="10" filter="blur(3px)" /> <circle fill="rgb(146,208,80)" stroke="rgb(169,209,142)" stroke-width="2px" cx="200" cy="200" r="78" /> </svg>
+14
source

The SVG approach is simple and compact, but what if you need something more flexible? Here is my javascript solution.

 window.addEventListener('load', wrap); function wrap() { var image = document.querySelector('#image-to-wrap'); var text = document.querySelector('#wrapping-text'); var start = -90; var angle = 360; var radius = image.clientHeight / 2; var centerX = image.getBoundingClientRect().left + radius; var centerY = image.getBoundingClientRect().top + radius; var characters = text.innerHTML.split(''); var step = angle / characters.length - 1; text.innerHTML = ''; for (var i = 0; i < characters.length; i++) { buildItem(i); } function buildItem(i) { var item = document.createElement('span'); item.innerHTML = characters[i]; text.appendChild(item); var w = item.clientWidth; var h = item.clientHeight; var a = (start + step * i) * Math.PI / 180; item.style.left = centerX - w / 2 + radius * Math.sin(a) + 'px'; item.style.top = centerY - h - radius * Math.cos(a) + 'px'; item.style.transform = 'rotate(' + a + 'rad)'; } } 
 #image-to-wrap { height: 250px; margin: 50px; width: 250px; } #wrapping-text { color: MistyRose; font-family: serif; font-size: 50px; -webkit-text-stroke: 1px Salmon; } #wrapping-text span { position: absolute; transform-origin: 50% 100%; } 
 <img id="image-to-wrap" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Reinel_wind_rose_round.png"> <p id="wrapping-text">Reinel wind rose round</p>
+3
source

What you ask for is not easy. You need a function to "fake" it. You can try this.

 function writeInCircle(phrase, cx, cy, fontSize) { var d = $("<div>").addClass("writeInCircle").appendTo("body") var num = phrase.length var r = num * fontSize / 6 $(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 }) console.log(z.charAt(i) + " " + x + "," + y) } } z = "This is the text you need" cx = 200 cy = 150 fontSize = 30 $(function() { writeInCircle(z, cx, cy, fontSize) })

But I would suggest using SVG. Thay would be more useful to recreate the text in html and JS.

+2
source

There are two ways with jquery in which you will slice each character, and then arrange accordingly, as shown in the example above, and the second with css, in which you assign a class to each character and than individually transform them, as shown below. html

 <div id="simple_arc"> <span class='w0'>i</span> <span class='w1'></span> <span class='w2'>w</span> <span class='w3'>a</span> <span class='w4'>n</span> <span class='w5'>t</span> <span class='w6'></span> <span class='w7'>t</span> <span class='w8'>o</span> <span class='w9'></span> </div>

css

 #simple_arc { display: block; width:306px; height:305px; }

css for words

 #simple_arc>span[class^=w]{ display:block; position:absolute; -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; } #simple_arc span{ font-size:38px; font-weight:regular; font-style:normal; line-height:0.65; white-space:pre; overflow:visible; padding:0px; } #simple_arc .w0 { -moz-transform: rotate(-1.14rad); -webkit-transform: rotate(-1.14rad); -o-transform: rotate(-1.14rad); -ms-transform: rotate(-1.14rad); transform: rotate(-1.14rad); width: 21px; height: 24px; left: 42.7px; top: 93.95px; }
-one
source

More articles:


All Articles