diff --git a/core/modules/filter/css/filter.caption.css b/core/modules/filter/css/filter.caption.css
index 4793e67..aabc10c 100644
--- a/core/modules/filter/css/filter.caption.css
+++ b/core/modules/filter/css/filter.caption.css
@@ -60,13 +60,19 @@
 /**
  * Image alignment (when not using a caption).
  */
-img[data-align="left"] {
+.align-left {
+  float: left; /* LTR */
+}
+[dir="rtl"] .align-left {
   float: left;
 }
-img[data-align="right"] {
-  float: right;
+.align-right {
+  float: right; /* LTR */
+}
+[dir="rtl"] .align-right {
+  float: left;
 }
-img[data-align="center"] {
+.align-center {
   display: block;
   margin-left: auto;
   margin-right: auto;
diff --git a/core/modules/filter/lib/Drupal/filter/Plugin/Filter/FilterCaption.php b/core/modules/filter/lib/Drupal/filter/Plugin/Filter/FilterCaption.php
index 0311ed4..8273471 100644
--- a/core/modules/filter/lib/Drupal/filter/Plugin/Filter/FilterCaption.php
+++ b/core/modules/filter/lib/Drupal/filter/Plugin/Filter/FilterCaption.php
@@ -51,8 +51,11 @@ public function process($text, $langcode, $cache, $cache_id) {
         if ($node->hasAttribute('data-align')) {
           $align = $node->getAttribute('data-align');
           // Only allow 3 values: 'left', 'center' and 'right'.
-          if (!in_array($align, array('left', 'center', 'right'))) {
-            $align = NULL;
+          if (in_array($align, array('left', 'center', 'right'))) {
+            $classes = $node->getAttribute('class');
+            $classes = (strlen($classes) > 0) ? explode(' ', $classes) : array();
+            $classes[] = 'align-' . $align;
+            $node->setAttribute('class', implode(' ', $classes));
             $node->removeAttribute('data-align');
           }
         }