Semantic-ui: [RTL] The icons are not inverted in RTL version

[TarekAlQaddy]

When I set rtl: true in semantic.json and make a build using gulp build
the icons like arrows are not inverted

semantic v 2.2.13
gulp v 3.9.1

[awgv]

Hi @TarekAlQaddy, should they be inverted, though? I don’t think it makes sense, is there a specific use case that you can mention as an example? I feel like it’s a developer’s responsibility, but maybe there’s something I don’t know about RTL languages on the web.

[TarekAlQaddy]

Hi @Banandrew and thank you for your concern,
I thought they would be inverted because they are in the official website here semantic.rtlcss (e.g search for Arrow Left), But that's an old version (2.2.6)

Now it's very useful if you want to translate and convert LTR websites to RTL dynamically you just include the RTL css lib it will invert everything and you are done.

Use case for that : If you have a process that requires steps you start at the left and the 'Next' button would have a right arrow to go next step.
If that process in RTL you would start at right and the next button would point left to the next step

[awgv]

@TarekAlQaddy Thank you. I don’t think that semantic.rtlcss.com is related to the Semantic UI organization, hence the reason why it’s stuck at 2.2.6. SUI RTL builds do use RTLCSS with the default options, so I’m assuming that semantic.rtlcss.com uses some kind of a custom configuration, and it shouldn’t be too difficult to change.

In any case, I understand the need for mirroring in RTL—your example with the step component makes perfect sense—what I don’t understand is why there’s a need for mirroring of icons; if you write i.left.arrow and get the right arrow instead, the semantic meaning behind the class changes, isn’t it confusing for a developer? And if a developer already works on a website that’s RTL, wouldn’t they want to use .left.arrow for actually left arrows in the first place?

[TarekAlQaddy]

@Banandrew
Yes I do agree with you, If you're developing for a website that is RTL originally it would be confusing and incorrect.
My case is with multilingual websites, It would be perfect when you switch LTR => RTL the icons invert like the case above, So what do u suggest for that or is there any configuration to make that happen in the build

[awgv]

@TarekAlQaddy I see, thanks for the clarification. I know nothing about RTLCSS, and can’t say anything without looking into it, but perhaps @MohammadYounes will have time to give some directions?

[MohammadYounes]

Hi,

Yes, for LTR-first approach, Icons should be renamed. The build at semantic.rtlcss.com is made with autoRename enabled.

Semantic build system runs RTLCSS with the default options. However, gulp-rtlcss uses the same config loader used by RTLCSS CLI.

You can easily set the configuration by:

1. Putting RTLCSS config into your projects package.json file under the rtlcssConfig property. OR
2. Placing a special file .rtlcssrc or .rtlcssrc.json at the root of your project or user profile/home directory. (Default .rtlcssrc can be found here).

Another alternative would be to wrap semantic css inside rename directive.

Let me know if you need further assistance.

Thanks!

[TarekAlQaddy]

@MohammadYounes That helped a lot , Thanks .