[FF] Help icon is not mirrored in RTL CKEditor

[Heba Aboulmagd]

• Set the language of the browser to Arabic
• open CKEditor

Expected Result: The CKEditor is mirrored and help icon is mirrored

Actual Result: The CKEditor is mirrored but the help icon is not mirrored

[Heba Aboulmagd]

Help icon is not mirrored in RTL (Arabic) CKEditor

[Jakub Ś]

Problem can be reproduced from CKEditor 3.0 however there is or might be a slight problem with applying this.

According to this ​link (plus many other resources) - the question mark (as well as comma) in written in Hebrew in LTR fashion - ?.

In other languages like Arabic (​sample keyboard), Uyghur, Persian and Kurdish the question mark is written in RTL fashion - ؟.

As you can see this isn't just a matter of creating RTL icon. Ok, it should be created and used with RTL languages but there should be some special exception made for Hebrew.

[Heba Aboulmagd]

The problem is fixed for Arabic language by adding the css class below

[lang|="ar"].cke_rtl .cke_buttonabout_icon {

-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";

}

this class will apply on Arabic languages and we can add other languages like Uyghur, Persian and Kurdish

However I am facing a problem with checking in the code and I am working on fixing it

[Piotrek Koszuliński]

I've just closed ​https://github.com/ckeditor/ckeditor-dev/pull/196 because this isn't a code that we can accept in the core for the reasons that I listed in my comment. Taking into account also the problems mentioned in comment:1 I don't think that this can be fixed in core.

[Jakub Ś]

Perhaps there is a solution.

1. We should definitely introduce about icon for RTL languages. This would solve the problem for Aravic, Uyghur, Persian and Kurdish languages.

2. Such solution would however introduce problem for Hebrew language which uses LTR question mark. This where @heeba solution may come into play (we are transforming RTL icon into LTR for Hebrew only):

   [lang|="he"].cke_rtl .cke_button__about_icon_rtl
   {
       -moz-transform: scaleX(-1);
       -o-transform: scaleX(-1);
       -webkit-transform: scaleX(-1);
       transform: scaleX(-1);
       filter: FlipH;
       -ms-filter: "FlipH";
   }
   

[Jakub Ś]

Similar issue #14320.