robert/numberformat.js
robert/numberformat.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

docs: Add currency format docs

Browse Source 
Update docs to show currency formatting
This commit is contained in:
Robert Morrison 2022-10-11 22:02:34 +01:00
parent f7f677ec38
commit ce79079ced
Signed by: robert
GPG Key ID: 73E012EB3F4EC696
1 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ReadMe.md
View File

@ -1,18 +1,39 @@
# numberFormat.js # numberFormat.js
A simple JS library that automatically formats numbers on your web page. A simple JS library that automatically formats numbers on your web page.
This is accomplished using the Intl.NumberFormat library to format the
numbers, and some custom elements to locate the numbers that need
formatting and allow them to be replaced by the correct value.
Designed mainly for use on static websites to avoid the bother of Designed mainly for use on static websites to avoid the bother of
formatting numbers manually. formatting numbers manually.
## Usage ## A more succinct description
This library allows DOM modification based on the Intl.NumberFormat library
which is part of JS. Providing a custom element that allows you to
specify number formatting declaratively and without needing to know how to
format numbers.
## Basic Usage
- Host the script somewhere on your system. - Host the script somewhere on your system.
- Ensure you set the language for your HTML element - Ensure you set the language for your HTML element
- Add a script tag to your document head that has the `src` set to this script.\ - Add a script tag to your document head that has the `src` set to this script.\
The script tag must also be set to defer The script tag must also be set to defer
- Surround any numbers you want formatting with `<num> .. </num>` tags.\ - Surround any numbers you want formatting with `<num>` tags.\
These 'custom' tags are used so the script can efficiently find numbers These 'custom' tags are used so the script can efficiently find numbers
without needing to resort to jQuery or regex.\ without needing to resort to jQuery or regex.\
This also allows you to specify numbers you don't want formatted. This also allows you to specify numbers you don't want formatted.
## Formatting Currencies
To format a currency you need to add the `currency` attribute to your num
element with the value set in the format `CURRENCY-FORMAT`.
With currency being the three letter code for the currency.
And format being one of:
- symbol
- narrowSymbol
- code
- name
This is exactly parallel to the Intl.NumberFormat constructor for
formatting currencies.
### Example ### Example
```html ```html
<html lang="YOUR-LANGUAGE"> <html lang="YOUR-LANGUAGE">
@ -22,6 +43,7 @@ formatting numbers manually.
</head> </head>
<body> <body>
<p>This is a formatted number <num>1234567890</num></p> <p>This is a formatted number <num>1234567890</num></p>
<p>This is a simple formatted currency <num currency=GBP>123</num></p>
</body> </body>
</html> </html>
``` ```
@ -40,7 +62,6 @@ formatting numbers manually.
It is a completely different task. It is a completely different task.
## TODO: ## TODO:
- Add support for currency formatting
- Check for optimisations - Check for optimisations
- If this becomes popular host to a CDN - If this becomes popular host to a CDN
- Change custom element\ - Change custom element\