none
Incorrect display of RTL spans

    Question

  • Hi Everyone,

    We are stuck with an issue in IE11/Edge. We have created this JSFiddle to represent the issue:

    https://jsfiddle.net/upfmLape/

    The rendering of the spans are (in my opinion) incorrect and not at all intuitive. The same is "correct" in any other browsers.
    The above markup modified by line-breaks (or space for that matter) after each tag closure. (markup beautified basically) 

    https://jsfiddle.net/upfmLape/1/

    Is there any explanation for the above issue? Why does the tags have to be separated in the HTML to be correctly rendered?
    We were suggested before to edit the <HTML> tag with the dir attribute as well, so we made a local html file with the same content provided in the jsfiddle examples, and it made no difference.

    Thank you very much for your inputs!

    With my best regards,

    Thursday, November 16, 2017 9:21 AM

All replies

  • Hi Gregorius,

    Through your description, i think this issue is related to the HTML elements parse in IE, i think this article may be is helpful to you, please check:

    https://blogs.msdn.microsoft.com/ie/2010/09/13/interoperable-html-parsing-in-ie9/ 

    Best Regards,

    Eric Du

    Monday, November 20, 2017 2:45 AM
  • Hi Eric Du,

    Thanks for the link! It was quite useful. Indeed the Whitespace part of the article seems to be the relevant block in this question.

    At a first glance what I see is that the only way to go is to recursively scan the DOM and withdraw all text nodes containing only whatever number of whitespace characters while keeping the original, unmodified version as well. I did not mention, but the issue comes up in a WYSIWYG editor on a website, so it is not that easy to fix. If one wants to preserve the possibility to present the editor the markup in the way that it was created, it needs to be stored.

    The other part of the issue is that as you can see in the example, all whitespaces, even the new line character brings an extra inline whitespace into the rendered page. So it even changes content, not only flow.

    I need to ask if you see any chance that such thing would be ever fixed in IE11 + Edge, suffering from the same, while Chrome, Safari and Firefox managed to overcome this issue.

    Thanks!
    Kind regards


    Tuesday, November 21, 2017 9:06 AM