Layout corrections for RTL language environments, including completely flipped Grapher #2391

Avid29 · 2025-10-10T03:18:35Z

Fixes #1352.

This PR is a reopening of #1812, against the main branch instead of the outdated master branch, with approval from @tian-lt

Description of the changes:

This change is created because the graph renders backwards when the app FlowDirection is RightToLeft.

This change overrides the FlowDirection for the Grapher control, fixing that bug

How changes were validated:

Could not be properly verified since the Grapher is close source.

tian-lt · 2025-10-10T03:30:59Z

@HuanglinXu21 The change looks good to me. Could you please help follow up this PR and verify if the fix is valid or not?

HuanglinXu21

Looks good in my PC.

HuanglinXu21 · 2025-10-10T07:14:53Z

The pipeline of Main branch is not working properly right now. It should be an SDK version issue. We will fix it later.

tian-lt · 2025-10-10T07:23:58Z

Hi @Avid29, the change looks good and we've tested that it's working.

Now, it seems the pipeline is broken due to the unmatched SDK version in the pool's machine. I'll take some time to handle it. After that, we can proceed on your PR. Could you wait for a while until we fix the pipeline?

Avid29 · 2025-10-10T09:00:16Z

@tian-lt Of course! Just lmk if/when you need any action on my part, and I'll get to it ASAP.

Avid29 · 2025-10-10T10:28:38Z

Oh, I just realized that the numpad is backwards on the graph page as well.

Conveniently, I can test that myself. It is currently not mirrored on other pages such as the Regular or Programmer page. I will explore how it's handled here, and add it to this branch, unless you believe this is best served as another PR.

…e and value on the right

Avid29 · 2025-10-10T11:49:12Z

I've flipped the GraphNumpad to maintain its standard layout even in RTL contexts.

This is expected behavior for RTL layouts, and brings the GraphNumpad to match with the rest of the calculator

On the left is the dev calculator graph layout with my changes. On the right is the scientific view for version 11.2502.2.0.

P.S. The operator panel is stuck LTR in both the scientific view programmer view, and should be changed to inherit RTL from the root FlowDirection, but that's for a different PR

Avid29 · 2025-10-10T12:00:37Z

I've also changed the EquationInputArea to ensure the variable is on the left and the assigned value is on the right.

I know this is more natural for Hebrew speakers who write mathematical equations left to right, and I confirmed it's the same for arabic speakers by finding a math lecture in Arabic on YouTube. I've also found a video of a Hebrew math lecture, so you don't have to take my word for it.

Hebrew math lecture
Arabic math lecture

Avid29 · 2025-10-10T12:03:54Z

@microsoft-github-policy-service agree

tian-lt · 2025-10-16T08:47:41Z

src/Calculator/Resources/he-IL/Resources.resw

  </data>
  <data name="MinTextBlock.Text" xml:space="preserve">
-    <value>Min</value>
+    <value>מינימום</value>


Thank you for correcting the translation.
However, these strings are generated by an internal automation tool. We need to report the translation error to the automation team so that they can fix the bot.
Could you please revert the changes of this file?

FYI, I'll report this translation issue to the automation team and they will evaluate whether or not this is an translation error.

Sorry, yes. They're both equally valid translations, but the text is next to a TextBox and which side it should be on depends on how that's written. I was playing with automating the flow direction based on the character set but decided that was a bit ridiculous. I forgot to revert the localization file changes afterwards 😬.

Since I've seen this now, I'm going to give another read over to make sure I didn't miss anything else.

Copilot

Pull Request Overview

This PR fixes Graph View layout issues in right-to-left (RTL) language environments by explicitly setting FlowDirection="LeftToRight" on graph-related controls to prevent backwards rendering.

Adds explicit FlowDirection="LeftToRight" to graph controls to override RTL inheritance
Restructures GraphingNumPad.xaml layout by moving grid definitions into a nested container
Updates Hebrew localization for Min/Max labels from English to Hebrew text

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml	Sets LeftToRight flow direction on the main Grapher control
src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml	Forces LeftToRight flow direction and left alignment for equation variable containers
src/Calculator/Views/GraphingCalculator/GraphingNumPad.xaml	Restructures layout with nested grid and explicit LeftToRight flow direction
src/Calculator/Resources/he-IL/Resources.resw	Updates Hebrew translations for Min/Max labels and removes BOM character

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-16T08:49:25Z

src/Calculator/Views/GraphingCalculator/GraphingNumPad.xaml

                                           IsTabStop="false"/>

-                <controls:CalculatorButton x:Name="AbsButton"
+                <!--  Is there a reason the usual NumberPad is not used here-->


[nitpick] This comment appears to be a developer question rather than proper documentation. Consider either removing it or converting it to a proper TODO/FIXME comment with context about what should be investigated.

Suggested change

Copilot · 2025-10-16T08:49:25Z

src/Calculator/Resources/he-IL/Resources.resw

  </data>
  <data name="MinTextBlock.Text" xml:space="preserve">
-    <value>Min</value>
+    <value>מינימום</value>


[nitpick] The Hebrew translations for Min/Max labels should include comments explaining the translation choices, similar to other entries in the resource file that have descriptive comments.

Copilot · 2025-10-16T08:49:26Z

src/Calculator/Resources/he-IL/Resources.resw

  </data>
  <data name="MaxTextBlock.Text" xml:space="preserve">
-    <value>Max</value>
+    <value>מקסימום</value>


[nitpick] The Hebrew translations for Min/Max labels should include comments explaining the translation choices, similar to other entries in the resource file that have descriptive comments.

tian-lt · 2025-10-16T12:08:52Z

Hi @Avid29, we've fixed the GH Action problem at the main branch. Could you merge your PR branch with the main so that we can make the PR check pass?

Avid29 · 2025-10-16T15:02:23Z

@tian-lt Done 😊

tian-lt · 2025-10-17T04:55:45Z

src/Calculator/Resources/he-IL/Resources.resw

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>


Looks like there's still some change. (Maybe it's end-of-line. Could you revert it back?

Yes, sorry. I'd reverted it by hand, so the encoding got changed still. Now I've just copied the file back from main and this should be fully resolved.

tian-lt · 2025-10-17T05:03:45Z

The changes look good to me.

@Avid29 BTW, I found that the arrow button that scrolls the function bar looks not good. Thought it's also a bug in the main branch, it will be great if it can be fixed by this PR easily.

@HuanglinXu21 Do you have any comments?

Avid29 · 2025-10-17T05:09:50Z

@tian-lt I will gladly take a look!

I was focusing on the Graph section since that's what I had named the PR for, but if I take care of that I can also flip the operator panels in other views and give the full app a look over for small oddities like that.

Avid29 and others added 2 commits March 24, 2022 02:23

Added FlowDirection override on Grapher

6557485

Merge branch 'microsoft:main' into graph_flow-direction

ae0a347

HuanglinXu21 reviewed Oct 10, 2025

View reviewed changes

tian-lt previously approved these changes Oct 10, 2025

View reviewed changes

Avid29 added 2 commits October 10, 2025 14:20

Fixed GraphNumPad layout to ensure LTR FlowDirection

1ff5e07

Fixed EquationIInputArea to still show variables on the left hand sid…

0e9bbf2

…e and value on the right

Avid29 dismissed tian-lt’s stale review via 0e9bbf2 October 10, 2025 11:36

Avid29 requested a review from tian-lt October 10, 2025 12:03

Avid29 changed the title ~~Fix Graph layout direction for RTL language environments~~ Fix Graph View layout for RTL language environments Oct 10, 2025

tian-lt reviewed Oct 16, 2025

View reviewed changes

tian-lt requested a review from Copilot October 16, 2025 08:48

Copilot AI reviewed Oct 16, 2025

View reviewed changes

Reverted localization changes

6ff9b8f

Merge branch 'microsoft:main' into graph_flow-direction

ebd8fd9

tian-lt reviewed Oct 17, 2025

View reviewed changes

tian-lt previously approved these changes Oct 17, 2025

View reviewed changes

Fixed encoding on Resources.resw

4c563a6

Avid29 dismissed tian-lt’s stale review via 4c563a6 October 17, 2025 05:03

Avid29 changed the title ~~Fix Graph View layout for RTL language environments~~ Layout corrections for RTL language environments, including completely flipped Grapher Oct 17, 2025

Fixed operator panel scroll button icon directions in RTL

f55f668

	<!-- Is there a reason the usual NumberPad is not used here-->
	<!-- TODO: Investigate why the usual NumberPad is not used here. Is there a specific reason for this implementation? -->

		@@ -1,4 +1,4 @@
		<?xml version="1.0" encoding="utf-8"?>
		<?xml version="1.0" encoding="utf-8"?>

Layout corrections for RTL language environments, including completely flipped Grapher #2391

Are you sure you want to change the base?

Layout corrections for RTL language environments, including completely flipped Grapher #2391

Conversation

Avid29 commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes #1352.

Description of the changes:

How changes were validated:

Uh oh!

tian-lt commented Oct 10, 2025

Uh oh!

HuanglinXu21 left a comment

Choose a reason for hiding this comment

Uh oh!

HuanglinXu21 commented Oct 10, 2025

Uh oh!

tian-lt commented Oct 10, 2025

Uh oh!

Avid29 commented Oct 10, 2025

Uh oh!

Avid29 commented Oct 10, 2025

Uh oh!

Avid29 commented Oct 10, 2025

Uh oh!

Avid29 commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avid29 commented Oct 10, 2025

Uh oh!

tian-lt Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

tian-lt Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Avid29 Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

tian-lt commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avid29 commented Oct 16, 2025

Uh oh!

tian-lt Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Avid29 Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

tian-lt commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avid29 commented Oct 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Avid29 commented Oct 10, 2025 •

edited

Loading

Avid29 commented Oct 10, 2025 •

edited

Loading

tian-lt commented Oct 16, 2025 •

edited

Loading

tian-lt commented Oct 17, 2025 •

edited

Loading