Adjust text into specific shape

Question

I have the following code and I need to use JavaScript to adjust text so it fits into the circle.

Here is the current code:

#circle {
  background:blue;
  width:200px;
  height:200px;
  top: -100px;
  margin-top:50%;
  left: -100px;
  margin-left:50%;
  text-align:center;
  font-family:monospace; /* fixed size font, making it easy to implement */
  line-height:18px;
  font-size:18px;
  border-radius:100px;
}

<div id="circle">
  Hello World Helo World Helo World Helo World Helo World
</div>

what do you mean by text into a circle? do you want the text just to fit in the circle or shaped like a circle? — Adam Buchanan Smith, Feb 09 '16 at 22:05
It's still unclear what you want. Does it need to work for just this text or for any text? What can be changed to make it fit, the font or the circle? — Dave, Feb 09 '16 at 22:20
Text inside shapes has been deferred until [**CSS Shapes Module Level 2**](https://drafts.csswg.org/css-shapes-2/) — Paulie_D, Feb 09 '16 at 22:23
http://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon/33630520#33630520 — Paulie_D, Feb 09 '16 at 22:27

score 0 · Answer 1 · answered Feb 09 '16 at 22:16

0

if all you want to do is fit the text into the circle, just add padding-top: 70px to #circle

see fiddle: https://jsfiddle.net/hzurmh8n/6/

answered Feb 09 '16 at 22:16

Adam Buchanan Smith

9,422
5
19
39

any other answer, I am trying to find a general answer which will fit for every circle in every size. – david Feb 09 '16 at 22:19

score 0 · Accepted Answer · answered Feb 09 '16 at 22:34

By default the text is going to flow in a square. If you find the largest square that fits in the circle, you can then adjust the padding to accommodate it. The way to calculate, the biggest square that fits in the circle is with this formula:

square root of ((radius squared) / 2)

square root of ((200 * 200)/ 2);

square root of (40000/2);

square root of (20000) = 141.

So the content are is 141px x 141px. Since your circle is technically a 200x200 box, the padding needs to be (200 - 141)/2 = 29.5px;

So you then want to center it vertically. There are many "hacks" to do this. I am using one of many below. See https://www.w3.org/Style/Examples/007/center.en.html

#circle {
  box-sizing:border-box;
  background:blue;
  width:200px;
  height:200px;
  text-align:center;
  font-family:monospace; /* fixed size font, making it easy to implement */
  line-height:18px;
  font-size:18px;
  border-radius:100px;
  padding:29px;
  position: relative
}


#circle p {
   box-sizing:border-box;
   width:141px;
   padding:0;
   margin: 0;
   position: absolute;               
   top: 50%;                         
   transform: translate(0, -50%) 
}

<div id="circle">
  <p>Hello World Helo World Helo World Helo World Helo World</p>
</div>

NOTE: You don't need to constrain it to a specific font for this to work. However, if the content is too big for the circle, it will overflow the shape. — mcgraphix, Feb 09 '16 at 22:39

Adjust text into specific shape

2 Answers2