diff --git a/layout/reftests/css-ruby/common.css b/layout/reftests/css-ruby/common.css
index e9663a87d995..7b5a7e6935fc 100644
--- a/layout/reftests/css-ruby/common.css
+++ b/layout/reftests/css-ruby/common.css
@@ -4,6 +4,7 @@
 }
 rbc {
   display: ruby-base-container;
+  unicode-bidi: -moz-isolate;
 }
 [pseudo] {
   font-size: inherit;
diff --git a/layout/reftests/w3c-css/submitted/ruby/support/rbc.css b/layout/reftests/w3c-css/submitted/ruby/support/rbc.css
index f410e7cc1fb9..75620e1e3ead 100644
--- a/layout/reftests/w3c-css/submitted/ruby/support/rbc.css
+++ b/layout/reftests/w3c-css/submitted/ruby/support/rbc.css
@@ -1,3 +1,4 @@
 rbc {
   display: ruby-base-container;
+  unicode-bidi: isolate;
 }
diff --git a/layout/style/html.css b/layout/style/html.css
index ee98e507226e..422e59d13fbf 100644
--- a/layout/style/html.css
+++ b/layout/style/html.css
@@ -823,7 +823,7 @@ marquee[direction="up"], marquee[direction="down"] {
   rtc > rt {
     font-size: inherit;
   }
-  ruby, rb, rt, rbc, rtc {
-    unicode-bidi: isolate;
+  ruby, rb, rt, rtc {
+    unicode-bidi: -moz-isolate;
   }
 }
diff --git a/layout/style/nsStyleContext.cpp b/layout/style/nsStyleContext.cpp
index c87ffe6059bf..4e1dd56e5849 100644
--- a/layout/style/nsStyleContext.cpp
+++ b/layout/style/nsStyleContext.cpp
@@ -447,6 +447,7 @@ nsStyleContext::GetUniqueStyleData(const nsStyleStructID& aSID)
 
   UNIQUE_CASE(Display)
   UNIQUE_CASE(Text)
+  UNIQUE_CASE(TextReset)
 
 #undef UNIQUE_CASE
 
@@ -706,6 +707,24 @@ nsStyleContext::ApplyStyleFixups(bool aSkipParentDisplayBasedStyleFixup)
     CreateEmptyStyleData(eStyleStruct_Border);
     CreateEmptyStyleData(eStyleStruct_Padding);
   }
+  if (disp->IsRubyDisplayType()) {
+    // Per CSS Ruby spec section Bidi Reordering, for all ruby boxes,
+    // the 'normal' and 'embed' values of 'unicode-bidi' should compute to
+    // 'isolate', and 'bidi-override' should compute to 'isolate-override'.
+    const nsStyleTextReset* textReset = StyleTextReset();
+    uint8_t unicodeBidi = textReset->mUnicodeBidi;
+    if (unicodeBidi == NS_STYLE_UNICODE_BIDI_NORMAL ||
+        unicodeBidi == NS_STYLE_UNICODE_BIDI_EMBED) {
+      unicodeBidi = NS_STYLE_UNICODE_BIDI_ISOLATE;
+    } else if (unicodeBidi == NS_STYLE_UNICODE_BIDI_OVERRIDE) {
+      unicodeBidi = NS_STYLE_UNICODE_BIDI_ISOLATE_OVERRIDE;
+    }
+    if (unicodeBidi != textReset->mUnicodeBidi) {
+      auto mutableTextReset = static_cast<nsStyleTextReset*>(
+        GetUniqueStyleData(eStyleStruct_TextReset));
+      mutableTextReset->mUnicodeBidi = unicodeBidi;
+    }
+  }
 
   // Elements with display:inline whose writing-mode is orthogonal to their
   // parent's mode will be converted to display:inline-block.
diff --git a/layout/style/ua.css b/layout/style/ua.css
index efe81d3c4403..a28132d46243 100644
--- a/layout/style/ua.css
+++ b/layout/style/ua.css
@@ -76,18 +76,23 @@
 @supports (display:ruby) {
   *|*::-moz-ruby {
     display: ruby;
+    unicode-bidi: -moz-isolate;
   }
   *|*::-moz-ruby-base {
     display: ruby-base;
+    unicode-bidi: -moz-isolate;
   }
   *|*::-moz-ruby-text {
     display: ruby-text;
+    unicode-bidi: -moz-isolate;
   }
   *|*::-moz-ruby-base-container {
     display: ruby-base-container;
+    unicode-bidi: -moz-isolate;
   }
   *|*::-moz-ruby-text-container {
     display: ruby-text-container;
+    unicode-bidi: -moz-isolate;
   }
 }