From 488b535ec13cee76683a342972ca160440f84a5c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 7 Jul 2021 16:49:48 -0400
Subject: [PATCH] Created RTL (markdown)

---
 RTL.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 RTL.md

diff --git a/RTL.md b/RTL.md
new file mode 100644
index 0000000..6e1f2ec
--- /dev/null
+++ b/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;
+}
+```
\ No newline at end of file