Text right-to-left direction with mathematical text

UI Frameworks SwiftUI
asgalon OP
Created 3w
Replies 6
Boosts 0
Views 155
Participants 1

Hi,

I am writing a calculator app in Swift 5 and decided to support eastern asian numerals to make it a bit interesting. The numeric display itself works well in Arabic langauge setting, but I have a protocol view that reports the entered data and results. I do it in a Grid with two Text items, one for the input and one for the result. The result contains a numeric string in U0660... arabic numerals, and that looks fine. The input is a construct looking like Text(number1) + Text(" ") + Text(operation), so it goes into a single Grid cell. The standard version looks like this:

but the arabic version shows the numbers and operation symbols in the wrong sequence:

I guess that has something to do with the mathematical symbols such as + and = simply register as ltr Text and confuse the text layout. If I localize π, the result looks different: So my question would be: How do I force a fragment such as Text(" +") to go in rtl direction? Is this a SwiftUI topic or doesit go deeper? I am looking at the Text element now, but may be that is the wrong approach.

Replies  6
Boosts  0
Views  155
Participants  1
asgalon OP
3w

What happened to the images? first one, english:

second one: arabic:

Here, "π /" is correctly layed out as ""

0
asgalon OP
3w

when I add a translation for ln, the result for 0.5 [ln] looks correct:

But do I want to add localizations for the arithmetic function symbols? Are there specific arabic rtl versions in unicode for those too? I guess calligraphically it would make sense.

0
asgalon OP
3w

Ah well, found something... I had to explicitly add .flipsForRightToLeftLayoutDirection(true) to the "baked" Text at the end. That is

func makeText(stuff) -> Text {
   result: Text = Text("") + Text(number) - Text(op) + ... + Text(...)
  return result
...

GridRow {
    makeText(stuff).font(...).flipsForRightToLeftLayoutDirection(true)
...

and the result looks different. now two consecutive Text items in arabic are put in the wrong order and arabic text and numbers are going the wrong way.

So this is mainly useful for mirroring, with the parentheses and such

0
asgalon OP
3w

The trouble with .flipsForRightToLeftLayoutDirection at this point is that it returns a View and not a Text, so I can't apply it to operator components in the Text addition operation, if I am not missing anything

0
asgalon OP
3w

ok, this looks a bit better. I now do it only on operations and stuff the result into a HStack:

			HStack {
				ForEach(elements) { item in
					textFromElement(element: item).flipsForRightToLeftLayoutDirection(item.type == .OPERATION)
				}
			}
	}

The result looks a bit nearer to what I want:

Now I have to make a distinction between operators that have to be mirrored (parentheses, arithmetic operatiors...) and operators that show arabic text and hve to stay how they are....

I am not sure if that really is the best solution, but it may produce some acceptable result in the end.

0
asgalon OP
3w

Ok, this will look almost useable when i chave completely localized the operators:

0
Text right-to-left direction with mathematical text
First post date Last post date
 
 
Q