Created RTL (markdown)

RTL.md

@@ -0,0 +1,33 @@
+When you need to support both LTR and RTL modes, try to avoid using values such as `left` and `right`. For certain CSS properties, you can use the appropriate mixin to have this handled for you automatically.
+
+For example, if you wanted `transform-origin` to be RTL-aware, you would use the `transform-origin` mixin:
+
+```css
+@include transform-origin(start, center);
+```
+
+This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode. 
+
+These mixins depend on the `:host-context` pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
+
+To work around this, you should set an RTL class on the host of your component and set your RTL styles by targeting that class:
+
+```tsx
+<Host
+class={{
+  'my-cmp-rtl': document.dir === 'rtl'
+})
+>
+ ...
+</Host>
+```
+
+```css
+:host {
+  transform-origin: left center;
+}
+
+:host(.my-cmp-rtl) {
+  transform-origin: right center;
+}
+```