Support new division symbol (:) used by several locales #2862

SonicScrewdriver · 2025-09-04T00:18:14Z

Summary:

This PR adds support for locales (particularly Ukraine) that use : instead of / for denoting division in math equations. We're only focusing on the Expression Widget as Numeric Input / Input Number do not support the division symbol.

We're currently checking with the language advocates about how fractions are written in Ukrainian, but initial research is indicating that the bar / is still used in those cases.

This PR does not update the actual icon on the keypad, as we're still waiting for design. We will update the keypad button (in the appropriate locales) in a future PR, after LEMS-3535 has been completed.

Video Example:

Screen.Recording.2025-09-03.at.2.32.06.PM.mov

Issue: LEMS-3435

Test plan:

New tests pass
Manual testing using my draft locale dropdown feature
No regressions noticed in existing tests

github-actions · 2025-09-04T00:19:00Z

🗄️ Schema Change: No Changes ✅

github-actions · 2025-09-04T00:19:35Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2025-09-04T00:19:37Z

Size Change: +234 B (+0.05%)

Total Size: 493 kB

Filename	Size	Change
`packages/kas/dist/es/index.js`	20.8 kB	+19 B (+0.09%)
`packages/math-input/dist/es/index.js`	98.7 kB	+31 B (+0.03%)
`packages/perseus-core/dist/es/index.js`	21.9 kB	+159 B (+0.73%)
`packages/perseus-score/dist/es/index.js`	9.34 kB	+25 B (+0.27%)

ℹ️ View Unchanged

Filename	Size
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	5.98 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	13.1 kB
`packages/perseus-editor/dist/es/index.js`	94.8 kB
`packages/perseus-linter/dist/es/index.js`	7.07 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/index.js`	202 kB
`packages/perseus/dist/es/strings.js`	7.6 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2025-09-04T00:20:09Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (f039eec) and published it to npm. You
can install it using the tag PR2862.

Example:

pnpm add @khanacademy/perseus@PR2862

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR2862

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR2862

SonicScrewdriver · 2025-09-04T00:22:02Z

testing/debug-check-answer-footer.tsx

        right: 0,
        padding: `${sizing.size_120} ${sizing.size_160}`,
-        backgroundColor: semanticColor.core.background.base.default,
+        backgroundColor: "#FFFFFF",


This token was updated by wonderblocks, but this is breaking most of our storybook docs even after running pnpm install. I've just changed this to white for now as this is a testing component and I'd rather not have to maintain all the semantic colour tokens if they're still fluctuating so frequently.

Can you add that as a comment above this line so it's obvious when we come back to it in the future?

SonicScrewdriver · 2025-09-04T00:35:55Z

packages/perseus-core/src/utils/get-divide-symbol.ts

+    "vi",
+    "ro",
+    "ru",
+];


I determined these using an internal spreadsheet that breaks down the differences across locales. If you'd like the reference material, please let me know and I'll share it! My searches have indicated that there's no automated way to detect this, so we're stuck checking against a list of known locales.

SonicScrewdriver · 2025-09-05T18:00:14Z

packages/perseus-core/src/utils/get-divide-symbol.ts

+    return "/";
+};
+
+export const getDivideSymbolForTex = (locale: string): string => {


The keypad enters TeX commands into our Math Inputs in order to properly display certain math formats/symbols. Unfortunately, the division symbol is one such symbol that requires TeX. (Something that wasn't required for our decimal separator)

However, our scoring logic requires that we return a forward slash. In order to support both features, I've opted to make a separate function for returning the TeX command, that uses the same logic as the simpler getDivideSymbol. I'm happy to take any alternative suggestions on this, however!

Makes sense to me. It could be helpful to put this explanation in a doc comment for getDivideSymbolForTex

…cording to users locale

nishasy

Mostly suggestions about comments, nothing blocking. Looks good to me!

nishasy · 2025-09-17T19:04:49Z

packages/perseus-core/src/utils/get-divide-symbol.ts

+export const getDivideSymbolForTex = (locale: string): string => {
+    const divideSymbol = getDivideSymbol(locale);
+
+    // If the locale uses the forward slash, return the appropriate TeX command


Suggested change

// If the locale uses the forward slash, return the appropriate TeX command

// If the locale uses the forward slash, return the TeX command for ÷

nishasy · 2025-09-17T19:06:53Z

packages/perseus-core/src/utils/get-divide-symbol.ts

+    return "/";
+};
+
+export const getDivideSymbolForTex = (locale: string): string => {


Makes sense to me. It could be helpful to put this explanation in a doc comment for getDivideSymbolForTex

nishasy · 2025-09-17T19:08:30Z

packages/perseus-score/src/widgets/expression/score-expression.test.ts

+        const result = scoreExpression("z:3", expressionItem3Options, "en");
+        expect(result).toHaveInvalidInput();
+    });
+


It doesn't look like there are any tests for the en divide sign in this file? Could it be worth adding one? I know it's already written as z/3 in the test data, but I think it could be worth confirming that it still works in the z/3 case.

nishasy · 2025-09-17T19:14:10Z

packages/perseus/src/widgets/expression/__docs__/expression.stories.tsx

+        item: expressionItem4,
+    },
+};
+


Can you add a doc comment above this story explaining how it can be used to test division? The comment should show up above the story in Storybook as a description.

nishasy · 2025-09-17T19:14:54Z

testing/debug-check-answer-footer.tsx

        right: 0,
        padding: `${sizing.size_120} ${sizing.size_160}`,
-        backgroundColor: semanticColor.core.background.base.default,
+        backgroundColor: "#FFFFFF",


Can you add that as a comment above this line so it's obvious when we come back to it in the future?

@nishasy

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Minor Changes - [#2908](#2908) [`d60a719785`](d60a719) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) (a11y) | Add long description field to Image widget editor - [#2910](#2910) [`55769ff4da`](55769ff) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Fixing several issues related to User Input in our Explanation and Number Line Widgets ### Patch Changes - [#2887](#2887) [`1ec4595857`](1ec4595) Thanks [@handeyeco](https://github.com/handeyeco)! - Add regression test for answerless-to-answerful transition - [#2862](#2862) [`4e9b6f012d`](4e9b6f0) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Add support for colon division symbol according to users locale - [#2903](#2903) [`79a6fc682b`](79a6fc6) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Fix rendering error in InputWithExamples, changing replaceAll to replace to be old browser compatible - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff), [`4733bbb3a8`](4733bbb)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2910](#2910) [`55769ff4da`](55769ff) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Fixing several issues related to User Input in our Explanation and Number Line Widgets ### Patch Changes - [#2862](#2862) [`4e9b6f012d`](4e9b6f0) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Add support for colon division symbol according to users locale - Updated dependencies \[[`4e9b6f012d`](4e9b6f0)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2908](#2908) [`d60a719785`](d60a719) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (CX) (a11y) | Add long description field to Image widget editor - [#2910](#2910) [`55769ff4da`](55769ff) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Fixing several issues related to User Input in our Explanation and Number Line Widgets ### Patch Changes - Updated dependencies \[[`d60a719785`](d60a719), [`1ec4595857`](1ec4595), [`4e9b6f012d`](4e9b6f0), [`79a6fc682b`](79a6fc6), [`55769ff4da`](55769ff), [`4733bbb3a8`](4733bbb)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2862](#2862) [`4e9b6f012d`](4e9b6f0) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Add support for colon division symbol according to users locale ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2862](#2862) [`4e9b6f012d`](4e9b6f0) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Add support for colon division symbol according to users locale - [#2907](#2907) [`4733bbb3a8`](4733bbb) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Fix missing border in mobile keypad - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#2862](#2862) [`4e9b6f012d`](4e9b6f0) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Add support for colon division symbol according to users locale - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`4e9b6f012d`](4e9b6f0), [`55769ff4da`](55769ff), [`4733bbb3a8`](4733bbb)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected]

SonicScrewdriver self-assigned this Sep 4, 2025

SonicScrewdriver added the olc-5.0.e6bd8 label Sep 4, 2025

SonicScrewdriver commented Sep 4, 2025

View reviewed changes

SonicScrewdriver marked this pull request as ready for review September 4, 2025 00:39

SonicScrewdriver commented Sep 5, 2025

View reviewed changes

SonicScrewdriver force-pushed the lems-3435 branch from 95fcf2e to 5ef04d1 Compare September 5, 2025 19:57

SonicScrewdriver added 6 commits September 16, 2025 15:41

[lems-3435] Support new division symbol (:) used by several locales

a3f78cb

[lems-3435] cleanup story

23d3622

[lems-3435] WE JUST WANT TO EXPRESS OURSELVES.

2f9687c

[lems-3435] Fix stories

c15173b

[lems-3435] docs(changeset): Add support for colon division symbol ac…

05aac07

…cording to users locale

[lems-3435] Better support for key translator

c692305

SonicScrewdriver force-pushed the lems-3435 branch from 5ef04d1 to c692305 Compare September 16, 2025 22:42

nishasy approved these changes Sep 17, 2025

View reviewed changes

[lems-3435] PR Feedback

f039eec

SonicScrewdriver merged commit 4e9b6f0 into main Sep 22, 2025
10 checks passed

SonicScrewdriver deleted the lems-3435 branch September 22, 2025 18:37

khan-actions-bot mentioned this pull request Sep 22, 2025

Version Packages #2906

Merged

	// If the locale uses the forward slash, return the appropriate TeX command
	// If the locale uses the forward slash, return the TeX command for ÷

Support new division symbol (:) used by several locales #2862

Support new division symbol (:) used by several locales #2862

Uh oh!

Conversation

SonicScrewdriver commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Video Example:

Test plan:

Uh oh!

github-actions bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

SonicScrewdriver Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

SonicScrewdriver Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SonicScrewdriver Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

nishasy left a comment

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

nishasy Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SonicScrewdriver commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

SonicScrewdriver Sep 4, 2025 •

edited

Loading

SonicScrewdriver Sep 4, 2025 •

edited

Loading

SonicScrewdriver Sep 5, 2025 •

edited

Loading