The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rtl specific problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #168022

    Here is my site:
    Since my language is Hebrew, I rtl-ed the site.
    In the header at the top there is the fields: items450$8
    while it should be: 450$ פריטים x (x relates to 8)
    The original English site is here:
    and the original English fields are so:
    120$ x items
    Can someone help please?


    Can you not specify a class for that specific element (or group) that returns the styling to LTR?

    I confess I know very little about LTR/RTL.


    In the header at the top there is the fields: items450$8 while it should be: 450$ פריטים x (x relates to 8)

    When I look at the site, it says “items 0 $0” —is that the part you’re looking at?

    Browsers are smart* with text direction: if they see words that are certainly LTR, they’ll usually put them LTR, even if they’re in the middle of a RTL page. I know it’s coming from a plugin somewhere, but can you get the word “items” translated?

    * “smart”, for better or worse (but usually just for frustrating web devs).

    edit it may also be a grammar issue. RLT doesn’t change the order of words, just the direction. If the plugin doesn’t know it’s writing hebrew, it might simply be stubbornly putting the words in the wrong place…?


    I ‘ll try to follow your advices. Is it posible to determine whether the source is from a php or javascript file?


    So your problem is caused by two issues. Firstly the browser ignores the two containing spans when rendering the text on screen so your text is essentially “450$ 8 items”. The spans only get used to apply CSS. Once you flip the page into RTL, the bi-di algorithm cuts in and now the directionality of the text content determines the screen order. This leads to the second issue that is caused by the dollar sign which is weakly directional character and the number which is strongly left-to-right. When these are all mixed in, the algorithm splits the “1 item” span around the first span.

    The fix is very easy – you need to add an LRM (left-to-right marker) (unicode char \u200e) character after the dollar sign which will force the text ordering to consider the two pieces of text as separate parts.

    Unicode Bi-di algorithm

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.