BUGFIX: overlapping comments

helpers/functions/textparse.go

@@ -139,18 +139,19 @@ func Parse(lib *xmlmodels.Library) func(s string) string {
 					if err == nil {
 						person = lib.Persons.Item(idno)
 					}
-					note := Note{Id: id}
-					note.Tokens.AppendDivElement(id, "note-hand")
-					ps.Tokens.AppendDivElement(id, "inline-hand")
 					hand := "N/A"
 					if person != nil {
 						hand = person.Name
 					}
+
+					note := Note{Id: id}
+					note.Tokens.AppendDivElement(id, "note-hand")
 					note.Tokens.AppendText(hand)
-					ps.Tokens.AppendText(hand)
 					note.Tokens.AppendEndElement()
-					ps.Tokens.AppendEndElement()
 					ps.AppendNote(note)
+					ps.Tokens.AppendDivElement(id, "inline-hand")
+					ps.Tokens.AppendText(hand)
+					ps.Tokens.AppendEndElement()
 					ps.Tokens.AppendDivElement("", "hand")
 					ps.Tokens.AppendCustomAttribute("aria-describedby", id)
 
@@ -158,14 +159,9 @@ func Parse(lib *xmlmodels.Library) func(s string) string {
 					if val := elem.Token.Attributes["type"]; val != "empty" {
 						ps.LC += 1
 						if ps.Break {
-							// if elem.Token.Attributes["tab"] == "1" {
-							// 	ps.Tokens.AppendElement("p", ps.PC+"-"+strconv.Itoa(ps.LC), "tab-1")
-							// 	ps.CloseElement = false
-							// } else {
 							ps.Tokens.AppendEmptyElement("br", ps.PC+"-"+strconv.Itoa(ps.LC))
-							ps.Tokens.AppendDefaultElement(elem.Token) // This is for indents, must be closed
-							// }
 						}
+						ps.Tokens.AppendDefaultElement(elem.Token) // This is for indents, must be closed
 					} else {
 						ps.Tokens.AppendEmptyElement("br", "", "empty")
 						ps.CloseElement = false // Here Indents make no sense, so we dont open an element

views/transform/main.js

@@ -331,18 +331,24 @@ function Letter() {
 		_alignSidenotes(".notes", ".note-sidenote-meta", ".sidenote");
 	}
 
+	const positionedIntervals = [];
 	function _alignSidenotes(container, align, alignto) {
 		const fulltext = document.querySelector(".fulltext");
 		const cont = document.querySelector(container);
 		if (!cont) return;
-		const notes = cont.querySelectorAll(align);
+		const notes = Array.from(cont.querySelectorAll(align));
 
+		// Reset classes and inline styles
 		notes.forEach((note) => {
 			note.classList.remove("margin-note");
 			note.style.top = "";
 		});
 
-		if (window.innerWidth < 900 || window.matchMedia("print").matches) return;
+		// Skip on print
+		if (window.matchMedia("print").matches) return;
+
+		const textRect = cont.getBoundingClientRect();
+		const GUTTER = 0; // space in pixels between notes
 
 		notes.forEach((note) => {
 			const noteId = note.id;
@@ -351,11 +357,39 @@ function Letter() {
 			if (!anchor) return;
 
 			note.classList.add("margin-note");
-			const textRect = cont.getBoundingClientRect();
 			const anchorRect = anchor.getBoundingClientRect();
-			const top = anchorRect.top - textRect.top;
+			const baseTop = anchorRect.top - textRect.top;
+
+			const noteHeight = note.getBoundingClientRect().height;
+			let top = baseTop;
+
+			// Adjust to prevent overlap
+			let collision;
+			do {
+				collision = false;
+				for (const interval of positionedIntervals) {
+					const intervalTop = interval.top;
+					const intervalBottom = interval.bottom;
+					if (top < intervalBottom && top + noteHeight > intervalTop) {
+						console.log("Collision detected", {
+							top,
+							bottom: top + noteHeight,
+							intervalTop,
+							intervalBottom,
+							newTop: intervalBottom + GUTTER,
+						});
+						top = intervalBottom + GUTTER;
+						collision = true;
+					}
+				}
+			} while (collision);
+
+			// Record this note's interval
+			positionedIntervals.push({ top, bottom: top + noteHeight });
+
 			note.style.top = `${top}px`;
 		});
+		console.log("Aligned sidenotes", positionedIntervals);
 	}
 
 	if (window.htmx) {
@@ -363,11 +397,12 @@ function Letter() {
 			alignSidenotes();
 		});
 	}
+
 	window.addEventListener("load", () => {
 		alignSidenotes();
 	});
+
 	window.addEventListener("resize", alignSidenotes);
-	console.log("Letter loaded");
 }
 
 customElements.define(SCROLL_BUTTON_ELEMENT, ScrollButton);

views/transform/site.css

@@ -115,6 +115,7 @@
 	.text .ru,
 	.text .nr,
 	.text .align,
+	.text .er,
 	.text .b,
 	.text .i,
 	.text .subst,
@@ -262,7 +263,12 @@
 	}
 
 	.text .hand {
-		@apply inline text-blue-950 font-didone text-[0.9rem];
+		@apply inline text-blue-950 !font-didone text-[0.9rem];
+	}
+
+	.text .er {
+		text-decoration: line-through;
+		text-decoration-thickness: 17px;
 	}
 
 	.text .sidenote-page::before {