CODEWITHSUNDEEP
svgtextareamultiline
Timo Kähkönen
Timo Kähkönen

Reputation: 12210

Multiline editable textarea in SVG

I'm trying to implement multiline editable textfield in SVG. I have the following code in http://jsfiddle.net/ca4d3/ :

<svg width="1000" height="1000" overflow="scroll">
  <g transform="rotate(5)">
    <rect width="300" height="400" fill="#22DD22" fill-opacity="0.5"/>
  </g>
  <foreignObject x="10" y="10" overflow="visible" width="10000" height="10000"
  requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
    <p style="display:table-cell;padding:10px;border:1px solid red;
    background-color:white;opacity:0.5;font-family:Verdana;
    font-size:20px;white-space: pre;
    word-wrap: normal; overflow: visible; overflow-y: visible;
    overflow-x:visible;" contentEditable="true"
    xmlns="http://www.w3.org/1999/xhtml">

    Write here some text.
    Be smart and select some word.
    If you wanna be really COOL,
    paste here something cool!

    </p>
  </foreignObject>
</svg>

In newest Chrome, Safari and Firefox the code works in some way, but in Opera and IE 9 not.

The goal is that:
0) Works in newest Chrome, Safari, Firefox, Opera and IE and if ever possible in some pads.
1) White-spaces are preserved and text wraps only on newline char (works in Chrome, Safari and Firefox, but not in Opera and IE 9 *).
2) The textfield is editable (in the same reliable and stabile way as textareas and contenteditable p elements in html) and height and width is expanded to fit text (works in Chrome, Safari and Firefox, but not in Opera and IE 9 *).
3) Texfield can be transformed (rotated, skewed, translated) while maintaining text editability (Tested rotation, but not work in any browser *).

4) Textfield can be clipped and masked while not necessarily maintaining text editability (not yet tested).

*) using above code

These all can be achieved using Flash, but Flash has so severe problems that it is not suitable for my purposes (after every little change in code, all have to be compiled again using Flex, which is slow, font size has limits, tracking technique is pixeloriented, not relative to em size etc.) and there still are differences across platforms. And I want to give a try to SVG!

GUESTION:
Can I achieve my goals 0-4 with current SVG support in browsers? Is coming SVG 2.0 for some help in this case?

EDIT: Changed display:table to display:table-cell (and added new jsfiddle), because display:table made the field to loses focus when pressed arrow-up on first text row.

Upvotes: 2

Views: 7003

Answers (1)

Timo K&#228;hk&#246;nen
Timo K&#228;hk&#246;nen

Reputation: 12210

It seems that when coder says "browser", one of the next two words is "workaround".

So one possible workaround is to use contenteditable p, place it on top of svg and make transformations to this.

If some svg element have to be on top of contenteditable p, then we must add one svg more on top.

This combination can be rendered via phantomjs to png/pdf.

If we want svg masks, clips or filters, they are not supported in any browser on html-elements. So to make them work, we must convert text on contendeditable p to paths (using font data from server or get pathdata clientside using this when it is more complete) and mask or clip these.

Not very easy workaround, but SVG support for editable textareas is very poor. Editable textarea is not implemented nearly in any browser for now although the spec here and here is rather old. Opera 12.02 has some sort of support, but buggy: try here to move cursor using up and down arrow keys.

Upvotes: 3

Related Questions