Commit e52fbc5 h

Pat Ambrosio · 26-09-01 14:20

Fix a seam on the marked passage, and floor the note label column

Changes: 3 files +48 -4

Changes (Side-by-Side)

Raw

commit e52fbc547b53de64bff94f39122430a3e659b8bd
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Tue Sep 1 14:20:03 2026 +0800

    Fix a seam on the marked passage, and floor the note label column
    
    The deep-link highlight painted its background on the box and a
    box-shadow of the same colour spread beyond it. Two separately painted
    regions meeting at the box edge antialias against each other, which read
    as a faint darker line along the inside of the bottom edge. Padding
    paints the same shape once and has no seam; negative margins keep the
    text where it was, so marking a passage does not move it.
    
    The note label column had no minimum. Each note is its own table, so the
    column was only ever as wide as that note's own label -- "1:" measured
    20px against far more for a named one -- and the text of every note began
    at a different place down the list. A 4ch floor steadies the short
    labels, which are most of them, while a long one still pushes past it
    rather than wrapping. It cannot align long labels with short ones: that
    would need the list to be one grid rather than a table per item.

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 5a026f9..f3fb1b2 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -923,10 +923,18 @@ cat << _EOF_
         /* The passage a permalink pointed at, marked rather than animated: a
            reader arriving mid-document needs to see which paragraph was meant,
            and a flash they might miss does not tell them. */
+        /* Padding rather than a spread shadow. The background paints the
+           box and the shadow painted beyond it, and where the two met they
+           antialiased against each other -- a faint darker seam along the
+           inside of the bottom edge. One padded box paints once and has no
+           seam. Negative margins keep the text where it was, so marking a
+           passage does not move it. */
         .target-flash {
           background-color: var(--bg-secondary);
-          box-shadow: 0 0 0 .4em var(--bg-secondary);
           border-radius: 2px;
+          padding: .4em .5em;
+          margin-left: -.5em;
+          margin-right: -.5em;
         }
         /* Every heading is body size, which keeps the page even but leaves a
            section heading reading as a stray line of capitals: uppercase alone
@@ -994,7 +1002,13 @@ cat << _EOF_
         .citations ol { padding-left: 1.4em; margin-top: 0; }
         .citations li { margin-bottom: .5em; }
         .fn-handle, .fn-text { display: table-cell; }
-        .fn-handle { padding-right: 1ch; }
+        /* Each note is its own table, so the label column is only as wide as
+           that note's own label: "1:" gave 20px and "code-commodity:" far
+           more, and the text of every note started at a different place down
+           the list. A minimum holds the column steady for the short labels --
+           which are most of them -- while a long one is still free to push
+           past it rather than wrap. */
+        .fn-handle { padding-right: 1ch; min-width: 4ch; }
         .fnref { line-height: 0 }
         /* Labelled the way notes and references are: a row of bare links under
            a rule read as unexplained next to two sections that name
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 90b6d90..42d9f1e 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -744,10 +744,18 @@ cat << _EOF_
         /* The passage a permalink pointed at, marked rather than animated: a
            reader arriving mid-document needs to see which paragraph was meant,
            and a flash they might miss does not tell them. */
+        /* Padding rather than a spread shadow. The background paints the
+           box and the shadow painted beyond it, and where the two met they
+           antialiased against each other -- a faint darker seam along the
+           inside of the bottom edge. One padded box paints once and has no
+           seam. Negative margins keep the text where it was, so marking a
+           passage does not move it. */
         .target-flash {
           background-color: var(--bg-secondary);
-          box-shadow: 0 0 0 .4em var(--bg-secondary);
           border-radius: 2px;
+          padding: .4em .5em;
+          margin-left: -.5em;
+          margin-right: -.5em;
         }
         /* Every heading is body size, which keeps the page even but leaves a
            section heading reading as a stray line of capitals: uppercase alone
@@ -815,7 +823,13 @@ cat << _EOF_
         .citations ol { padding-left: 1.4em; margin-top: 0; }
         .citations li { margin-bottom: .5em; }
         .fn-handle, .fn-text { display: table-cell; }
-        .fn-handle { padding-right: 1ch; }
+        /* Each note is its own table, so the label column is only as wide as
+           that note's own label: "1:" gave 20px and "code-commodity:" far
+           more, and the text of every note started at a different place down
+           the list. A minimum holds the column steady for the short labels --
+           which are most of them -- while a long one is still free to push
+           past it rather than wrap. */
+        .fn-handle { padding-right: 1ch; min-width: 4ch; }
         .fnref { line-height: 0 }
         /* Labelled the way notes and references are: a row of bare links under
            a rule read as unexplained next to two sections that name
diff --git a/test/regressions.sh b/test/regressions.sh
index 2648ca9..fc0eb81 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -1453,6 +1453,22 @@ it "the mark is hidden until the passage is hovered or the mark focused"
 assert_file_contains "$dg/.dist/chart.html" '.anchor-link:focus { opacity: 1; }'
 assert_file_contains "$dg/.dist/chart.html" '@media (hover: none) { .anchor-link { display: none; } }'
 
+it "the marked passage paints as one box"
+# A spread box-shadow in the same colour as the background painted a second
+# region abutting the first, and the two antialiased against each other -- a
+# faint darker seam along the inside of the bottom edge. Padding paints once.
+# Negative margins hold the text where it was, so marking does not move it.
+assert_file_contains "$dg/.dist/chart.html" 'padding: .4em .5em;'
+assert_file_not_contains "$dg/.dist/chart.html" 'box-shadow: 0 0 0 .4em var(--bg-secondary);'
+
+it "the note label column has a floor"
+# Each note is its own table, so the label column was only as wide as that
+# note's own label: "1:" measured 20px and a named note far more, and the text
+# of every note began at a different place down the list. The minimum steadies
+# the short labels, which are most of them; a long one still pushes past it
+# rather than wrapping.
+assert_file_contains "$dg/.dist/chart.html" '.fn-handle { padding-right: 1ch; min-width: 4ch; }'
+
 it "a linked passage is centred, not pinned to the top"
 # A passage flush with the top edge has no text above it, so nothing shows
 # what it follows from. Centred, it arrives with its own context either side.