Automate CSS RTL generation

Very interesting! :)

I think there are two problems in the IS though, and I think this issue only wants to solve the first:

1. Automate RTL CSS generation, to avoid regressions.
2. Front-end perf is worse because we always load RTL CSS.

I think solving the second is a nice-to-have — I think we load so incredibly (probably excessively is appropriate here) much CSS that this won't matter much. It can be solved though, by creating separate CSS aggregates for the different language directions, and having metadata for RTL-only assets that allows Drupal to know which assets not to load for RTL.

Now, continuing the automation part.

I'd imagine we'd use hook_library_info_alter() to detect which CSS files live in the system, apply CSSJanus to all of them, and add a single "RTL CSS" CSS file to each asset library that has some RTL CSS.

I think the only tricky bit is then dealing with modules that are being developed, i.e. whose CSS is actively being changed, and whose automatically generated RTL CSS hence needs to be regenerated on every page load. There's an easy answer: clear the libraries cache for every page load. The question is: is that good enough?

I'm not bothered by any expertise in this field (this one's for you, Wim), so this might sound stupid, but what about developers for whom RTL is the primary case? Will there be a way for them to use this feature to generate LTR stylesheets?

But what about developers for whom RTL is the primary case? Will there be a way for them to use this feature to generate LTR stylesheets?

I think this is a great question and I was wondering this too while I wrote the above.

AFAIK Drupal basically used to say: Drupal defaults to LTR, so you should too, and write RTL as a separate thing.

But then we got rid of *-rtl.css files in favor of [dir=rtl] .some-selector {} in the same CSS files, so RTL as the primary use case implicitly became supported… but you'd still have to write [dir=rtl] … (unless we advised those people to write RTL by default and then use [dir=ltr] … for LTR instead? I don't know.).

In this system, we'd have to have metadata about which CSS files are LTR, which are RTL and which are agnostic, so that we can generate the missing part automatically.

lewisnyman, can you enlighten us on the current policy/system for that?

Currently, Drupal has no opinion of the CSS that you write. This change would be a big different, as we would have more logic than we've had before.

Exactly. We write LTR CSS by default and manually create RTL overrides, but we do not prevent anyone from doing it the other way around. An automated tool would have to provide similar flexibility in order to prevent regressions, both technically and 'mentally', as not doing so would be a stab in the back of people from RTL cultures.

Also, +1 for the TX tag.

Hi @LewisNyman and thanks for the heads-up in #1166886

I invite you to check out my https://www.drupal.org/project/css_flipper - it does exactly that - automate the creation of an RTL style sheet out of an LTR one (and vice-versa!) - it is better (for Drupal) than CSSJanus since CSSJanus will create a replacement style-sheet (e.g. flip all values but not reset existing values) while my css_flipper will create an overrides style sheet which is what drupal actually needs. see this example for instance:

/* Original CSS */
.left {
  font-weight: bold;
  left: 10px;
}

/* With CSSJanus */
.left {
  font-weight: bold; /* This is not needed in an overrides style sheet */
  right: 10px;  /* we didn't reset 'left' */
}

/* With css_flipper */
.left {
  right: 10px;
  left: auto; /* we must reset 'left' */
}

Getting something like this into core will be truly amazing, but making something like this which is core-worthy will not be easy, my project will certainly need some work. mainly in the ease-of-use area.

Doesn't need to be postponed, 8.1.x branch is active now

I think replacement stylesheets are the only robust solution, since overriding and resetting CSS properties can cause the loss of inherited values.

Imagine a "* { left: 5px; right: 5px; }" rule at the top of tsi's example in #8 to see what I mean.

I keep a D7 module and a patched cssjanus at https://github.com/yonatan/rtl-toolkit if anyone's interested. I've been using it in production for about 3 years now, it works pretty well. Haven't looked into a D8 port yet.

Closing this as outdated since we are now using CSS Logical Properties wherever possible.