BIDI: When locale is set to Arabic, NumberedList icon in toolbar menu displays Arabic-European digits

[edithk]

Steps to reproduce

Change the browser local to Arabic and reload CKEditor.

Expected result

In the toolbar menu, the NumberedList icon should display Arabic-Indic digits

Actual result

In the toolbar menu, the NumberedList icon displays Arabic-European digits

[edithk]

screenshot to demonstrate NumberedList icon

[Jakub Ś]

This is similar issue to #13473. Until we find cross language solution we have to use European numbers. Fortunately European numbers can be recognized world-wide so current state can be treated as sort of workaround.

In order to introduce such change we would have to consider languages like (please see attached image): European, Arabic-Indic, Eastern Arabic-Indic, Devanagari and Tamil. Each of them uses different numbers and each of them would need to use different icon. Currently we use simple method - display ltr or rtl icon. There are no language specific icons.

[edithk]

Are you willing to consider multi lingual solution?

If you are, we can provide a patch. The solution will be based on exiting mechanism:

• Creating and placing an image per relevant language in the plugin's icons folder.
• Loading the extra images in the plugin
• Addressing the language when setting the icon's style:

For example:

if ( CKEDITOR.lang.ar )
	icon = this.icons[ name + '-rtl-ar' ] || this.icons[ name + '-rtl' ];

[Marek Lewandowski]

We had some discussion regarding this problem.

There is a problem that browser locale should affect only editor interface language. And if you apply this change only based on (Arabic) user locale for English content, then user would end up with european numbers despite the fact that icon shows Arabic numbers. That might cause confusion.

Current state

Despite whether content or ui lang would be used to drive button icon, this issue is valid, and at the end would improve experience for part of our users.

Unfortunately currently our icon-related workflow is pretty monolithic and little extensible. Implementing a solid, reliable solution for the requested feature would take serrious amount of work - and currently we can't affort it.

However we'll look for this and similar issues while working on CKEditor 5! That will make sure that we'll avoid such constraints.

Workaround

Still, if you want to override the icon anyway, you can do it simply by using CSS - as num list icons are spans with cke_button__numberedlist_icon class.

.cke_button__numberedlist_icon { background: url('my-custom-icon.png'); }