diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index 71d5b10bf..43643c99a 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -15,6 +15,7 @@
 @import 'mixins/reset-text';
 @import 'mixins/screenreader';
 @import 'mixins/strip-unit';
+@import 'mixins/text-alignment';
 @import 'mixins/text-emphasis';
 @import 'mixins/text-hide';
 @import 'mixins/text-truncate';
diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss
index 77e1434db..bfca8a726 100644
--- a/assets/sass/base/_base.scss
+++ b/assets/sass/base/_base.scss
@@ -35,6 +35,8 @@ section {
 }
 
 body {
+  @include text-align(left);
+
   background-color: $body-bg;
   color: $body-color;
   font-family: $font-family-base;
@@ -42,7 +44,6 @@ body {
   font-weight: $font-weight-base;
   line-height: $line-height-base;
   margin: 0;
-  text-align: left;
 }
 
 html {
@@ -306,13 +307,13 @@ template {
 // Table
 
 caption {
+  @include text-align(left);
   @include typography-caption;
 
   caption-side: bottom;
   color: $table-caption-color;
   min-height: $table-thead-cell-height;
   padding: $table-thead-padding-y $table-cell-padding-x-alt;
-  text-align: left;
 }
 
 table {
diff --git a/assets/sass/material/_dialog.scss b/assets/sass/material/_dialog.scss
index 2470824e6..79ef58af7 100644
--- a/assets/sass/material/_dialog.scss
+++ b/assets/sass/material/_dialog.scss
@@ -63,11 +63,12 @@
 // Dialog
 
 .modal-dialog {
+  @include text-align(left);
+
   display: inline-block;
   margin: $dialog-margin-y $dialog-margin-x;
   max-width: $dialog-width;
   position: relative;
-  text-align: left;
   vertical-align: middle;
   white-space: normal;
   width: calc(100% - #{$dialog-margin-x} * 2);
diff --git a/assets/sass/material/_menu.scss b/assets/sass/material/_menu.scss
index 12457a2d0..8356040c3 100644
--- a/assets/sass/material/_menu.scss
+++ b/assets/sass/material/_menu.scss
@@ -5,6 +5,7 @@
 
 .dropdown-menu {
   @include border-bottom-radius($menu-border-radius);
+  @include text-align(left);
 
   background-color: transparent;
   color: inherit;
@@ -17,7 +18,6 @@
   min-width: $menu-min-width;
   padding: $menu-padding-y 0;
   position: absolute;
-  text-align: left;
   z-index: map-get($menu-elevation-shadow, elevation);
 
   &::before {
diff --git a/assets/sass/material/_picker.scss b/assets/sass/material/_picker.scss
index 2288768ec..806474b8b 100644
--- a/assets/sass/material/_picker.scss
+++ b/assets/sass/material/_picker.scss
@@ -185,10 +185,10 @@
 .picker-date-display {
   @include border-top-radius($border-radius);
   @include color-yiq($picker-header-bg);
+  @include text-align(left);
 
   background-color: $picker-header-bg;
   padding: $picker-header-padding-y $picker-header-padding-x;
-  text-align: left;
 }
 
 .picker-date-display-bottom {
diff --git a/assets/sass/mixins/_reset-text.scss b/assets/sass/mixins/_reset-text.scss
index 36d9b8d1f..e6d47ef8f 100644
--- a/assets/sass/mixins/_reset-text.scss
+++ b/assets/sass/mixins/_reset-text.scss
@@ -1,11 +1,12 @@
 @mixin reset-text {
+  @include text-align(left);
+
   font-family: $font-family-base;
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
   line-height: $line-height-base;
-  text-align: initial;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
diff --git a/assets/sass/mixins/_text-alignment.scss b/assets/sass/mixins/_text-alignment.scss
new file mode 100644
index 000000000..d136baf13
--- /dev/null
+++ b/assets/sass/mixins/_text-alignment.scss
@@ -0,0 +1,23 @@
+@mixin text-align($direction: 'left') {
+  // scss-lint:disable DuplicateProperty
+  @if $direction == 'left' {
+    text-align: left;
+    text-align: start;
+
+    [dir='rtl'] & {
+      text-align: right;
+      text-align: start;
+    }
+  }
+
+  @if $direction == 'right' {
+    text-align: right;
+    text-align: end;
+
+    [dir='rtl'] & {
+      text-align: left;
+      text-align: end;
+    }
+  }
+  // scss-lint:enable DuplicateProperty
+}