ALL the rtl scss that we have needs to be reviewed to see if it is even needed now.

As well as the start/end stuff there is also magic taking process when the compilation takes place. Bootstrap 5 uses rtlcss methodology which provides magic transformations and the use of rtl variables if necessary.

We should end up with nothing in the template-rtl.scss file

magic

This css

.list-group .published {
    padding-left: .9rem;
    border-left: 5px solid var(--success);
}

will magically be written in the template-rtl.css file as

.list-group .published {
    padding-right: .9rem;
    border-right: 5px solid var(--success);
}

Variables

h1 {
  font-weight: 700 /* rtl:600 */;
}

will be written in the template-rtl.css file as

h1 {
  font-weight: 600;
}

I suspect that we will be able to completely remove the template-rtl.scss file eventually.

More information :

https://getbootstrap.com/docs/5.0/getting-started/rtl/

https://rtlcss.com/learn/

https://rtlcss.com/playground/

Note that for this all to work we will need to change our build scripts

Yeah this is a build script change and a lot of SCSS changes (to add all the relevant comments). I did actually do basic testing of the RTL views - and I think most the stuff continues to work as before for now. There's one bug JM raised with the menu now staying sticky on scroll. But I think by and large RTL continues to work with the hacky overrides. I think this may be something we don't have to prioritise for 4.0 stable but more like something we target for 4.1.

RTL admin menu is working fine now with Dimitris patch

float-start is really broken in RTL: it always gives a float: left

Float-start previously was float-left which also always did a float left. This won’t have changed

Please give an example

I think its rename to float-start in BS5 is a bit deceiving. It gives the impression that it is a logical property and therefore switches direction in RTL which it does not. Float as a logical property is only supported in Firefox (float: inline-start;).

Ideally, floating elements should be avoided. Its only real use these days is where it was originally designed for and that is within an article where you want text to wrap around an element (eg. an image).

A quick search of float-start and float-end in the codebase throws up a few results (not many in fairness). Each should be refactored to flex to avoid any issues.

Example
rtl com_associations articles . one td has float-start
can post screenshot tomorrow

Ok, found the issue for that specific one. The float there is wrong/useless. Making patch.

see #32133

Modals Close button is wrong in RTL as class was changed from close to btn-close.

We have for both LTR and RTL from media/vendor/boostrap

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  padding: $modal-header-padding;
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
  @include border-top-radius($modal-content-inner-border-radius);

  .btn-close {
    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
  }
}

which gives in Atum

.modal-header .btn-close {
    padding: .5rem;
    margin: -.5rem -.5rem -.5rem auto;
}

which gives in RTL

we need for RTL

.modal-header .btn-close {
    padding: .5rem;
    margin: -.5rem auto -.5rem -.5rem;
}

I tried to use in /administrator/templates/atum/scss/blocks/_modals.scss the value directives (https://rtlcss.com/learn/usage-guide/value-directives/)

.modal-header .btn-close {
    padding: .5rem;
    margin: -.5rem -.5rem -.5rem auto /*rtl:-.5rem auto -.5rem -.5rem*/;
}

But it did not work...

We have also lost the pre-bs5 Close button display (RTL and LTR):

as we do not have anymore

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

and

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
}

Note:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">

has the RTL correct code

.modal-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem auto -0.5rem -0.5rem;
}

Therefore, if we modify index.php to something like

<head>
	<jdoc:include type="metas" />
	<jdoc:include type="styles" />
	<?php if ($this->direction === 'rtl') : ?>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
	<?php endif; ?>
</head>

the placement of the Close button is corrected and I get

Remark though the difference of modal-header height in LTR because we have in rtl
padding: 1rem 1rem; for modal-header

modal close fixed in #32137

@brianteeman
You say we should do all to get rid of template-rtl.css and you add a class to it?

You say we should do all to get rid of template-rtl.css and you add a class to it?

SCSS not css
Because the build tools are not there yet as @wilsoonge said then there is no option to create this temporary scss
When the build tools are created then this scss entry will not be required as it will be handled automatically

SCSS not css

evidently a typo

in template default_description.php <div class="float-start me-3 text-center">
classes concerned are

.me-3 {
    margin-right: 1rem !important;
}
.float-start {
    float: left !important;
}

should be

.me-3 {
    margin-left: 1rem !important;
}
.float-start {
    float: right !important;
}

text-center looks useless.

I can correct in template-rtl.scss if OK

Note: we have other wrong float-start issues for Newfeeds in frontend category display.

We also have to deal with all the
mx-, me-,ms-, p-,px-,pe-,ps-, text-start, text-end
and possibly more
whether each variation is used or not for now in core

as discussed with @wilsonge will add asap all default rtl equivalent of the classes above in template-rtl.scss

Please test #32166 for Atum

In Joomlas custom CSS we are using logical properties but Bootstrap 5 does not. We should probably revert the use of logical properties if we are only going to partly use them.

Surely wherever we use logical properties it makes sense to. It reduces the places where things can go wrong. But as bootstrap core doesn’t in the remaining places we presumably should use their tool rather than overriding everything?

I mean I’ll take your lead as a template dev though?

Browser support for particular logical properties is different: https://caniuse.com/css-logical-props .

The padding-inline properties seem to be well supported, see e.g. https://caniuse.com/?search=padding-inline-start .

With margin-inline and inset-inline it seems to be worse, see e.g. https://caniuse.com/?search=margin-inline-start and https://caniuse.com/?search=inset-inline-start .

I guess ultimately it doesnt make a whole lot of difference. I'd be curious why BS5 decided against using them but my guess is they are waiting for the whole shooting match to be supported (eg border-start-start-radius etc.) The changing of class names now seems to be some sort of future-proofing,

The changing of class names now seems to be some sort of future-proofing,

I also assumed that. Like I said I'm happy to use logical properties in our code. But I assume just makes sense to use whatever BS are using for the BS SCSS (and anywhere in our code where we can optimise where just logical properties don't work - some of the code still in template-rtl.scss)

I largely agree. My only issue and admittedly it is a frivolous one is the amount of code been currently loaded for each utility class...

.ps-3 {
  padding-left: 1rem;
}
[dir=rtl] .ps-3 {
  padding-right: 1rem;
  padding-left: auto;
}

Using logical properties this would be replaced with...

.ps-3 {
  padding-inline-start: 1rem;
}

In hindsight, the advantages dont really warrant the change and going against BS5. It's just something to note I guess.

I fully agree it would have been better if bootstrap's code was using logical properties to start with!

I agree too.

I have added a PR for Cassiopea
#32297

its really annoying that we are not using the bootstrap rtl build scripts. It would massive reduce the amount of css we have to right and maintain ourselves

As I said (ref: #32113 (comment)) I'm more than happy to see this come in for 4.1 - I just don't want to screw around with it this close to being stable

closed - the todo is complete