From 85a7cb9354970811fae666e4d30b6c2f2d0cc0f3 Mon Sep 17 00:00:00 2001
From: Simon Hailes <simon@yellaumbrella.tv>
Date: Fri, 15 Jul 2022 15:34:08 +0100
Subject: [PATCH] change of scheme for rubyReserve. Create a real ruby with
 real characters, but ensure it has no width and is not visible. Add it before
 other content on the line.  For 'both' add two. This works for Chrome and
 Firefox.

---
 src/main/js/html.js | 106 +++++++++++++-------------------------------
 1 file changed, 31 insertions(+), 75 deletions(-)

diff --git a/src/main/js/html.js b/src/main/js/html.js
index 06cf8f95..5326c2bd 100755
--- a/src/main/js/html.js
+++ b/src/main/js/html.js
@@ -871,91 +871,47 @@
     }
 
     function applyRubyReserve(lineList, context) {
-
+        console.log(lineList);
         for (var i = 0; i < lineList.length; i++) {
-
-            var ruby = document.createElement("ruby");
+            var rubyover = document.createElement("ruby");
+            var fs = context.rubyReserve[1].toUsedLength(context.w, context.h) + "px";
 
             var rb = document.createElement("rb");
-            rb.textContent = "\u200B";
-
-            ruby.appendChild(rb);
-
-            var rt1;
-            var rt2;
-
-            var fs = context.rubyReserve[1].toUsedLength(context.w, context.h) + "px";
+            rb.textContent = "ん";
+            rb.style.marginInlineStart = '-10em';
+            var rt = document.createElement("rt");
+            /* note: the text content matters from a size perspective */
+            rt.textContent = "ん";
+            rt.style.fontSize = fs;
+            rt.style.marginInlineStart = '-10em';
+            rubyover.style.visibility = 'hidden';
+            rubyover.style.rubyPosition = 'over';
+            rubyover.appendChild(rb);
+            rubyover.appendChild(rt);
+
+            var rubyunder = rubyover.cloneNode(true);
+            rubyunder.style.rubyPosition = 'under';
+
+            // get first leaf node on this line.
+            var sib = lineList[i].elements[0].node;
+            var target = sib;
+            var parent = sib.parentElement;
+            while (parent.nodeName !== 'P'){
+              target = parent;
+              parent = parent.parentElement;
+            }
 
             if (context.rubyReserve[0] === "both" || (context.rubyReserve[0] === "outside" && lineList.length == 1)) {
-
-                rt1 = document.createElement("rtc");
-                rt1.style[RUBYPOSITION_PROP] = RUBYPOSITION_ISWK ? "after" : "under";
-                rt1.textContent = "\u200B";
-                rt1.style.fontSize = fs;
-
-                rt2 = document.createElement("rtc");
-                rt2.style[RUBYPOSITION_PROP] = RUBYPOSITION_ISWK ? "before" : "over";
-                rt2.textContent = "\u200B";
-                rt2.style.fontSize = fs;
-
-                ruby.appendChild(rt1);
-                ruby.appendChild(rt2);
-
+              target.parentElement.insertBefore(rubyover, target);
+              target.parentElement.insertBefore(rubyunder, target);
             } else {
-
-                rt1 = document.createElement("rtc");
-                rt1.textContent = "\u200B";
-                rt1.style.fontSize = fs;
-
-                var pos;
-
                 if (context.rubyReserve[0] === "after" || (context.rubyReserve[0] === "outside" && i > 0)) {
-
-                    pos = RUBYPOSITION_ISWK ? "after" : ((context.bpd === "tb" || context.bpd === "rl") ? "under" : "over");
-
+                  target.parentElement.insertBefore(rubyunder, target);
                 } else {
-
-                    pos = RUBYPOSITION_ISWK ? "before" : ((context.bpd === "tb" || context.bpd === "rl") ? "over" : "under");
-
+                  target.parentElement.insertBefore(rubyover, target);
                 }
-
-                rt1.style[RUBYPOSITION_PROP] = pos;
-
-                ruby.appendChild(rt1);
-
             }
-
-            /* add in front of the first ruby element of the line, if it exists */
-
-            var sib = null;
-
-            for (var j = 0; j < lineList[i].rbc.length; j++) {
-
-                if (lineList[i].rbc[j].localName === 'ruby') {
-
-                    sib = lineList[i].rbc[j];
-
-                    /* copy specified style properties from the sibling ruby container */
-                    
-                    for (var k = 0; k < sib.style.length; k++) {
-
-                        ruby.style.setProperty(sib.style.item(k), sib.style.getPropertyValue(sib.style.item(k)));
-
-                    }
-
-                    break;
-                }
-
-            }
-
-            /* otherwise add before first span */
-
-            sib = sib || lineList[i].elements[0].node;
-
-            sib.parentElement.insertBefore(ruby, sib);
-
         }
-
     }
 
     function applyFillLineGap(lineList, par_before, par_after, context, element) {
@@ -1822,7 +1778,7 @@
 
     /* CSS property names */
 
-    var RUBYPOSITION_ISWK = "webkitRubyPosition" in window.getComputedStyle(document.documentElement);
+    var RUBYPOSITION_ISWK = false; //"webkitRubyPosition" in window.getComputedStyle(document.documentElement);
 
     var RUBYPOSITION_PROP = RUBYPOSITION_ISWK ? "webkitRubyPosition" : "rubyPosition";