style: Add RTL support

[GideonMax]

switched directional attributes like:
margin-left/right
padding-left/right
with
margin-inline-start/end
padding-inline-start/end
which switch direction when in rtl mode

What does it do?

css now works as expected in both rtl and ltr pages

Fixes # (issue)

Fixes #642

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• Added tests that prove my fix is effective or that my feature works (my fix is purely visual, not really testable)
• New and existing unit tests pass locally with my changes
• My changes generate no new warnings

[mrchief]

This is pretty cool, thanks for sending this! Ava JS is messing up the tests so I need to run some offline checks to make sure everything checks out, stay tuned!

[GideonMax]

@mrchief after looking a bit more into it
the -inline- properties in css automatically get auto vendor prefixing, but the one in the style tag (for indentation) does not.
So I just wanted to ask which fix you would prefer (in terms of code style):
a. use a class + css variable so that the style is auto prefixed
b. manually add vendor prefixes in the style tag

[mrchief]

@mrchief after looking a bit more into it the -inline- properties in css automatically get auto vendor prefixing, but the one in the style tag (for indentation) does not. So I just wanted to ask which fix you would prefer (in terms of code style): a. use a class + css variable so that the style is auto prefixed b. manually add vendor prefixes in the style tag

With solution a, do you mean adding a autoprefixer to our own build process so that the styles are auto prefixed or is it something the caller would be have to use? If it's the former, I think that is ok. The later imposes an additional build step for the caller which I'd like to avoid.

[GideonMax]

@mrchief after looking a bit more into it the -inline- properties in css automatically get auto vendor prefixing, but the one in the style tag (for indentation) does not. So I just wanted to ask which fix you would prefer (in terms of code style): a. use a class + css variable so that the style is auto prefixed b. manually add vendor prefixes in the style tag

With solution a, do you mean adding a autoprefixer to our own build process so that the styles are auto prefixed or is it something the caller would be have to use? If it's the former, I think that is ok. The later imposes an additional build step for the caller which I'd like to avoid.

Your build process already has autoprefixing.
if you look at the build output,
margin-inline-start: 2px; got transformed into -webkit-margin-start:2px;margin-inline-start:2px

[mrchief]

Your build process already has autoprefixing. if you look at the build output, margin-inline-start: 2px; got transformed into -webkit-margin-start:2px;margin-inline-start:2px

Right, but your idea made it sound like we need additional stuff.

[GideonMax]

Your build process already has autoprefixing. if you look at the build output, margin-inline-start: 2px; got transformed into -webkit-margin-start:2px;margin-inline-start:2px

Right, but your idea made it sound like we need additional stuff.

well, we do not need anything extra, and the idea also does not add any requirements for the end developer/caller, this is purely a code style thing

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.

[mrchief]

Not stale

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.