--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -151,16 +151,17 @@ using namespace mozilla::layers;
 using namespace mozilla::layout;
 using namespace mozilla::gfx;
 
 #define GRID_ENABLED_PREF_NAME "layout.css.grid.enabled"
 #define GRID_TEMPLATE_SUBGRID_ENABLED_PREF_NAME "layout.css.grid-template-subgrid-value.enabled"
 #define WEBKIT_PREFIXES_ENABLED_PREF_NAME "layout.css.prefixes.webkit"
 #define TEXT_ALIGN_UNSAFE_ENABLED_PREF_NAME "layout.css.text-align-unsafe-value.enabled"
 #define FLOAT_LOGICAL_VALUES_ENABLED_PREF_NAME "layout.css.float-logical-values.enabled"
+#define INTERCHARACTER_RUBY_ENABLED_PREF_NAME "layout.css.ruby.intercharacter.enabled"
 
 // The time in number of frames that we estimate for a refresh driver
 // to be quiescent
 #define DEFAULT_QUIESCENT_FRAMES 2
 // The time (milliseconds) we estimate is needed between the end of an
 // idle time and the next Tick.
 #define DEFAULT_IDLE_PERIOD_TIME_LIMIT 1.0f
 
@@ -753,16 +754,32 @@ nsLayoutUtils::IsTextAlignUnsafeValueEna
     Preferences::AddBoolVarCache(&sTextAlignUnsafeValueEnabled,
                                  TEXT_ALIGN_UNSAFE_ENABLED_PREF_NAME,
                                  false);
   }
 
   return sTextAlignUnsafeValueEnabled;
 }
 
+bool
+nsLayoutUtils::IsInterCharacterRubyEnabled()
+{
+  static bool sInterCharacterRubyEnabled;
+  static bool sInterCharacterRubyEnabledPrefCached = false;
+
+  if (!sInterCharacterRubyEnabledPrefCached) {
+    sInterCharacterRubyEnabledPrefCached = true;
+    Preferences::AddBoolVarCache(&sInterCharacterRubyEnabled,
+                                 INTERCHARACTER_RUBY_ENABLED_PREF_NAME,
+                                 false);
+  }
+
+  return sInterCharacterRubyEnabled;
+}
+
 void
 nsLayoutUtils::UnionChildOverflow(nsIFrame* aFrame,
                                   nsOverflowAreas& aOverflowAreas,
                                   FrameChildListIDs aSkipChildLists)
 {
   // Iterate over all children except pop-ups.
   FrameChildListIDs skip = aSkipChildLists |
       nsIFrame::kSelectPopupList | nsIFrame::kPopupList;

--- a/layout/base/nsLayoutUtils.h
+++ b/layout/base/nsLayoutUtils.h
@@ -2361,16 +2361,21 @@ public:
   static bool IsGridTemplateSubgridValueEnabled();
 
   /**
    * Checks whether support for the CSS text-align (and text-align-last)
    * 'true' value is enabled.
    */
   static bool IsTextAlignUnsafeValueEnabled();
 
+  /**
+   * Checks whether support for inter-character ruby is enabled.
+   */
+  static bool IsInterCharacterRubyEnabled();
+
   static bool InterruptibleReflowEnabled()
   {
     return sInterruptibleReflowEnabled;
   }
 
   /**
    * Unions the overflow areas of the children of aFrame with aOverflowAreas.
    * aSkipChildLists specifies any child lists that should be skipped.

--- a/layout/generic/nsRubyFrame.cpp
+++ b/layout/generic/nsRubyFrame.cpp
@@ -340,17 +340,28 @@ nsRubyFrame::ReflowSegment(nsPresContext
       side.emplace(lineWM.LogicalSideForLineRelativeDir(eLineRelativeDirUnder));
     } else {
       // XXX inter-character support in bug 1055672
       MOZ_ASSERT_UNREACHABLE("Unsupported ruby-position");
     }
 
     LogicalPoint position(lineWM);
     if (side.isSome()) {
-      if (side.value() == eLogicalSideBStart) {
+      if (nsLayoutUtils::IsInterCharacterRubyEnabled() &&
+          rtcWM.IsVerticalRL() &&
+          lineWM.GetInlineDir() == WritingMode::eInlineLTR) {
+        // Inter-character ruby annotations are only supported for vertical-rl
+        // in ltr horizontal writing. Fall back to non-inter-character behavior
+        // otherwise.
+        LogicalPoint offset(lineWM, offsetRect.ISize(lineWM),
+          offsetRect.BSize(lineWM) > size.BSize(lineWM) ?
+          (offsetRect.BSize(lineWM) - size.BSize(lineWM)) / 2 : 0);
+        position = offsetRect.Origin(lineWM) + offset;
+        aReflowInput.mLineLayout->AdvanceICoord(size.ISize(lineWM));
+      } else if (side.value() == eLogicalSideBStart) {
         offsetRect.BStart(lineWM) -= size.BSize(lineWM);
         offsetRect.BSize(lineWM) += size.BSize(lineWM);
         position = offsetRect.Origin(lineWM);
       } else if (side.value() == eLogicalSideBEnd) {
         position = offsetRect.Origin(lineWM) +
           LogicalPoint(lineWM, 0, offsetRect.BSize(lineWM));
         offsetRect.BSize(lineWM) += size.BSize(lineWM);
       } else {

--- a/layout/reftests/css-ruby/reftest.list
+++ b/layout/reftests/css-ruby/reftest.list
@@ -40,16 +40,20 @@ test-pref(font.minimum-size.ja,16) == mi
 load nested-ruby-1.html
 == no-transform.html no-transform-ref.html
 == relative-positioning-1.html relative-positioning-1-ref.html
 == relative-positioning-2.html relative-positioning-2-ref.html
 == ruby-align-1.html ruby-align-1-ref.html
 == ruby-align-1a.html ruby-align-1-ref.html
 == ruby-align-2.html ruby-align-2-ref.html
 == ruby-align-2a.html ruby-align-2-ref.html
+pref(layout.css.ruby.intercharacter.enabled,true) == ruby-intercharacter-1.htm ruby-intercharacter-1-ref.htm
+pref(layout.css.ruby.intercharacter.enabled,false) != ruby-intercharacter-1.htm ruby-intercharacter-1-ref.htm
+pref(layout.css.ruby.intercharacter.enabled,true) == ruby-intercharacter-2.htm ruby-intercharacter-2-ref.htm
+pref(layout.css.ruby.intercharacter.enabled,false) != ruby-intercharacter-2.htm ruby-intercharacter-2-ref.htm
 == ruby-position-horizontal.html ruby-position-horizontal-ref.html
 == ruby-position-vertical-lr.html ruby-position-vertical-lr-ref.html
 == ruby-position-vertical-rl.html ruby-position-vertical-rl-ref.html
 != ruby-reflow-1-opaqueruby.html ruby-reflow-1-noruby.html
 fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),13,1) == ruby-reflow-1-transparentruby.html ruby-reflow-1-noruby.html
 == ruby-span-1.html ruby-span-1-ref.html
 == ruby-whitespace-1.html ruby-whitespace-1-ref.html
 == ruby-whitespace-2.html ruby-whitespace-2-ref.html

new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-1-ref.htm
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+Reftest 1 for Bug 1395777 (reference file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+body {
+  font-size: 30px;
+  line-height: 1;
+}
+.rbc {
+  height: 30px;
+  display: inline-block;
+  vertical-align: top;
+}
+.rtc {
+  height: 30px;
+  display: inline-block;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  vertical-align: top;
+  text-align: center;
+  font-size: 30%;
+}
+</style>
+</head>
+<body>
+  <div>
+    <span class="rbc">BASE</span><span class="rtc">RT</span>
+  </div>
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-1.htm
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+Reftest 1 for Bug 1395777 (test file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+body {
+  font-size: 30px;
+  line-height: 1;
+}
+rtc {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+</style>
+</head>
+<body>
+  <ruby>
+    <rbc>BASE</rbc><rtc>RT</rtc>
+  </ruby>
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-2-ref.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+Reftest 2 for Bug 1395777 (reference file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+html {
+  font-size: xx-large;
+}
+ruby {
+  width: 1.4em;
+}
+rtc {
+  display: inline-block;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  vertical-align: text-top;
+}
+</style>
+</head>
+<body>
+  <ruby>
+    <rbc>BASE</rbc><rtc>LONGRT</rtc>
+  </ruby>
+</body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-ruby/ruby-intercharacter-2.htm
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+Reftest 2 for Bug 1395777 (test file)
+-->
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<style>
+html {
+  font-size: xx-large;
+}
+rtc {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+</style>
+</head>
+<body>
+  <ruby>
+    <rbc>BASE</rbc><rtc>LONGRT</rtc>
+  </ruby>
+</body>
+</html>

--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -3099,16 +3099,19 @@ pref("layout.css.control-characters.visi
 #endif
 
 // Is support for column-span enabled?
 pref("layout.css.column-span.enabled", false);
 
 // Is effect of xml:base disabled for style attribute?
 pref("layout.css.style-attr-with-xml-base.disabled", true);
 
+// Are inter-character ruby annotations enabled?
+pref("layout.css.ruby.intercharacter.enabled", false);
+
 // pref for which side vertical scrollbars should be on
 // 0 = end-side in UI direction
 // 1 = end-side in document/content direction
 // 2 = right
 // 3 = left
 pref("layout.scrollbar.side", 0);
 
 // pref to stop overlay scrollbars from fading out, for testing purposes