Add preliminary tatweel RTL support

Tatweels still don't always work correctly

Author: danielgarthur

dist/byzhtml.js

@@ -3,6 +3,11 @@
   src: url('Neanes.otf');
 }
 
+@font-face {
+  font-family: 'NeanesRTL';
+  src: url('NeanesRTL.otf');
+}
+
 :root {
   /*
     Set the width of the vareia spacer for your font.

dist/byzhtml.js.map

@@ -101,6 +101,10 @@ server = http.createServer(function (req, res) {
     pipeFileToResponse(res, '../dist/Neanes.otf', 'text/javascript');
     return;
   }
+  if (/NeanesRTL\.otf$/.test(url)) {
+    pipeFileToResponse(res, '../dist/NeanesRTL.otf', 'text/javascript');
+    return;
+  }
   if (/byzhtml\.default\.css$/.test(url)) {
     pipeFileToResponse(res, './byzhtml.default.css', 'text/javascript');
     return;

dist/byzhtml.min.js

@@ -7,6 +7,7 @@ const fontService = new FontService();
 const options = {
   defaultFontFamily: 'Neanes',
   useWebkitPositioning: false,
+  melkiteRtl: false,
 };
 
 export default {

dist/byzhtml.min.js.map

@@ -1,6 +1,9 @@
+import byzhtml from '../byzhtml.js';
 import { CssVars } from './CssVars.js';
 import { TextMetrics } from './TextMetrics.js';
 
+const TATWEEL = '\u0640';
+
 function isElementInOrNearViewport(el) {
   const rect = el.getBoundingClientRect();
 
@@ -122,6 +125,76 @@ function processAutoMelisma(melisma) {
   return change;
 }
 
+function processAutoMelismaRtl(melisma) {
+  let change;
+  const parentNote = melisma.closest('x-note, x-n');
+  const siblingLyrics = parentNote.querySelector('x-lyric, x-ly');
+  const siblingLyricsRect = siblingLyrics.getBoundingClientRect();
+
+  let nextNote = parentNote.nextElementSibling;
+  let nextLyrics;
+  let depth = 0;
+  let melismaWidth;
+  let lastNoteLeft;
+
+  while (
+    nextNote &&
+    (nextNote.nodeName === 'X-NOTE' || nextNote.nodeName === 'X-N') &&
+    depth < 100
+  ) {
+    nextLyrics = nextNote.querySelector('x-lyric, x-ly');
+
+    const nextNoteRect = nextNote.getBoundingClientRect();
+
+    if (lastNoteLeft < nextNoteRect.left && lastNoteLeft !== undefined) {
+      // We have wrapped around. Extend the melisma to the end of the last note
+      // that was on the same line
+      melismaWidth = siblingLyricsRect.left - lastNoteLeft;
+      break;
+    }
+
+    if (nextLyrics && nextLyrics.innerText != TATWEEL) {
+      // We've found lyrics. Extend the melisma to the start of the lyrics.
+      const nextLyricsRect = nextLyrics.getBoundingClientRect();
+
+      melismaWidth = siblingLyricsRect.left - nextLyricsRect.right;
+
+      break;
+    }
+
+    lastNoteLeft = nextNoteRect.left;
+    nextNote = nextNote.nextElementSibling;
+
+    depth++;
+  }
+
+  if (melismaWidth) {
+    change = { melisma };
+
+    const melismaStyle = getComputedStyle(melisma);
+    const fontFamily = melismaStyle.getPropertyValue(CssVars.LyricFontFamily);
+    const fontSize = melismaStyle.getPropertyValue(CssVars.LyricFontSize);
+    const font = `${fontSize} ${fontFamily}`;
+
+    let text = '';
+
+    const widthOfTatweel = TextMetrics.getTextWidthFromCache(TATWEEL, font);
+
+    const numberOfTatweelsNeeded = Math.ceil(melismaWidth / widthOfTatweel);
+
+    for (let i = 0; i < numberOfTatweelsNeeded; i++) {
+      text += TATWEEL;
+    }
+
+    change.width = `${melismaWidth}px`;
+
+    change.textContent = text;
+  } else {
+    console.log('zero width');
+  }
+  return change;
+}
+
 export function processAutoMelismas() {
   const melismas = document.querySelectorAll(
     'x-melisma[auto], x-mel[auto], x-melisma[a], x-mel[a]',
@@ -158,7 +231,9 @@ export function processAutoMelismas() {
 
   // Calculate the changes
   for (let melisma of melismasInViewPort) {
-    let change = processAutoMelisma(melisma);
+    let change = byzhtml.options.melkiteRtl
+      ? processAutoMelismaRtl(melisma)
+      : processAutoMelisma(melisma);
 
     if (change) {
       changes.push(change);