trouble with tspan elements in Firefox

I am trying to see if it is practical to implement a slide 
editor/presenter in SVG and have run into some problems with the 
positioning of sequences of tspan elements.

The basic idea is to emulate a text editing caret using a tspan 
element with a vertical bar character, e.g.

  <defs>
    <rect id="bullet1" x="0" y="0"
    width="20" height="20" fill="#55C"/>
  </defs>

  <g class="paragraph">
    <use x="85.71429"  y="145.21933" xlink:href="#bullet1"/>
    <text x="135.71429" y="165.21933"
    fill="black"><tspan id="caret" fill="red" >|</tspan><tspan>This
    is the first point</tspan></text>
  </g>

which renders a square bullet, a caret and the text for the 
"paragraph".

I set event handlers to move the caret to the right or left when the 
corresponding key is pressed. The problem is that Firefox introduces 
an error in the position of the second and third tspan elements, 
where the additional space introduced is roughly proportional to the 
amount of text in the first tspan. Opera and Bitflash don't suffer 
from this problem.

Placing dx attributes on both text and tspan elements seems to be 
recipe for masochism. It is rather to predict how existing 
implementations behave, so I rapidly gave up trying. The SVG spec 
doesn't make it obvious (at least to me) how dx should work in such 
cases.

I have also tried using a vertical line to draw the caret, but 
current SVG implementations are inaccurate in the extent they report 
for tspans. I suspect this may be related to errors in the mapping 
from the internal coordinate system and the coordinate system used 
when rendering to the target viewport, but that is just a guess.

In case you wondered, yes I have tried the editable feature for SVG 
Tiny 1.2, but at least on Bitflash, this results in a pop-up dialog 
box for the text, and not the wysiwyg user experience I am trying to 
provide.

I am however very impressed by the SVG microDOM compared to the DOM 
available on Firefox2 and Opera9. The DOM3 keystroke and text input 
events are a great improvment and there are lots of other nice 
details!

Now if only I could lay my hands on an implementation of SVG 
Tiny 1.2 that is truly 100% compliant to the spec ...

  Dave Raggett <dsr@w3.org> http://www.w3.org/People/Raggett

Received on Sunday, 23 September 2007 16:58:13 UTC