25

I am working on a website that has both an English and Arabic version, and the site has a lot of icons. Can I flip all images in right to left direction for the Arabic version as shown below?

enter image description here

7
  • 4
    It seems like at least the "i" shouldn't have the letter part mirrored, even if the speech bubble is.
    – Casey
    Oct 7, 2016 at 14:02
  • 11
    Mirroring that chart icon causes sales to go from good to bad
    – Kyeotic
    Oct 7, 2016 at 17:20
  • 6
    @Tyrsius : when user read from right to left the chart icon means bad to good i think.
    – Krish
    Oct 8, 2016 at 0:33
  • Additional question: What about music player icons? I guess since they denote "directions", they must be mirrored, right? So, in arabic music player app, the 'previous track' button should point to the right and 'Play' button should point to the left. Is this correct?
    – Pascal
    Dec 4, 2018 at 10:03
  • 1
    Also, wanted to add that icons that don't denote the passage of time (like a magnifying glass for searching), shouldn't be mirrored since they represent physical objects and the majority of the population is right-handed, so even if they write RTL, the majority will pick up a magnifying glass with the right hand, so the handle still points to the right. Apr 26, 2019 at 17:18

2 Answers 2

25

You need to consider an icon's usage and meaning to determine if it should be mirrored.

This Google Material Design article gives a detailed description of icon mirroring.

The main difference between left-to-right (LTR) and right-to-left (RTL) interfaces is how the passage of time is articulated. Languages that use LTR scripts depict time as passing from left to right, and languages that use RTL scripts depict time as passing from right to left.

What I assume is a download icon does not need to be mirrored because it does not display the passage of time.

download icon

The icon displaying a body of text needs to be mirrored to reflect the text-alignment of the script.

icon with paragraph

Icons that contain representations of text need careful mirroring. Text is right-aligned in RTL. If there is a paragraph indent at the beginning of a paragraph, an unfinished line at the end of the paragraph, or a ragged right side, the icons need to be mirrored.

The icons which display English script need to be mirrored and localized.

Because text in graphical elements will always require localization, try to convey concepts in ways that don’t use text.

I think the speech balloon used for the below icons denote text-alignment so they should be mirrored. You should not mirror the English characters but instead replace them with Arabic script.

help and information icons

8
  • 7
    If you can avoid using Arabic-specific icons, then your icons will be usable in other right-to-left languages like Hebrew.
    – Flimm
    Oct 7, 2016 at 10:09
  • 1
    Hebrew uses the same question mark as English.
    – TRiG
    Oct 7, 2016 at 10:20
  • 9
    In the case of the question mark and the i, the symbol wouldn't have to be mirrored, but I think the balloon would. So you'd have an attachment point on the right instead of on the left.
    – SQB
    Oct 7, 2016 at 11:55
  • 4
    @krish For Arabic, yes - Arabic uses a question mark that appears similar to the English one but opens the opposite way. For Hebrew, no - Hebrew uses the same question mark as English. Greek, incidentally, is written from left to right but uses a question mark that looks like an English semicolon. These issues are more complicated than just flipping things around. The letter "i" [I assume for "information"] may or may not be familiar and meaningful to audiences that speak various other languages.
    – Random832
    Oct 7, 2016 at 18:53
  • 2
    I guess the download icon also doesn't need to be mirrored because it's symmetrical about its vertical axis...
    – Thomas
    Oct 7, 2016 at 22:58
9

RTL (right-to-left) indicates a different text direction, but not a mirror image of the same content in LTR (left-to-right). Mirroring the Latin letter R roughly gets you the Cyrillic letter Я, which is the (horizontal) mirror image visually speaking, but does not by any means indicate a change in text direction. Similarly, images cannot be simply mirrored horizontally either.

To use your pictograms as examples, the text balloon should be mirrored, because otherwise the protrusion would point the wrong way in the text flow, and therefore the flow of time as explained by Andre Dickson's citation. Mirroring the graph, however, requires more careful thought; how are graphs read in RTL languages? If they are read the exact same way as in LTR languages, mirroring the graph changes its meaning from increasing to decreasing values on the Y-axis. Multilingual support is a specialty that requires its own research, and you may find it beneficial to collaborate with native speakers of the languages you are working on supporting.

3
  • Good point about the graph Oct 7, 2016 at 11:57
  • if so i need to check with native Arabic users
    – Krish
    Oct 8, 2016 at 0:36
  • 1
    +1 for "collaborate with native speakers". Having said that, well-designed icons are usually language neutral. I'm sure that a native Arabic speaker would understand an English-style question mark, even though an Arabic question mark resembles its mirror image. Most of your icons shouldn't need to change at all - those that do will probably need something other than a straight mirror-flip. Oct 8, 2016 at 1:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.