1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Design Issue Many icons need to be flipped horizontally for RTL languages

Discussion in 'Resolved Bug Reports' started by Ahmed, Nov 28, 2011.

  1. Ahmed

    Ahmed Well-Known Member

    I noticed that some icons (whether they are stand alone icons or included in a sprite) are illogical and just do not seem right. They need to be flipped horizontally to suit and work correctly and logically in RTL languages.

    Here are two images as an example for how they should be for both RTL and LTR.

    For LTR (The default, unmodified):


    For RTL (modified):

  2. Kier

    Kier XenForo Developer Staff Member

    Er... really? :cautious:
    Floren, M@rc and digitalpoint like this.
  3. Ahmed

    Ahmed Well-Known Member

    Yes. :sneaky:

    For example, the separator in the navbar. It needs to be between the small arrow and the title instead being behind the arrow. See the attached image:

  4. Mike

    Mike XenForo Developer Staff Member

    That one is probably the only significant one -- it seems to me that the rest are changes for the sake of changes. They represent abstract concepts and are just to impart information quickly.
    Floren likes this.
  5. Ahmed

    Ahmed Well-Known Member

    There are others that look weird/wrong when used in RTL mode, e.g. the two arrows, the balloon, stars and the question mark. If you are going to do anything about the separator, why don't you just change them all (as it's used in vB!)? :cautious:
    Even if they only are to represent abstract concepts, they still look wrong in our eyes (by our I mean people who their language is RTL). :)
    bousaid likes this.
  6. kkm323

    kkm323 Well-Known Member

    I finally got what you mean:D and it make sense to flip some of those icons(y)
    thanks ahmed
    Ahmed likes this.
  7. Ahmed

    Ahmed Well-Known Member

    It took you too long to figure that out, mate. :D
    You are welcome! :)
  8. Floren

    Floren Well-Known Member

    I don't see how your eyes are different than mines, I bet I see the world like you do. And since you are so extreme about the images, you forgot to flip the interdiction sign... or that does not applies to your people? I agree with Mike, the ONLY issue is the separator into navbar.
  9. kkm323

    kkm323 Well-Known Member

    poeple who use RTL or speaks the language can tell the different

    how are you?
    how are you؟
  10. James

    James Well-Known Member

    A quick fix might be to apply the following CSS to the elements that need flipping:
    transform: scaleX(-1);
    bousaid and Ahmed like this.
  11. Ahmed

    Ahmed Well-Known Member

    Probably you see the word as I do in most cases, but I know for sure there are many things looks different in RTL-people eyes, what I mentioned is and example of that, that's why I and others noticed them in the first place. And I thanks for the interdiction sign notice, but I'm going to pass it for now (even if it needs to be flipped as well). If you and Jay knew enough about RTL people and their language(s), both of you were not going to make fun of my post.

    Anyway, I'm sure there is a logical reason the arrow direction is to right instead of left, and the quick navigation arrow points to the top right corner instead of the top left corner in the original image. Well, we have the same logic, only in the other direction. ;)
    wwwicked likes this.
  12. Ahmed

    Ahmed Well-Known Member

    Normally we just flip any image that needs to be flipped to suit RTL language ourselves, but it's hard for many site admins to do that when the image/icon is within an sprite image, that's why I opened this issue.
  13. wwwicked

    wwwicked Active Member

    Whether they are abstract concepts, you'd still want users of the software to view them comfortably. For example, if I see a pencil icon in an interface, I expect it to be angled like this: / If I were to see a pencil like this: \ it would feel uncomfortable to me, as if it were against the flow of my scanning. I can well understand why people who read from right to left might prefer some icons the other way round (the callout of a speech bubble, for example).
    alexD and Ahmed like this.
  14. Mike

    Mike XenForo Developer Staff Member

    Practically speaking, with this potentially applying to any style, it's not really feasible (at least in the short term) without changing/adding a lot of style properties. If you're an RTL user, it likely is easier to simply flip the individual icons in the CSS sprite.
  15. Ahmed

    Ahmed Well-Known Member

    Yes, but I'm sure you know that it's not easy for the normal customers/admins to edit CSS sprites. It needs some skills and a lot of work to do it right.
    Anyway, it's OK with me! I can fix that and have no issue, but I thought it's worth to report it as I'm sure it's an issue and an important matter to some RTL customers.

Share This Page