Fix drawing EPUB decorators with vertical text (#671)

Author: shovel-kun

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. Take a look
 
 * Fixed vertical text scrolling in EPUB for right-to-left reading progression (contributed by [@shovel-kun](https://github.com/readium/kotlin-toolkit/pull/656)).
 * Fixed notifying the current location when using vertical text scrolling in EPUB (contributed by [@shovel-kun](https://github.com/readium/kotlin-toolkit/pull/656)).
+* Fixed drawing EPUB decorators with vertical text (contributed by [@shovel-kun](https://github.com/readium/kotlin-toolkit/pull/671)).
 
 
 ## [3.1.1]

readium/navigator/src/main/assets/_scripts/src/decorator.js

@@ -15,6 +15,20 @@ let styles = new Map();
 let groups = new Map();
 var lastGroupId = 0;
 
+/**
+ * Returns the document body's writing mode.
+ */
+function getDocumentWritingMode() {
+  return getComputedStyle(document.body).writingMode;
+}
+
+/**
+ * Returns the closest element ancestor of the given node.
+ */
+function getContainingElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+}
+
 /**
  * Registers a list of additional supported Decoration Templates.
  *
@@ -172,46 +186,108 @@ export function DecorationGroup(groupId, groupName) {
     }
 
     let itemContainer = document.createElement("div");
-    itemContainer.setAttribute("id", item.id);
-    itemContainer.setAttribute("data-style", item.decoration.style);
-    itemContainer.style.setProperty("pointer-events", "none");
-
-    let viewportWidth = window.innerWidth;
-    let columnCount = parseInt(
-      getComputedStyle(document.documentElement).getPropertyValue(
-        "column-count"
-      )
-    );
-    let pageWidth = viewportWidth / (columnCount || 1);
-    let scrollingElement = document.scrollingElement;
-    let xOffset = scrollingElement.scrollLeft;
-    let yOffset = scrollingElement.scrollTop;
-
-    function positionElement(element, rect, boundingRect) {
+    itemContainer.id = item.id;
+    itemContainer.dataset.style = item.decoration.style;
+    itemContainer.style.pointerEvents = "none";
+
+    const documentWritingMode = getDocumentWritingMode();
+    const isVertical =
+      documentWritingMode === "vertical-rl" ||
+      documentWritingMode === "vertical-lr";
+
+    const scrollingElement = document.scrollingElement;
+    const { scrollLeft: xOffset, scrollTop: yOffset } = scrollingElement;
+    const viewportWidth = isVertical ? window.innerHeight : window.innerWidth;
+    const viewportHeight = isVertical ? window.innerWidth : window.innerHeight;
+
+    const columnCount =
+      parseInt(
+        getComputedStyle(document.documentElement).getPropertyValue(
+          "column-count"
+        )
+      ) || 1;
+    const pageSize =
+      (isVertical ? viewportHeight : viewportWidth) / columnCount;
+
+    function positionElement(element, rect, boundingRect, writingMode) {
       element.style.position = "absolute";
-
-      if (style.width === "wrap") {
-        element.style.width = `${rect.width}px`;
-        element.style.height = `${rect.height}px`;
-        element.style.left = `${rect.left + xOffset}px`;
-        element.style.top = `${rect.top + yOffset}px`;
-      } else if (style.width === "viewport") {
-        element.style.width = `${viewportWidth}px`;
-        element.style.height = `${rect.height}px`;
-        let left = Math.floor(rect.left / viewportWidth) * viewportWidth;
-        element.style.left = `${left + xOffset}px`;
-        element.style.top = `${rect.top + yOffset}px`;
-      } else if (style.width === "bounds") {
-        element.style.width = `${boundingRect.width}px`;
-        element.style.height = `${rect.height}px`;
-        element.style.left = `${boundingRect.left + xOffset}px`;
-        element.style.top = `${rect.top + yOffset}px`;
-      } else if (style.width === "page") {
-        element.style.width = `${pageWidth}px`;
-        element.style.height = `${rect.height}px`;
-        let left = Math.floor(rect.left / pageWidth) * pageWidth;
-        element.style.left = `${left + xOffset}px`;
-        element.style.top = `${rect.top + yOffset}px`;
+      const isVerticalRL = writingMode === "vertical-rl";
+      const isVerticalLR = writingMode === "vertical-lr";
+
+      if (isVerticalRL || isVerticalLR) {
+        if (style.width === "wrap") {
+          element.style.width = `${rect.width}px`;
+          element.style.height = `${rect.height}px`;
+          if (isVerticalRL) {
+            element.style.right = `${
+              -rect.right - xOffset + scrollingElement.clientWidth
+            }px`;
+          } else {
+            // vertical-lr
+            element.style.left = `${rect.left + xOffset}px`;
+          }
+          element.style.top = `${rect.top + yOffset}px`;
+        } else if (style.width === "viewport") {
+          element.style.width = `${rect.height}px`;
+          element.style.height = `${viewportWidth}px`;
+          const top = Math.floor(rect.top / viewportWidth) * viewportWidth;
+          if (isVerticalRL) {
+            element.style.right = `${-rect.right - xOffset}px`;
+          } else {
+            // vertical-lr
+            element.style.left = `${rect.left + xOffset}px`;
+          }
+          element.style.top = `${top + yOffset}px`;
+        } else if (style.width === "bounds") {
+          element.style.width = `${boundingRect.height}px`;
+          element.style.height = `${viewportWidth}px`;
+          if (isVerticalRL) {
+            element.style.right = `${
+              -boundingRect.right - xOffset + scrollingElement.clientWidth
+            }px`;
+          } else {
+            // vertical-lr
+            element.style.left = `${boundingRect.left + xOffset}px`;
+          }
+          element.style.top = `${boundingRect.top + yOffset}px`;
+        } else if (style.width === "page") {
+          element.style.width = `${rect.height}px`;
+          element.style.height = `${pageSize}px`;
+          const top = Math.floor(rect.top / pageSize) * pageSize;
+          if (isVerticalRL) {
+            element.style.right = `${
+              -rect.right - xOffset + scrollingElement.clientWidth
+            }px`;
+          } else {
+            // vertical-lr
+            element.style.left = `${rect.left + xOffset}px`;
+          }
+          element.style.top = `${top + yOffset}px`;
+        }
+      } else {
+        if (style.width === "wrap") {
+          element.style.width = `${rect.width}px`;
+          element.style.height = `${rect.height}px`;
+          element.style.left = `${rect.left + xOffset}px`;
+          element.style.top = `${rect.top + yOffset}px`;
+        } else if (style.width === "viewport") {
+          element.style.width = `${viewportWidth}px`;
+          element.style.height = `${rect.height}px`;
+          const left = Math.floor(rect.left / viewportWidth) * viewportWidth;
+          element.style.left = `${left + xOffset}px`;
+          element.style.top = `${rect.top + yOffset}px`;
+        } else if (style.width === "bounds") {
+          element.style.width = `${boundingRect.width}px`;
+          element.style.height = `${rect.height}px`;
+          element.style.left = `${boundingRect.left + xOffset}px`;
+          element.style.top = `${rect.top + yOffset}px`;
+        } else if (style.width === "page") {
+          element.style.width = `${pageSize}px`;
+          element.style.height = `${rect.height}px`;
+          const left = Math.floor(rect.left / pageSize) * pageSize;
+          element.style.left = `${left + xOffset}px`;
+          element.style.top = `${rect.top + yOffset}px`;
+        }
       }
     }
 
@@ -230,32 +306,38 @@ export function DecorationGroup(groupId, groupName) {
     }
 
     if (style.layout === "boxes") {
-      let doNotMergeHorizontallyAlignedRects = true;
-      let clientRects = getClientRectsNoOverlap(
+      const doNotMergeHorizontallyAlignedRects =
+        !documentWritingMode.startsWith("vertical");
+      const startElement = getContainingElement(item.range.startContainer);
+      // Decorated text may have a different writingMode from document body
+      const decoratorWritingMode = getComputedStyle(startElement).writingMode;
+
+      const clientRects = getClientRectsNoOverlap(
         item.range,
         doNotMergeHorizontallyAlignedRects
-      );
-
-      clientRects = clientRects.sort((r1, r2) => {
-        if (r1.top < r2.top) {
-          return -1;
-        } else if (r1.top > r2.top) {
-          return 1;
+      ).sort((r1, r2) => {
+        if (r1.top !== r2.top) return r1.top - r2.top;
+        if (decoratorWritingMode === "vertical-rl") {
+          return r2.left - r1.left;
+        } else if (decoratorWritingMode === "vertical-lr") {
+          return r1.left - r2.left;
         } else {
-          return 0;
+          return r1.left - r2.left;
         }
       });
 
       for (let clientRect of clientRects) {
         const line = elementTemplate.cloneNode(true);
-        line.style.setProperty("pointer-events", "none");
-        positionElement(line, clientRect, boundingRect);
+        line.style.pointerEvents = "none";
+        line.dataset.writingMode = decoratorWritingMode;
+        positionElement(line, clientRect, boundingRect, documentWritingMode);
         itemContainer.append(line);
       }
     } else if (style.layout === "bounds") {
       const bounds = elementTemplate.cloneNode(true);
-      bounds.style.setProperty("pointer-events", "none");
-      positionElement(bounds, boundingRect, boundingRect);
+      bounds.style.pointerEvents = "none";
+      bounds.dataset.writingMode = documentWritingMode;
+      positionElement(bounds, boundingRect, boundingRect, documentWritingMode);
 
       itemContainer.append(bounds);
     }
@@ -276,9 +358,9 @@ export function DecorationGroup(groupId, groupName) {
   function requireContainer() {
     if (!container) {
       container = document.createElement("div");
-      container.setAttribute("id", groupId);
-      container.setAttribute("data-group", groupName);
-      container.style.setProperty("pointer-events", "none");
+      container.id = groupId;
+      container.dataset.group = groupName;
+      container.style.pointerEvents = "none";
       document.body.append(container);
     }
     return container;

readium/navigator/src/main/assets/readium/scripts/readium-fixed.js

@@ -131,32 +131,48 @@ public data class HtmlDecorationTemplate(
         ): HtmlDecorationTemplate {
             val className = createUniqueClassName(if (asHighlight) "highlight" else "underline")
             val padding = Padding(left = 1, right = 1)
+
             return HtmlDecorationTemplate(
                 layout = Layout.BOXES,
                 element = { decoration ->
                     val tint = (decoration.style as? Style.Tinted)?.tint ?: defaultTint
                     val isActive = (decoration.style as? Style.Activable)?.isActive ?: false
-                    var css = ""
-                    if (asHighlight || isActive) {
-                        css += "background-color: ${tint.toCss(alpha = alpha)} !important;"
-                    }
-                    if (!asHighlight || isActive) {
-                        css += "border-bottom: ${lineWeight}px solid ${tint.toCss()};"
+                    val css = buildString {
+                        if (asHighlight || isActive) {
+                            append("background-color: ${tint.toCss(alpha = alpha)} !important;")
+                        }
+                        if (!asHighlight || isActive) {
+                            append("--underline-color: ${tint.toCss()};")
+                        }
                     }
-                    """
-                    <div class="$className" style="$css"/>"
-                    """
+                    """<div class="$className" style="$css"/>"""
                 },
                 stylesheet = """
-                    .$className {
-                        margin-left: ${-padding.left}px;
-                        padding-right: ${padding.left + padding.right}px;
-                        margin-top: ${-padding.top}px;
-                        padding-bottom: ${padding.top + padding.bottom}px;
-                        border-radius: ${cornerRadius}px;
-                        box-sizing: border-box;
-                    }
-                    """
+            .$className {
+                margin: ${-padding.top}px ${-padding.left}px 0 0;
+                padding: 0 ${padding.left + padding.right}px ${padding.top + padding.bottom}px 0;
+                border-radius: ${cornerRadius}px;
+                box-sizing: border-box;
+                border: 0 solid var(--underline-color);
+            }
+            
+            /* Horizontal (default) */
+            [data-writing-mode="horizontal-tb"].$className {
+                border-bottom-width: ${lineWeight}px;
+            }
+            
+            /* Vertical right-to-left */
+            [data-writing-mode="vertical-rl"].$className,
+            [data-writing-mode="sideways-rl"].$className {
+                border-left-width: ${lineWeight}px;
+            }
+            
+            /* Vertical left-to-right */
+            [data-writing-mode="vertical-lr"].$className,
+            [data-writing-mode="sideways-lr"].$className {
+                border-right-width: ${lineWeight}px;
+            }            
+            """
             )
         }