3

I was watching Apple's 2022 video "Design for Arabic". In their weather application example, I found that they had two different representation of Degree symbol refer the image below.

I assume both are acceptable by the users considering they see this kind of inconsistencies everywhere.

Question here is, what is the "right" way of doing this? Not just

  1. Degree symbol °
  2. what about trending arrow in stocks (ref: Google widget for Stocks below)
  3. What about %
    1. when we use Western numerals 12.0%
    2. When we use Eastern numerals %0.٢١ (I do not know, what is the correct representation of 0 in Eastern numeral)

And please share any recommended resources.

decree sign in header vs carousel

Google .ae widgets

  1. Stock Widget for trend arrow and percent % Stocks widget

  2. Weather widget for Degree ° Google Weather Widget

2
  • 1
    Someone with enough SO credits, please add arabic tag to this question. Thanks
    – palaniraja
    Jul 12, 2022 at 0:11
  • 1
    This is a very good question. As for the tag, the tag is RTL (right to left) which applies to all languages that reads from right to left, not just arabic, otherwise we'd need to add all languages in the world
    – Devin
    Jul 12, 2022 at 15:36

1 Answer 1

1

It's not clear whether this was a bug in the version of iOS you were running, or if you didn't restart Weather after switching to Indic/Eastern numerals. Testing on iOS 17.2.1, the Weather app is pretty consistent:

Weather App in Arabic

But it is true that RTL layout is often a mess, and people who read RTL get used to it being a mess. This is also true of anyone who doesn't work primarily in English, regardless of the script. The state of human-empathetic localization is pretty bad out there. We can do better.

Note that I have never lived in an Arabic-speaking culture, do not speak Arabic, and can barely read it. What I'm going to describe is from years of studying Arabic as a hobby, years of text layout work, and experience building apps.

To address your general UX questions, based on my experiences:

There is no single answer for all Arabic-speaking cultures. I personally split the world into "Saudi Arabia" (as a general class, not just the specific country) which will tend to be the most purely Arabic, and "UAE" which will pick up the most non-Arabic influences. Default "Arabic" is generally closest to Saudi Arabia.

But even within a country, I've seen a ton of variation in how things are written. Native Arabic speakers do not have a uniform way that they write things. This is especially true online.

Arabic numerals come in Western (what Latin-using cultures call "Arabic numerals") and Eastern (also called "Indic"). Eastern numerals are "backwards" of Western numerals, starting with the lowest digit and moving to the largest. But since they're RTL, they actually wind up in the same order, with the most significant digit on the left. Saudi Arabia often uses Eastern numbers (though I've seen tons of places that official, government SA documents use Western numerals). UAE tends to use Western numbers.

The Eastern digits are: ٠١٢٣٤٥٦٧٨٩. 0 is ٠. 9 is ٩. They basically work like Western digits.

Arabic temperatures use the same degree symbol as in Latin: DEGREE SYMBOL (°). It goes "after" the number, just like in European writing. That puts it on the left.

I'll skip the trending arrow question. I don't think there's any standard for where that should go in either Arabic or Latin. But you should likely treat it as flowing from right-to-left (which it seems Google does). The word after the arrow is "today," (الیوم) just like in the English version. They just let the spacing be a bit weird (so that's not ideal).

Arabic percentages use ARABIC PERCENT SIGN (٪), which looks a lot like PERCENT SIGN (%), and it goes after the number, on the left. But Al Jazeera, a major Arabic-language news service, writes percentages in Arabic as "%44" using Western numerals, the Western PERCENT SIGN, but with the sign on the left. So absolutely do not assume that there is a single rule.

Arabic decimals use ARABIC DECIMAL SEPARATOR (٫), which looks a lot like COMMA (,). Or they may use COMMA. Or they may use PERIOD like in Western numbers. I've seen them all. But ARABIC DECIMAL SEPARATOR is most correct.

Ultimately, things are not universally consistent, even in text written by and for Arabic speakers. If you don't have a good way to get it right, you may be wiser to just use Latin conventions for numbers. Readers will almost certainly understand it, and it would be better than doing something confusing like getting your digits backwards. But if you're willing to dig it, making it beautiful for all of your users is definitely a worthy goal.


My expertise is in the Apple ecosystem, so I'm going to discuss some details about that, even though it may be a little off-topic here. I hope it's useful nevertheless.

The key thing is that the rules are complicated, inconsistent, and country-specific. If you can possibly avoid doing this by hand, you should. You will mess it up. On Apple platforms, the system will do it for you, and you should let it.

For example, in SwiftUI:

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("\(34, format: .percent.precision(.fractionLength(2)))")
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
        .environment(\.locale, Locale(identifier: "ar"))
        .environment(\.layoutDirection, .rightToLeft)
}

This will correctly format the value as ٣٤٫٠٠٪؜. This automatically takes care of many issues:

  • Indic/Eastern numerals
  • Numerals in the correct direction
  • ARABIC DECIMAL SEPARATOR as decimal separator
  • ARABIC PERCENT SIGN on the left.

Even more, it takes care of per-country cultural differences. For example, if you use the generic Locale ar (Arabic), it will use Eastern numerals. It'll also do that for ar_SA (Saudi Arabia). But if you use ar_AE (UAE), it'll use Western numerals (34.00%). And it'll respect any customizations the user has applied.

To display a temperature, you can use:

let temp = Measurement(value: 27, unit: UnitTemperature.celsius)
...
Text("\(temp, format: .measurement(width: .abbreviated, usage: .weather, hidesScaleName: true))")

And this will correctly display ٢٧°‏.

The rules are very complex, and vary from country to country, and user to user. Define your data and let the system do the work.

1
  • To answer your which iOS version. I think i took this screenshot from the WWDC video developer.apple.com/videos/play/wwdc2022/10034 timestamp 5:14, could very well be assets used by the presentation Also thanks for the iOS snippets, i was also trying to find a right way to do things in iOS. In our case, the trend arrows are not text but an image. Though iOS allow us to do an image variants for RTL locale, it is still based on us mirroring the image if we know this locale is going to flip the direction.
    – palaniraja
    Jan 23 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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