How to create a custom shaped textarea with css-shapes

How to create a custom shaped textarea with css-shapes

Recently I came across the question How to create a custom shaped textarea on Stack Overflow. At first this question looked quite weird to me, but I remembered an article describing custom text wrapping in CSS3 using css-shapes. This combined with an editable div could create indeed a custom shaped textarea.

custom-shape-textarea

Css-shapes are very experimental and currently only supported in Chrome Canary.

To enable css-shapes in Chrome Canary:

  1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  2. Click the ‘Enable’ link within that section.
  3. Click the ‘Relaunch Now’ button at the bottom of the browser window.

from: http://html.adobe.com/webplatform/enable/

HTML

The HTML is just a div with the content-editable attribute set to true.

<div class="container" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS

The CSS is very basic, it contains a polygon which defines how the text should flow in the div.

.container{   
  overflow:hidden;
  shape-inside: polygon(200.67px 198.00px,35.33px 198.47px,34.67px 362.47px,537.00px 362.74px,535.67px 196.87px,388.33px 197.00px,386.67px 53.53px,201.33px 53.53px);
  font-size: 0.8em;
}

The polygon has been created with an online polygon creation tool. When using this tool make sure you enable “px” units.

The result is a custom shaped editable div, which could be used as a textarea.

Live example

Screenshot for non-supporting browsers
custom-shape-textarea

Leave a Reply

Your email address will not be published. Required fields are marked *