diff --git a/app/src/main/assets/process_text_nodes.js b/app/src/main/assets/process_text_nodes.js index 370452cf..cdf28950 100644 --- 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); \ No newline at end of file diff --git a/app/src/main/assets/verticalReaderview.css b/app/src/main/assets/verticalReaderview.css index ed656ac8..77ff9535 100644 --- 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); - } \ No newline at end of file +.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; +} \ No newline at end of file