Fix HTML margin note positioning and personnel two-column layout

Margin notes:
- CSS: dd margin notes use position:absolute relative to parent dl,
  with left:110% to align with non-dl margin notes
- JS: detect and fix overlapping adjacent notes by nudging down

Personnel lists:
- JS: split raw text nodes in .columns-2 into individual spans
  so CSS grid can lay them out in two columns
- CSS: wider columns (80%, no margin notes in this section),
  white-space:nowrap to prevent date ranges from splitting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jeremymanning

lab-manual.css

@@ -91,16 +91,18 @@ p.noindent img {
 div.columns-2,
 .columns-2,
 .personnel-list {
-  width: 55%;
+  width: 80%;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.3em 2em;
-  line-height: 1.6;
+  gap: 0.2em 2em;
 }
 
 /* Individual personnel items (wrapped by JavaScript) */
 .personnel-item {
   display: block;
+  font-size: 1.4rem;
+  line-height: 1.8;
+  white-space: nowrap;
 }
 
 /* Margin notes styling - positioned in right margin */
@@ -131,9 +133,12 @@ label.sidenote-number {
 }
 
 /* Definition lists (used for numbered items) */
-/* Only top-level dl gets 55% width; nested dl inherits parent width */
+/* Only top-level dl gets 55% width; nested dl inherits parent width.
+   position: relative makes this the containing block for absolutely
+   positioned margin notes inside dd elements. */
 article > dl {
   width: 55%;
+  position: relative;
 }
 
 dt {
@@ -153,13 +158,16 @@ dd dl {
   width: 100%;
 }
 
-/* Margin notes inside definition lists need wider offset since
-   dd elements are narrower than article-level paragraphs.
-   These notes are repositioned by JavaScript (see toc.js) to
-   prevent them from expanding dd height or overlapping. */
-dl .marginnote, dl .sidenote {
-  margin-right: -80%;
-  width: 40%;
+/* Margin notes inside definition lists: absolutely positioned relative
+   to the top-level dl. This removes them from flow so dd elements don't
+   expand vertically. left:110% aligns with non-dl margin notes. */
+dd .marginnote, dd .sidenote {
+  position: absolute;
+  left: 110%;
+  width: 50%;
+  float: none;
+  clear: none;
+  margin-right: 0;
 }
 
 /* Checklist styling - make checkboxes visible */

lab_manual.pdf

@@ -3,14 +3,11 @@ document.addEventListener('DOMContentLoaded', function() {
   var toc = document.getElementById('toc-list');
   if (!toc) return;
 
-  // Clear existing TOC items (tex4ht generates broken links)
   while (toc.firstChild) toc.removeChild(toc.firstChild);
 
   var headings = document.querySelectorAll('h2.chapterHead');
   headings.forEach(function(h, index) {
-    // Generate an ID if heading doesn't have one or it's empty
     if (!h.id || h.id === '') {
-      // Create slug from heading text
       var slug = h.textContent
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, '-')
@@ -25,35 +22,62 @@ document.addEventListener('DOMContentLoaded', function() {
     li.appendChild(a);
     toc.appendChild(li);
   });
-});
 
-// Fix margin notes inside definition lists.
-// Floated margin notes inside dd elements expand the dd height,
-// causing large gaps in the left-side text. We reposition them
-// as absolutely positioned elements relative to the article.
-// Runs on window load (after layout) so getBoundingClientRect is accurate.
-window.addEventListener('load', function() {
-  var article = document.querySelector('article');
-  if (!article) return;
+  // Wrap personnel names in .columns-2 sections into individual spans.
+  // tex4ht outputs names as raw text in a <p>; CSS grid needs elements.
+  // Each name matches "Name (year – )" or "Name (year – year)" or "Name (year)".
+  var cols = document.querySelectorAll('.columns-2');
+  cols.forEach(function(col) {
+    var ps = col.querySelectorAll('p');
+    ps.forEach(function(p) {
+      var text = p.textContent.trim();
+      if (!text) return;
 
-  article.style.position = 'relative';
+      // Split on the pattern: end of one entry ")" followed by start of next
+      var names = text.match(/[^)]+\)/g);
+      if (!names || names.length === 0) return;
 
-  var ddNotes = document.querySelectorAll('dd .marginnote, dd .sidenote');
-  var articleRect = article.getBoundingClientRect();
+      // Replace the <p> contents with wrapped spans
+      while (p.firstChild) p.removeChild(p.firstChild);
+      names.forEach(function(name) {
+        var span = document.createElement('span');
+        span.className = 'personnel-item';
+        span.textContent = name.trim();
+        p.appendChild(span);
+      });
+    });
 
-  ddNotes.forEach(function(note) {
-    var parent = note.parentElement;
-    var anchorRect = parent.getBoundingClientRect();
-    var topOffset = anchorRect.top - articleRect.top;
+    // Move children out of <p> into the columns-2 div directly for grid layout
+    var items = col.querySelectorAll('.personnel-item');
+    items.forEach(function(item) {
+      col.appendChild(item);
+    });
+    // Remove now-empty <p> elements
+    var emptyPs = col.querySelectorAll('p');
+    emptyPs.forEach(function(p) {
+      if (p.textContent.trim() === '') p.remove();
+    });
+  });
+});
 
-    note.style.position = 'absolute';
-    note.style.top = topOffset + 'px';
-    note.style.right = '0';
-    note.style.width = '25%';
-    note.style.marginRight = '0';
-    note.style.float = 'none';
-    note.style.clear = 'none';
+// Prevent overlapping margin notes inside definition lists.
+// CSS positions dd margin notes with position:absolute (removing them
+// from flow so dd doesn't expand). But adjacent notes can overlap.
+// This script nudges overlapping notes down with a small gap.
+window.addEventListener('load', function() {
+  var dls = document.querySelectorAll('article > dl');
+  dls.forEach(function(dl) {
+    var notes = dl.querySelectorAll('dd .marginnote, dd .sidenote');
+    if (notes.length < 2) return;
 
-    article.appendChild(note);
+    for (var i = 1; i < notes.length; i++) {
+      var prev = notes[i - 1].getBoundingClientRect();
+      var curr = notes[i].getBoundingClientRect();
+      var overlap = prev.bottom - curr.top;
+      if (overlap > 0) {
+        var currentTop = parseFloat(getComputedStyle(notes[i]).top) || 0;
+        notes[i].style.top = (currentTop + overlap + 8) + 'px';
+      }
+    }
   });
 });