0

To make a webpage responsive I migrated the graphics and divs to a SVG image. The imgae itself runs fine in all browsers now. But I also migrated the dynamically filled text passages to the SVG with <text> and <tspan>elements. It all works, the values are updated and all scales wll, when emulated with different browser developer tools.

But when it comes to aligning the grouped texts the browsers behave differently and give me headaches. I wanttwo columns of values. The right column should be aligned to the right, and the right one aligned to the left. To achieve this I used text-anchor="end" with the left group of values. That group causes the problems with different browsers.

When I use indented, readable & editable (IMHO) code Chrome and Firefox move the first two lines a notch to the left (or the last one to the right?) and IE/Edge display all in line:

FF/Chrome left - IE/Edge right

When I write the code of the <tspan> elements within the <text> element completely inline FF and Chrome display it all nicely, but this time IE/Edge indent the last line to the left.

IE indents to the left

I could reproduce the problem with a fiddle: https://jsfiddle.net/bL16wv3z/12/

Chrome and FF will the right column well aligned, while IE/Edge will display the left column well aligned.

The example code used in the fiddle:

<div id="svgContainer">
   <svg viewBox="0 0 923 500">
      <g transform="translate(50,5)">
         <text text-anchor="end">
            <tspan></tspan>???</tspan>
            <tspan dy="1.2em" x="0">???</tspan>
            <tspan dy="1.2em" x="0">???</tspan>
         </text>
         <text dx="5">
            <tspan>A</tspan>
            <tspan dy="1.2em" x="5">B</tspan>
            <tspan dy="1.2em" x="5">C</tspan>
         </text>
      </g>

      <g transform="translate(150,5)">
         <text text-anchor="end">
            <tspan></tspan>???</tspan><tspan dy="1.2em" x="0">???</tspan><tspan dy="1.2em" x="0">???</tspan>
         </text>
         <text dx="5">
            <tspan>A</tspan><tspan dy="1.2em" x="5">B</tspan><tspan dy="1.2em" x="5">C</tspan>
         </text>
      </g>
   </svg>
</div>

So how to make the alignment work in all browsers, or am I missing something in the formatting/placement?

Thanks in advance

Blind Seer
  • 492
  • 1
  • 5
  • 17
  • whitespace in elements does have significance. If you don't want it to appear in the output, don't put it in the markup. – Robert Longson Feb 14 '18 at 09:30
  • Removal of the indention doesn't help, though. Only if I also remove all line breaks it will align... But only in Chrome/FF, while it will be out of line in IE/Edge and vice versa. – Blind Seer Feb 14 '18 at 09:33
  • there are still line breaks between the element and the first and last elements. – Robert Longson Feb 14 '18 at 09:35
  • So there is no way to keep the code readable/editable (I guess collegues will claim my head if they have to edit the SVG when I'm out of office) and formatted? So why do the different browser behave differently and only one space seems to be seen? – Blind Seer Feb 14 '18 at 10:32
  • Because layout is hard and browsers have bugs. – Robert Longson Feb 14 '18 at 10:40

0 Answers0