XF 2.0 Correct way to use /* XF-RTL:disable */ and /* XF-RTL:enable */ in Less?

[DragonByte Tech]

I'm trying to create two separate pieces of CSS to be applied if RTL is enabled or not.

RTL:

            background-position: right center;
            padding-right: 18px;
            padding-left: 0;

Western:

            background-position: left center;
            padding-right: 0;
            padding-left: 18px;

The way I laid out the CSS just now:

            background-position: right center;
            padding-right: 18px;
            padding-left: 0;
            /* XF-RTL:disable */
            background-position: left center;
            padding-right: 0;
            padding-left: 18px;
            /* XF-RTL:enable */

I was hoping that if the user is using a RTL language, everything between /* XF-RTL:disable */ and /* XF-RTL:enable */ would be skipped.

I generated a test language that's a child of English (US) with RTL enabled, but in both cases I'm seeing the background-position: left center; block being used.

What am I doing wrong?


Fillip

 

[DragonByte Tech]

For anyone else who may have the same question, the solution I found is this:

            padding-left: 18px;

            & when(@rtl) {
                background-position: right center;
            }

            & when(@ltr) {
                background-position: left center;
            }

Fillip

 

[S Thomas]

In all the 4 usages in stock XF, /* XF-RTL:disable */ is never used inside a css rule. Maybe that's why?

 

[Mike]

The XF-RTL comment directives refer to disabling and re-enabling automatic RTL flipping between a section. Essentially, the rules within will not have left/right values flipped in most rules (though background-position isn't one of them). This flipping means that padding-left will become padding-right in RTL, for example.

The LESS conditional works, but the simpler approach for single rules is:

-rtl-background-position: right center; // only applies in RTL configs
-ltr-background-position: left center; // only applies in LTR configs

If you happen to have a single rule you don't want to flip, you can do:

-ltr-rtl-margin-left: 3px;

(Meaning the rule is the same in LTR and RTL.)

The LESS conditional can be easier to read if you have multiple rules or if you want to use mixins.

 

[DragonByte Tech]

The XF-RTL comment directives refer to disabling and re-enabling automatic RTL flipping between a section. Essentially, the rules within will not have left/right values flipped in most rules (though background-position isn't one of them). This flipping means that padding-left will become padding-right in RTL, for example.

Ooh, that's pretty neat

The LESS conditional works, but the simpler approach for single rules is:

Aye I switched to that since I do only have a single rule , works a treat, cheers


Fillip

 

[Lukas W.]

If you happen to have a single rule you don't want to flip, you can do:

-ltr-rtl-margin-left: 3px;

(Meaning the rule is the same in LTR and RTL.)

What's the use case for this? Fail to see why one could not just simply use margin-left: 3px as normal if it applies to both either way.

 

[DragonByte Tech]

What's the use case for this? Fail to see why one could not just simply use margin-left: 3px as normal if it applies to both either way.

margin-left: 3px would be automagically transformed into margin-right: 3px if you were viewing the page using a RTL language, as it auto flips (nearly) every "left" to "right" and vice versa.

So, for that example, you could either put margin-left: 3px in between the disable and enable comments I was trying to use incorrectly in the OP, or you can use those prefixes to make sure that no matter what language you're viewing the page in, that CSS rule should always be margin-left: 3px.

Does that make more sense?


Fillip

 

[Lukas W.]

Ah yeah, the auto-conversion was what I missed, thanks.