Multiline editable textarea in SVG
- by Timo
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 *).
EDIT: Foreignobject rotation works on Firefox 15.0.1, but not in
Safari 5.1.7 (6534.57.2), Chrome 22.0.1229.79, Opera 12.02, IE 9. Tested on Mac OS X 10.6.8.
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.
