No announcement yet.

flex direction rtl screwing up certain characters: !?. etc.

  • Filter
  • Time
  • Show
Clear All
new posts

  • flex direction rtl screwing up certain characters: !?. etc.


    Please make an html page with the following code:

    <div style="width: 100px; margin: auto; display: flex; direction: rtl; background-color: pink;">
    <span style="margin: auto;">Hola!</span>

    Note that the text "Hola!" is in a div with flex display and the direction is rtl.

    Apparently, this causes certain text characters to be laid out in the right-to-left order despite where it is with respect to the rest of the text. For example, the ! appears to the right of 'Hola' in the html code but to the left when rendered in the browser.

    This should never be. The rtl style is meant to arrange the layout of elements, not text characters. The text 'Hola!' is one element, it should be treated as a single unit. If I'm wrong about this, why on Earth would the browser choose some characters and not others to be seperated from the rest such as to flow according to the rtl setting of the direction style of flex divs? For example, what if someone wanted a right-to-left flow, but one of the elements was a couple a sentences such as:

    Hey! Are you OK?

    Would that appear like:

    ?Are you OK !Hey

    Like seriously! WTF?!