LTR left is RTL right

LTR left is RTL right

by lior gil -
Number of replies: 13
Picture of Core developers

Moodle is first and foremost English oriented and by that it's also LTR oriented.

In most parts there's no issue here, but only when the need to use any of the RTL languages arises, some blind spots are reveled.

Recent examples:

https://tracker.moodle.org/browse/MDL-51948

https://tracker.moodle.org/browse/MDL-45227

Since I need to support a multi-language multi-directional site I need to make sure everything works the same way for both directions, and I came across what I'd consider to be another blind spot.

Along the CSS files you can find classes that are called (or contain the words) "left", "right".

As you can figure out at this point, any development for RTL sites will requires the use of "left" class for the right side and vise versa.

I propose adding a new set of classes with names that rely on different logic.

For example, here's what I use in my code.

.dir-ltr .float_start, .dir-rtl .float_end { float: left; }
.dir-ltr .float_end, .dir-rtl .float_start { float: right; }
.dir-ltr .align_start, .dir-rtl .align_end { text-align: left; }
.dir-ltr .align_end, .dir-rtl .align_start { text-align: right; }
.dir-ltr .direction_start, .dir-rtl .direction_end { direction: ltr; }
.dir-ltr .direction_end, .dir-rtl .direction_start { direction: rtl; }

By changing the supposedly "fixed" left/right value into a more relative term (start/end) the logic of the code does not rely anymore on the left-to-right approach.

Average of ratings: -
In reply to lior gil

Re: LTR left is RTL right

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

This may be more complex as I believe some of those left and right classes are from upstream bootstrap code (.pull-left and .pull-right for example), so simply changing them in moodle could have a major impact on the use of bootstrap snippets and bootswatches.

I got around this in flexibase by using flexbox layouts instead of bootstrap grids in most locations and that seems to work very easily, but isn't a solution for everyone.

I guess this is where the original debate about side-pre and side-post for the block regions came from too, but has been complicated by the use of bootstrap since then smile

I'm personally not sure it is a good idea to change classes that are derived from upstream libraries within Moodle if we can help it, a better idea may be to investigate the impact on bootstrap itself and push changes upstream to them. The rider to that, though, is that BS2 is no longer supported upstream, so changes could be applied there, but with consideration for the effect that would then have on migrating to other versions later on.

Average of ratings: -
In reply to Richard Oelmann

Re: LTR left is RTL right

by lior gil -
Picture of Core developers

I didn't mean changing anything, I simply suggested adding new classes to Moodle's core css library, in order to give developers the option to use them for future projects without causing any backward compatibility issues.

This way you could choose between left or float_start and get the same results, only if you use the latter you'd know the element will float to the start of the page regardless of the page orientation.

Average of ratings: -
In reply to lior gil

Re: LTR left is RTL right

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

We should take the above suggestion into the new discussion about New Moodle 3.2 theme design forum discussion.

Average of ratings: -
In reply to Nadav Kavalerchik

Re: LTR left is RTL right

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

I have just been reading all this via the link Nadav added recently In a MDL-5????

In my Morecandy theme I used before and behind instead of left and right in two new block regains, so I can see where you are coming from. 

I don't see any problem with this idea/initiative, however half the battle is getting Moodle DEVs to agree. And as very few understand the LTR/RTL swap there are blind spots that do not fall into the same category

So perhaps a new class for this may be needed too. So what about .dir-duo.

Forgive me if this does not make sense...I am finding it difficult to read in my ipad mini...and so may have got different discussions mixed up!

Mary

Average of ratings: -
In reply to Mary Evans

Re: LTR left is RTL right

by lior gil -
Picture of Core developers

There's no doubt that some rethinking is required for something like this to take effect.

People need to realize the every code needs to be not only mobile compatible but also multi-language compatible.

I'm afraid I don't understand what a .dir-duo class will add here. the way I see it, .dir-rtl / .dir-ltr are enough.

Average of ratings: -
In reply to lior gil

Re: LTR left is RTL right

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I suppose I was thinking of a case where an element might be classed as 'neutral', neither LTR nor RTL.

 

 

Average of ratings: -
In reply to Nadav Kavalerchik

Re: LTR left is RTL right

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

I see that Bootstrap4 integrates flexbox too, http://v4-alpha.getbootstrap.com/getting-started/flexbox/ which may be worth investigating to provide ltr/rtl https://css-tricks.com/almanac/properties/f/flex-direction/


Average of ratings: -
In reply to Richard Oelmann

Re: LTR left is RTL right

by lior gil -
Picture of Core developers

I've looked at this property and it seems great. However, in my experience, (relatively) new attributes cannot be reliable in all browsers and in mobile browsers it's even worst.

Besides, this does not cover all options. In my example I've set different attributes for float, direction and text align, all of which flex-direction does not cover completely.

Average of ratings: Useful (1)
In reply to lior gil

Re: LTR left is RTL right

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

No, but one single attribute is unlikely to cover all options, Lior. But if it can cover a significant amount of them and simplify working with the others then it has to be a possibility for consideration - even if it is then rejected for whatever reasons, such as better alternatives being available smile

I used it in flexibase and it made life a lot simpler to make those rtl changes. I'm not suggesting flexibase is perfect for that by a long way, especially as i don't speak any languages that use rtl, so even if something looks like it works to me, it may be wrong in reality! But it could simplify a LOT of the rtl/ltr coding and leave any additional rtl fixes much reduced (rather than saying it is a perfect fix that will remove the need for those completely, which I know it wont smile )

The biggest consideration, as you say, is browser support with IE9 and below being the biggest problem (I haven't come across any issues on mobile browsers), but IE9 would need work arounds. IE10 uses the old spec, but that can be handled through Bootstrap mixins in the same way as the older browser vendor prefixes, while the existing known issues within IE10/11 can also be dealt with fairly easily, even if they are a nuisance.

As a solution, it may not be a perfect fit for what we need in the end, but I think its close enough to warrant consideration now that BS4 will come with it integrated, rather than the experimental approach I had to take in flexibase of completely reworking the layouts to use it, which i would definitely NOT recommend for a core theme smile


R

Average of ratings: -
In reply to Richard Oelmann

Re: LTR left is RTL right

by lior gil -
Picture of Core developers

To be honest, I find it hard to believe that people will start using these types of new classes I'm suggesting instead of the usual left/right, because this issue matters mostly to the - let's call it RTL programmers.

I think that the best option would be adding these new types of classes and let anyone decide which option to use. The theme for 3.2 can be a good starting point.

Average of ratings: -
In reply to lior gil

Re: LTR left is RTL right

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
For me, I'd prefer to see something (whether your solution, flexbox, or any other) that builds rtl/ltr into the core structures so that everyone uses it, not just leaving it to those few 'rtl programmers' who need it for themselves. If its built properly from core out, then the work for those few will be vastly simplified. I would have concerns about 'let anyone decide which option' leading to similar issues down the road that we already have with the iconsmall class and consistency. But those are purely personal opinions - I simply suggested the flexbox approach as one for consideration smile
Average of ratings: -
In reply to lior gil

Re: LTR left is RTL right

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

Diving deeper into this, and also getting some feedback from bawjawsDavid Scotson (MDL-35084)

I can see that it still leave behind a fare amount of special language oriented CSS selectors like:

http://rtlcss.com/learn/getting-started/why-rtlcss/#css-level-3 (background border-right-color margin background-image border-right-style margin-left background-position ...)


Average of ratings: -