Text alignment in IE11

[willw-git]

IE 11 textwrap displaces successive wrapped lines outdented to the left.

Using FireFox to display the D3 graph produces this:

(the red rectangle is the bounding one supplied to d3textwrap).
whereas IE11 with the same code produces this:

It seems to be miscalculating (overestimating) the text width on successive lines.

[vijithassar]

Hmm, I can't reproduce this in IE11 or any of the older versions as simulated in the F12 Developer Tools console. Per the screenshots you submitted with the other bugs you reported, the bl.ocks demo does seem to line wrap text properly in IE11 (although it's still placing it in the wrong box, as you noted). Can you post the code that's generating the example above?

[willw-git]

Hi Vijith,

It will take me a while to isolate that bit of code as I am fire-fighting elsewhere on another project. But my use case was very straightforward - ie it was using your wrapper to post a block. I hadn't touched your code at this point, and the Webkit/FireFox renderings worked correctly.  My impression was that the algorithm was getting the wrong information for the length of text in each line, hence the cumulative error. I wondered if the interplay of CSS styles on text was somehow borking this calculation, as I was aware that your example was ok in this respect. My text was sized by Bootstrap http://getbootstrap.com/css/ in the first instance - you might try applying that, and then a font sizing CSS style on top.

However, since my solution worked around the problem so completely I didn't bother analysing the cause further. It seems to me that if you applied my approach (ie fixing the left hand side in the right place, instead of trying to work back towards it at the end of each line) and worked the code through properly instead of just bodging it in as I have, you will be able to simplify that part quite nicely, and get rid of some of your accumulated total handling and be more robust. This is a cop-out, but it is a /working/ cop-out!

(Of course, if you want to get fancy and wrap text in fancy shapes then you will have to put it all back in again - perhaps an exercise for another day. ;-) )

Regards
Will

[vijithassar]

I still haven't been able to reproduce this myself, so I'm going to close this issue. Thanks for the feedback though! If you have some sample code that reliably reproduces this problem and it isn't because of Bootstrap, please feel free to drop a comment in here and I'll be happy to reopen it and take a look.