Improve RTL support with logical properties

[felixhaeberle]

General improvement

We recognized that the current implementation is really well done with only a few things to improve, where especially nested components in other components doesn't get the correct styling in an RTL view, for example the header component.

🎯 Goals

The goal would be to adapt to the CSS logical properties schema

1. to reduce the amount of code,
2. to reduce the technical depth and
3. improve maintainability and
4. make component nesting more versatile.
5. having a modern and future-proof styling approach ✨

📖 References

A helpful link and well written guide on how to approach this topic is: https://elad.medium.com/new-css-logical-properties-bc6945311ce7

The current browser support can be found here: https://caniuse.com/css-logical-props

The CSSWG spec can be found here: https://drafts.csswg.org/css-logical/

While not everywhere completely supported, we can introduce a postcss build step which compiles the logical properties to the format for legacy/old browsers. When IE11 support is dropped with the upgrade to Angular v13, this build step could be removed.

👌 Requirements

The requirements have to be discussed, also the prioritization on the roadmap and when it fits best in the release cycle.

ℹ️ Details

Feel free to reach out for any information. Thanks very much!! 🙏

[Phil147]

Hi @felixhaeberle

I second that this is a nice idea for the future but it also means to change all current implementations. So if you see some issues a first step would be to provide reproduction examples. It might be easier to fix it in the current way than to rewrite everything.

[syl987]

Hi @felixhaeberle thanks for your suggestion. I opened an internal ticket so we can have a closer look.

internal ticket https://github.developer.allianz.io/ilt/ngx-ndbx/issues/3694

[yd-allianz]

Let's continue this discussion in the internal repository.