[4.0][RTL] CSS logical properties

[ciar4n]

The majority of Joomla's RTL CSS is made up of corrections to left and right margins, paddings, borders, and floats.

LTR example...

.element {
  margin-left: 1rem;
}

RTL correction...

.element {
  margin-left: auto;
  margin-right: 1rem;
}

As we no longer support IE11, these can all be replaced with logical properties..

LTR example...

.element {
  margin-inline-start: 1rem;
}

RTL correction...

// None required. Margin is automatically flipped on RTL

Ref:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
https://www.w3.org/TR/css-logical-1/

[ciar4n]

Note: Considering Bootstrap 5 will not support IE11 (twbs/bootstrap#30377), it will most likely use logical properties.

[brianteeman]

presumably you have to define the writing mode somewhere?

[ciar4n]

Works the same as other RTL supporting properties (eg. flex) where instead of left and right, you have start and end. With dir="ltr", start is on the left. With dir="rtl", start is on the right.

[brianteeman]

maybe i read the docs wrongly but it looked to me that you need to have something like

English

html {
    writing-mode: horizontal-tb;
    direction: ltr;
}

Arabic

html {
    writing-mode: horizontal-tb;
    direction: rtl;
}

[ciar4n]

In this instance it is not required. writing-mode: horizontal-tb; is default and does not need to be set. Joomla sets a dir="" attribute to the html tag which works as an alternative to direction.

[brianteeman]

ok thats great. i just didnt see anything in the docs you linked to about direction.

I am definitely in favour of this concept

[infograf768]

Warning though:
There are some cases where we force LTR when in RTL. They should be considered if a general patch is proposed.

[ciar4n]

Ideally you should not have to. These recent additions to the CSS spec are to eliminate the need for 'RTL' specific CSS. So for example.

You want text alignment to switch from left to right in RTL you would use...

.element {
  text-align: start;
}

You want text alignment to be always on the left regardless of LTR/RTL you would use..

.element {
  text-align: left;
}

[C-Lodder]

Remember that logical margin/padding/text-align are still experimental. The syntax is subject to change, despite many evergreen browsers supporting them.

I would personally use it, but just with caution.

Also remember how long it took BS to get their first beta release out (about 2 years)

[ciar4n]

True. There is a couple of open issues on the spec.. https://www.w3.org/TR/css-logical-1/#issue-3d880eb1

Admittedly nothing currently that warrants a change in the syntax but still something to note.

@wilsonge thoughts?

[wilsonge]

This seems logical to me (pun intended) - although presumably just like with CSS vars - we're never going to be perfect with this as we aren't going to be able to override all of bootstrap's uses - it's largely going to be for our own markup outside the bootstrap classes. Especially as one of the open issues is about how these logical properties override already set margins (what we'll have with bootstrap)

[C-Lodder]

@wilsonge you can override their mixins that generate utility classes. It won't solve everything, but it would be a good start.

[ciar4n]

I'll put together a baseline PR, ignoring the bootstrap classes. I would guess that BS5 will create new utility classes for these logical properties. For now, we could create our own.

[wilsonge]

Sounds good to me

[ciar4n]

PR created... #28589