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?
-
4It seems like at least the "i" shouldn't have the letter part mirrored, even if the speech bubble is.– CaseyCommented Oct 7, 2016 at 14:02
-
11Mirroring that chart icon causes sales to go from good to bad– KyeoticCommented Oct 7, 2016 at 17:20
-
7@Tyrsius : when user read from right to left the chart icon means bad to good i think.– KrishCommented 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?– PascalCommented Dec 4, 2018 at 10:03
-
1Also, 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.– Alejandro García IglesiasCommented Apr 26, 2019 at 17:18
|
Show 2 more comments
2 Answers
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.
The icon displaying a body of text needs to be mirrored to reflect the text-alignment of the script.
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.
-
7If you can avoid using Arabic-specific icons, then your icons will be usable in other right-to-left languages like Hebrew.– FlimmCommented Oct 7, 2016 at 10:09
-
1
-
9In 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.– SQBCommented 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. Commented Oct 7, 2016 at 18:53
-
2I guess the download icon also doesn't need to be mirrored because it's symmetrical about its vertical axis...– ThomasCommented Oct 7, 2016 at 22:58
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.
-
-
-
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. Commented Oct 8, 2016 at 1:26