Multicultural Numbering Systems

Most cultures are using what is known as English Numbers "123...", localizating web application may require to localize number system as well.

First let me fix a small mistake, the current numbers "123..." that are in use by most latin cultures are founded by Arabs, and the numbers "١٢٣..." that are in use in Arabic cultures nowadays are in fact founded by Indians, and by time the numbers shapes changed by cultural exchange among the history, you may google about this topic and read more in other sources, in this article I will show how to change numbers shape in web applications which is a necessary step for localization.

 

Backend Settings :

In ASP.NET Core web applicaton we define supported cultures in "startup.cs" file; and in order to change numbers shape simply define the settings for numbering system as below:


var cultures = new CultureInfo[]
{
	new CultureInfo("en"),
        new CultureInfo("tr"),
        new CultureInfo("ar") {
                    
        /* change calendar to Grgorian */
        DateTimeFormat = { Calendar = new GregorianCalendar() },

        /* change digit shape */
        NumberFormat = { NativeDigits = "0 1 2 3 4 5 6 7 8 9".Split(" ") }
        }
};

services.Configure<RequestLocalizationOptions>(ops =>
{
	ops.DefaultRequestCulture = new RequestCulture("en");
        ops.SupportedCultures = cultures.OrderBy(x=>x.EnglishName).ToList();
        ops.SupportedUICultures = cultures.OrderBy(x => x.EnglishName).ToList();
});

read more about backend localization settings here: Developing Multicultural Web Application

 

Client Side Settings

For the front end you may need additional settings to force using a specific numbering system, this script will help to change the numbering system for each input field individually:

var getJSON = function (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function () {
        var status = xhr.status;
        if (status === 200) {
            callback(null, xhr.response);
        } else {
            callback(status, xhr.response);
        }
    };
    xhr.send();
};

function SetNumSystem(inputControlId, culture) {
    // file from cldr-core
    // see: https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/numberingSystems.json
    getJSON('https://raw.githubusercontent.com/unicode-cldr/cldr-core/master/supplemental/numberingSystems.json',
        function (err, data) {
            if (err !== null) {
                alert('Something went wrong: ' + err);
            } else {
                var inputControl = document.getElementById(inputControlId);

                inputControl.addEventListener("keydown", function (event) {
                    if (event.key >= 0 && event.key <= 9) {
                        var numbersList = data.supplemental.numberingSystems[culture]._digits;
                        event.preventDefault();
                        var s = inputControl.value;
                        var i = inputControl.selectionStart;
                        s = s.substr(0, i) + numbersList[event.key] + s.substr(inputControl.selectionEnd);
                        inputControl.value = s;
                        inputControl.selectionStart = inputControl.selectionEnd = i + 1;
                        return false;
                    }
                }, false);
            }
        });
}

 

A live demo of the above script is provided here: http://demo.ziyad.info/en/NumberingSystems