CODEWITHSUNDEEP
htmlcsstextarea
Adam Pietrasiak
Adam Pietrasiak

Reputation: 13224

How to create a circular textarea

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

Answers (6)

Raj Nathani
Raj Nathani

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 mathematics behind it!

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

Ilya Streltsyn
Ilya Streltsyn

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

stackErr
stackErr

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

Richard Connamacher
Richard Connamacher

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

Bhavik
Bhavik

Reputation: 4904

Try this plugin.. Simple to use, and can be modified as per requirements..

Upvotes: 0

Maxime R.C
Maxime R.C

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

Related Questions