feat: support vertical english signle character or with a dot

plateaukao · Nov 23, 2024 · 007a6fe · 007a6fe
1 parent bc38446
commit 007a6fe
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/app/src/main/assets/process_text_nodes.js b/app/src/main/assets/process_text_nodes.js
@@ -1,13 +1,28 @@
 function convertToVerticalStyle(node) {
     if (node.nodeType === Node.TEXT_NODE) {
         let text = node.nodeValue;
-        const regex = /(\d{1,4})/g;
+        const regex = /(\d{1,4}\.?|[a-zA-Z]{1,50}\.?)/g;
         let match;
         let lastIndex = 0;
         const fragment = document.createDocumentFragment();
 
         while ((match = regex.exec(text)) !== null) {
+            // exclude english words longer than 2 characters, e.g. "Hello" but keep a. b. c.
+            if (match[0].length > 1 && isLetter(match[0][0]) && isLetter(match[0][1])) { continue }
+
+            // digits longer than 4 characters are excluded, e.g. 12345, keep 2024 similar year numbers
             if (match[0].length > 2) {
+                if (lastIndex < match.index) {
+                    fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
+                }
+
+                // Create span element for the matched part
+                const span = document.createElement('span');
+                span.className = 'verticalSingleChr';
+                span.textContent = match[0];
+                fragment.appendChild(span);
+
+                lastIndex = regex.lastIndex;
                 continue;
             }
             // Create text node for the part before the match
@@ -36,4 +51,9 @@ function convertToVerticalStyle(node) {
         node.childNodes.forEach(child => convertToVerticalStyle(child));
     }
 }
+
+function isLetter(char) {
+    return /[a-zA-Z]/.test(char); // Returns true if the character is a letter
+}
+
 convertToVerticalStyle(document.body);
diff --git a/app/src/main/assets/verticalReaderview.css b/app/src/main/assets/verticalReaderview.css
@@ -276,13 +276,17 @@
   padding: 0;
 }
 
-        .vertical {
-            display: inline-block;
-            margin: 0.5em 0 !important;
-            letter-spacing: 0.0em;
-            text-indent: 0;
-              -moz-transform:rotate(-90deg);
-              -webkit-transform:rotate(-90deg);
-              -o-transform:rotate(-90deg);
-              transform:rotate(-90deg);
-        }
+.vertical {
+    display: inline-block;
+    margin: 0.5em 0 !important;
+    letter-spacing: 0.0em;
+    text-indent: 0;
+    -moz-transform:rotate(-90deg);
+    -webkit-transform:rotate(-90deg);
+    -o-transform:rotate(-90deg);
+    transform:rotate(-90deg);
+}
+.verticalSingleChr {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}