Initial draft on number, currency, and unit formatting #693

xfq · 2025-06-19T02:41:32Z

Fix #410. Comments welcome.

netlify · 2025-06-19T02:41:52Z

✅ Deploy Preview for i18n-drafts ready!

Name	Link
🔨 Latest commit	`47b340f`
🔍 Latest deploy log	https://app.netlify.com/projects/i18n-drafts/deploys/68ec954ea4fe900008a21ddb
😎 Deploy Preview	https://deploy-preview-693--i18n-drafts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

r12a · 2025-06-19T07:13:43Z

questions/qa-number-format.en.md

+
+Many regions, like the US and UK, use a period as the decimal separator (e.g., `1,234.56`). Conversely, much of Europe and South America use a comma (e.g., `1.234,56`).
+
+In rare cases, a currency symbol can even act as a decimal separator, like the [Cape Verdean escudo](https://en.wikipedia.org/wiki/Cape_Verdean_escudo).


Add an example here.

The double barrd dollarsign doesn't seem to be encoded in Unicode. Should I use a picture to represent it?

r12a · 2025-06-19T07:16:09Z

questions/qa-number-format.en.md

+
+**Symbol vs. Code vs. Name:** Currencies can be displayed using a specific symbol (e.g., `€`, `£`, `¥`), their ISO 4217 code (e.g., `EUR`, `GBP`, `JPY`), or their full name (e.g., `US Dollar`, `Japanese Yen`).
+
+**Placement:** The symbol can appear before the number (e.g., `$100.00`) or after (e.g., `1,000 ₫`).


The example illustrates that white space also varies.

r12a · 2025-06-19T07:24:59Z

questions/qa-number-format.en.md

+
+## By the way
+
+Typically, you'll want to format based on the user's browser language. You can get this from `navigator.language` or `navigator.languages`:


Actually, this probably merits its own section. There may be times when it's best to use the browser settings, but usually its the page language or current section language that is more important.

I was going to thumbs-up this comment, but I'd be more emphatic. Typically you want to use the locale (language) of the page. Occasionally you'll want to override that with an author specified locale (such as when writing I18N tutorials). Rarely will you want to peek at browser language (and there is no way to do so at the server--Accept-Language isn't quite the same thing).

Makes sense. I edited the content of this section.

r12a · 2025-06-19T07:26:15Z

questions/qa-number-format.en.md

+
+## Further reading
+
+* [ECMAScript Internationalization API Specification](https://tc39.es/ecma402/)


We should add some dos and donts to the Web and point to that, too.

Yes, I'm going to add the dos and donts after this article is published so that I can link to it.

aphillips

Partial review.

aphillips · 2025-06-19T13:44:10Z

questions/qa-number-format.en.md

+
+## Question
+
+**How do I prepare my web pages to display varying international number, currency, and unit formats?**


I'm not sure this is the right question for what this article proceeds to talk about? JS is a mechanism for formatting data into strings dynamically in the page. Some parts of a Web page will need to do that, but this question sounds like it would cover server-side formatting.

I'll also call out that numbers and currencies are a broad topic. Units are complicated and might warrant separate coverage. (Currencies are complicated too, but are generally bundled with numbers. Don't overlook percentages, which are also commonly bundled, but which are a sort of unit.)

I'm not sure this is the right question for what this article proceeds to talk about? JS is a mechanism for formatting data into strings dynamically in the page. Some parts of a Web page will need to do that, but this question sounds like it would cover server-side formatting.

What about: How do I use JavaScript to dynamically format numbers, currencies, and units for different locales?

I'll also call out that numbers and currencies are a broad topic. Units are complicated and might warrant separate coverage. (Currencies are complicated too, but are generally bundled with numbers. Don't overlook percentages, which are also commonly bundled, but which are a sort of unit.)

Any specific suggestions? Should we expand this article or start a new one?

questions/qa-number-format.en.md

aphillips · 2025-06-19T13:55:16Z

questions/qa-number-format.en.md

+
+#### Currency symbol display
+
+**Symbol vs. Code vs. Name:** Currencies can be displayed using a specific symbol (e.g., `€`, `£`, `¥`), their ISO 4217 code (e.g., `EUR`, `GBP`, `JPY`), or their full name (e.g., `US Dollar`, `Japanese Yen`).


This is not the full range. There are also "medium" width symbols used in various contexts, such as CA$, US$ and MX$

There are also contextual variations, e.g. ¥ vs. 円 (in sentences).

Symbols are not always a single code point and you should probably have some examples of those.

Fair enough. I expanded this paragraph.

aphillips · 2025-06-19T13:57:49Z

questions/qa-number-format.en.md

+
+**Placement:** The symbol can appear before the number (e.g., `$100.00`) or after (e.g., `1,000 ₫`).
+
+**Ambiguity:** The same symbol might represent multiple currencies (e.g., `$` for US Dollar, Canadian Dollar, Australian Dollar, etc.). So the locale is crucial.


The locale is crucial all the time. Note that the Mexican peso also uses $ and makes a good example (showing that $ doesn't mean the word dollar is lurking nearby)

Good point. Fixed.

jsahleen

Great article! Mentioned a couple of minor points but nothing blocking.

questions/qa-number-format.en.md

jsahleen · 2025-09-02T14:27:58Z

questions/qa-number-format.en.md

+
+### Choosing the right locale
+
+Typically, you'll want to format number, currency, and unit according to the language of the web page. This can be determined from the `lang` attribute:


I think something about the wording here might lead people to think the lang attribute is populated by default, when it needs to be set. This isn't the right place for an in-depth discussion, I think, but is there an article or guide on choosing the right locale we can point to?

Maybe this: https://www.w3.org/International/questions/qa-html-language-declarations.en.html

@jsahleen if you want an article that's specifically about choosing the right locale you may be looking for https://www.w3.org/International/questions/qa-choosing-language-tags.en.html

Otherwise, there are a bunch of other language setting related articles at https://www.w3.org/International/articlelist#language

Thanks. I added a link.

questions/qa-number-format.en.md

Initial draft on number formatting

ed6efb7

Fix #410.

xfq requested review from aphillips and r12a June 19, 2025 02:41

r12a reviewed Jun 19, 2025

View reviewed changes

aphillips reviewed Jun 19, 2025

View reviewed changes

xfq added 8 commits June 24, 2025 21:11

fix per @aphillips

3611c46

Add 'unit'

50b4adf

Expand "Symbol vs. Code vs. Name"

f61955a

Mention spacing

ceeed88

Mention Mexican Peso

2b38cda

Rewrite the section on how to choose the locale

a776698

Typo fix

5ad14c1

fix the question per @aphillips

a23ca7e

jsahleen reviewed Sep 2, 2025

View reviewed changes

xfq added 2 commits September 3, 2025 10:14

fix per @jsahleen

9c0b054

add a link

8f60947

jsahleen approved these changes Sep 3, 2025

View reviewed changes

jsahleen reviewed Sep 3, 2025

View reviewed changes

questions/qa-number-format.en.md Outdated Show resolved Hide resolved

xfq added 2 commits September 5, 2025 09:44

update section title

e80982a

Convert the article to HTML

47b340f

xfq merged commit a5eafc0 into gh-pages Oct 16, 2025
4 checks passed

xfq deleted the xfq/issue-410 branch October 16, 2025 12:06


		Many regions, like the US and UK, use a period as the decimal separator (e.g., `1,234.56`). Conversely, much of Europe and South America use a comma (e.g., `1.234,56`).

		In rare cases, a currency symbol can even act as a decimal separator, like the [Cape Verdean escudo](https://en.wikipedia.org/wiki/Cape_Verdean_escudo).


		Symbol vs. Code vs. Name: Currencies can be displayed using a specific symbol (e.g., `€`, `£`, `¥`), their ISO 4217 code (e.g., `EUR`, `GBP`, `JPY`), or their full name (e.g., `US Dollar`, `Japanese Yen`).

		Placement: The symbol can appear before the number (e.g., `$100.00`) or after (e.g., `1,000 ₫`).


		## By the way

		Typically, you'll want to format based on the user's browser language. You can get this from `navigator.language` or `navigator.languages`:


		## Further reading

		* [ECMAScript Internationalization API Specification](https://tc39.es/ecma402/) No newline at end of file


		## Question

		How do I prepare my web pages to display varying international number, currency, and unit formats?


		#### Currency symbol display

		Symbol vs. Code vs. Name: Currencies can be displayed using a specific symbol (e.g., `€`, `£`, `¥`), their ISO 4217 code (e.g., `EUR`, `GBP`, `JPY`), or their full name (e.g., `US Dollar`, `Japanese Yen`).


		Placement: The symbol can appear before the number (e.g., `$100.00`) or after (e.g., `1,000 ₫`).

		Ambiguity: The same symbol might represent multiple currencies (e.g., `$` for US Dollar, Canadian Dollar, Australian Dollar, etc.). So the locale is crucial.


		### Choosing the right locale

		Typically, you'll want to format number, currency, and unit according to the language of the web page. This can be determined from the `lang` attribute:

Initial draft on number, currency, and unit formatting #693

Initial draft on number, currency, and unit formatting #693

Uh oh!

Conversation

xfq commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for i18n-drafts ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aphillips left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsahleen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

xfq commented Jun 19, 2025 •

edited

Loading

netlify bot commented Jun 19, 2025 •

edited

Loading