How to create a circular text box

Question

I would like to create a textarea that is in the shape of a circle when inserting text into the form

This is what I tried, but I'm not sure how to make the text stay within the circle without using javascript.

Answer 1

There is an ambiguity in what you mean by “textarea with the shape of a circle and text inside”, the following solution will follow the rules for rendering textarea in html and give you a circle with the text fitting inside it , although it will not be for receiving text in a circular form (which will be possible with -webkit-shape-inside )

adding the appropriate number of indents

 textarea { width: 500px; height: 500px; border-radius: 100%; padding:110px; } 

script: http://jsfiddle.net/zuh7z/8/

math behind her!

The exact formula for calculating the required fill:

sqrt (2) * (width / 2) - (width / 2)

In our case: width = 500px

required fill = sqrt (2) * (500/2) - (500/2)
= 353.55-250 = 103.55

padding: 103.55px

Answer 2

Maybe adding some add-ons will help you?

 textarea { width: 350px; height: 350px; border-radius: 250px; padding:75px; } 

You may have to deal with tho values ​​:)

Answer 3

Ok, so this is still an experimental CSS3 feature, read here: http://www.adobe.com/devnet/html5/articles/css3-regions.html .

This is a Chrome solution. You need to enable the "Enable experimental WebKit objects" checkbox in the chrome: // flags and restart the browser.

Here is the fiddle: http://jsfiddle.net/7JD9E/4/

HTML:

 <textarea>Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremrem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremrem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremrem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem alskd fhow eijhf lkn ldh weo djf;'sdf </textarea> 

CSS3:

 textarea { width: 500px; height: 500px; -webkit-shape-inside: circle(50%,50%,50%); border-radius: 500px; } 

Answer 4

Just a quick proof of concept: http://jsfiddle.net/zuh7z/11/

The main idea was to replace textarea with

 <div contenteditable> 

and use the old trick to cut the curved part from the text with a set of invisible floats of the appropriate size.

But it seems that with this approach, we will need to get the vertical position of the carriage in such a “text area” to prevent it from overflowing, and the script for this eventually becomes a bit like NASA (I found something on the topic in How to get the number of lines in the ContentEditable area and the current position of the caret line?, but cannot apply this solution to this example).

Answer 5

Try this plugin . Easy to use and subject to change as required.

Answer 6

The NASA like js solution, which you are likely to think of, would be to encode a user control using SVG, which responds to key events in a hidden text box right behind it. Click on it, focus on the text box. The text entered in the text box is laid out in the SVG circle. It would be useful to lay out the text in the circular area of ​​the clip, so that you no longer have to deal with the square text box inside the CSS circular frame.

There are many small usability issues that you will have to solve (for example, how to process text collections based on the mouse and on the touch screen), but this is possible. It just depends on how much effort you put into it. :)