Add text-alignment mixin

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';

assets/sass/base/_base.scss

@@ -35,14 +35,15 @@ section {
 }
 
 body {
+  @include text-align(left);
+
   background-color: $body-bg;
   color: $body-color;
   font-family: $font-family-base;
   font-size: $font-size-base;
   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 {

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);

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 {

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 {

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;

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
+}