Reputation: 13224
I would like to create a textarea
that is in the shape of a circle, with the text fitting into the shape
This - is what I've tried, but I am not sure how to get the text to stay within the boundaries of the circle without using javascript.
Upvotes: 4
Views: 4127
Reputation: 2845
There is ambiguity in what you mean by "textarea with shape of circle and text fitting inside", the following solution will abide by the rendering rules of a textarea
in html, and will give you a circle with text fitting inside it
, albeit to obtain the text in a circular shape it will not (that will be possible with -webkit-shape-inside
)
adding the appropriate amount of padding
textarea {
width: 500px;
height: 500px;
border-radius: 100%;
padding:110px;
}
fiddle: http://jsfiddle.net/zuh7z/8/
The exact formula for calculating the required padding:
sqrt(2)*(width/2) - (width/2)
In our case: width = 500px
required padding = sqrt(2)*(500/2) - (500/2)
= 353.55 - 250
= 103.55
padding: 103.55px
Upvotes: 2
Reputation: 13556
Just a quick proof-of-concept: http://jsfiddle.net/zuh7z/11/
The main idea was to replace the textarea with
<div contenteditable>
and to use the old trick to cut out the curved part from text with a set of invisible floats of appropriate size.
But it seems that using this approach we will need to get the vertical position of the caret in such a 'textarea' to prevent it from overflowing, and the script for this eventually becomes a bit NASA-like (I found something on the topic in How to get number of rows in ContentEditable area and current caret line position? but couldn't apply that solution to this example).
Upvotes: 1
Reputation: 4170
Ok so this is still an experimental CSS3 feature, read about it here: http://www.adobe.com/devnet/html5/articles/css3-regions.html.
This is a Chrome only solution. You will have to enable "Enable experimental WebKit features" flag in chrome://flags and restart your browser.
Here is a 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;
}
Upvotes: 1
Reputation: 3216
The "NASA like js" solution you're probably thinking of would be to code a custom control using SVG that responds to key events on a hidden textarea located right behind it. Click on it, focus on the textarea. Text entered in the textarea gets laid out in the SVG circle. It'd have the benefit of laying out the text within a circular clip area, so you're not dealing with a square textarea inside a circular CSS border anymore.
There are a lot of little usability issues you'd have to resolve (like how to handle mouse-based and touch-based text selections), but it's doable. Just depends on how much effort you want to spend on this. :)
Upvotes: 0
Reputation: 4904
Try this plugin.. Simple to use, and can be modified as per requirements..
Upvotes: 0
Reputation: 179
Maybe adding some padding would help you?
textarea {
width: 350px;
height: 350px;
border-radius: 250px;
padding:75px;
}
You might need to mess around with the values tho :)
Upvotes: 0