Come si ottiene il ritorno a capo del testo a forma di cerchio?

Question

Voglio racchiudere il testo attorno a un'immagine circolare con l'aiuto di CSS o JavaScript come potete vedere qui sotto.

#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>

Ho cercato in Internet, ma non sono riuscito a multato nulla di utile.

Answer 1

Per eseguire questa operazione è possibile utilizzare la trasformazione (rotazione) in css3.

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>

Answer 2

Quello che stai chiedendo non è facile. Hai bisogno di una funzione per 'fingere'. Puoi provare questo.

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) 
}) 

Ma quello che suggerirei è utilizzare un SVG. Sarebbe più utile ricreare il testo in html e JS.

Answer 3

Ci sono 2 modi uno con jquery in cui dividerete ciascun carattere e quindi sistemate di conseguenza come mostrato sopra nell'esempio e il secondo modo è con css in cui assegnerete classe a ciascun carattere e poi li trasformerete singolarmente come sotto il codice 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 per le parole

#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; 
        } 

Answer 4

Si può fare questo in SVG con un <textPath>. Se si utilizza SVG, non è necessario suddividere il testo in caratteri separati. Il percorso è solo un cerchio scritto utilizzando 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>

Answer 5

approccio SVG è semplice e compatto, ma cosa succede se si ha bisogno di qualcosa di più flessibile? Ecco la mia soluzione con JavaScript.

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>