Commit 7d61ceb h

Pat Ambrosio · 26-09-01 09:14

Make the deep-link mark an ordinary link in the corner

Changes: 3 files +63 -92

Changes (Side-by-Side)

Raw

commit 7d61ceb33b32c6c0e4e0bbc26cbdaeb3143b4d58
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Tue Sep 1 09:14:52 2026 +0800

    Make the deep-link mark an ordinary link in the corner
    
    Two changes to a feature that was doing more than it needed to.
    
    The mark no longer copies to the clipboard. It is a plain anchor, so
    following it puts the address in the bar and right-clicking offers
    copy-link the way it does for every other link on the web -- nothing to
    learn, nothing to fail where the clipboard is unavailable, and no toast
    to explain what just happened. The toast styles go with it; nothing
    created the element any more.
    
    And it is pinned to the top right of its block rather than trailing the
    last word. At the end of a paragraph it sat wherever the text happened to
    stop, which is a different place on every block and reads as punctuation
    attached to the final sentence. In the corner the marks line up in a
    column the eye can learn, and being absolutely positioned they cannot
    reflow the text they belong to.
    
    The block is the containing block, so it takes position: relative. The
    mark sits in the margin the figure bleed already uses; measured at 1440
    and at 700, no mark overflows the viewport and the page gains no
    sideways scroll. Both layouts measured: flush with the block top, 8px
    past its right edge.

diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index 3c48745..a8ad0d9 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -890,12 +890,26 @@ cat << _EOF_
            while their siblings were bold. Deeper headings stay regular -- they
            sit inside a section rather than opening one. */
         .contents :is(h1, h2) { font-weight: bold; }
-        /* Deep-link mark. Hidden until the passage is hovered or the mark
-           itself is focused, so a page of prose is not littered with symbols;
-           keyboard users reach it by tabbing, which is why focus counts. */
+        /* Deep-link mark, pinned to the top right of the block rather than
+           trailing the last word: at the end of a paragraph it sat wherever
+           the text happened to stop, which is a different place on every
+           block and reads as punctuation. A fixed corner is somewhere the eye
+           can learn.
+
+           The block is the containing block, hence position: relative on it.
+           The mark sits outside the measure, in the margin the bleed already
+           uses, so it never reflows the text it belongs to.
+
+           Hidden until the passage is hovered or the mark itself is focused,
+           so a page of prose is not littered with symbols; keyboard users
+           reach it by tabbing, which is why focus counts. */
+        .contents :is(h1, h2, h3, h4)[id],
+        .contents p[id] { position: relative; }
         .anchor-link {
-          margin-left: .4em; text-decoration: none; opacity: 0;
-          color: var(--text-muted); font-weight: normal; cursor: pointer;
+          position: absolute; top: 0; left: 100%;
+          margin-left: .5em; line-height: inherit;
+          text-decoration: none; opacity: 0;
+          color: var(--text-muted); font-weight: normal;
         }
         :is(h1, h2, h3, h4, p):hover > .anchor-link,
         .anchor-link:focus { opacity: 1; }
@@ -910,14 +924,6 @@ cat << _EOF_
           box-shadow: 0 0 0 .4em var(--bg-secondary);
           border-radius: 2px;
         }
-        .copy-toast {
-          position: fixed; left: 50%; bottom: 2em; transform: translate(-50%, .5em);
-          background-color: var(--bg-secondary); color: var(--text-primary);
-          border: 1px solid var(--border-light); border-radius: 3px;
-          padding: .5em 1em; font-size: .875em; z-index: 3000;
-          opacity: 0; pointer-events: none;
-        }
-        .copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
         /* Every heading is body size, which keeps the page even but leaves a
            section heading reading as a stray line of capitals: uppercase alone
            does not say "new section". A rule above says it structurally rather
@@ -1219,40 +1225,15 @@ cat << _EOF_
             var targets = document.querySelectorAll('.contents :is(h1,h2,h3,h4)[id], .contents p[id]');
             if (!targets.length) return;
 
-            var toast = null;
-            function flash(msg) {
-              if (!toast) {
-                toast = document.createElement('div');
-                toast.className = 'copy-toast';
-                document.body.appendChild(toast);
-              }
-              toast.textContent = msg;
-              toast.classList.add('show');
-              clearTimeout(toast._t);
-              toast._t = setTimeout(function() { toast.classList.remove('show'); }, 1600);
-            }
-
+            // An ordinary link, not a copy button: following it puts the
+            // address in the bar, and right-clicking offers copy-link the way
+            // it does for every other link on the web. Nothing to learn.
             targets.forEach(function(el) {
               var a = document.createElement('a');
               a.className = 'anchor-link';
               a.href = '#' + el.id;
-              a.setAttribute('aria-label', 'Copy link to this passage');
+              a.setAttribute('aria-label', 'Link to this passage');
               a.textContent = '\u00B6';
-              a.addEventListener('click', function(e) {
-                e.preventDefault();
-                var url = location.origin + location.pathname + '#' + el.id;
-                // The address bar is updated either way, so the link is
-                // obtainable even where the clipboard is unavailable.
-                history.replaceState(null, '', '#' + el.id);
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                  navigator.clipboard.writeText(url).then(
-                    function() { flash('Link copied'); },
-                    function() { flash('Press \u2318/Ctrl+C to copy'); }
-                  );
-                } else {
-                  flash('Press \u2318/Ctrl+C to copy');
-                }
-              });
               el.appendChild(a);
             });
 
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 1f05596..0785ce5 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -711,12 +711,26 @@ cat << _EOF_
            while their siblings were bold. Deeper headings stay regular -- they
            sit inside a section rather than opening one. */
         .contents :is(h1, h2) { font-weight: bold; }
-        /* Deep-link mark. Hidden until the passage is hovered or the mark
-           itself is focused, so a page of prose is not littered with symbols;
-           keyboard users reach it by tabbing, which is why focus counts. */
+        /* Deep-link mark, pinned to the top right of the block rather than
+           trailing the last word: at the end of a paragraph it sat wherever
+           the text happened to stop, which is a different place on every
+           block and reads as punctuation. A fixed corner is somewhere the eye
+           can learn.
+
+           The block is the containing block, hence position: relative on it.
+           The mark sits outside the measure, in the margin the bleed already
+           uses, so it never reflows the text it belongs to.
+
+           Hidden until the passage is hovered or the mark itself is focused,
+           so a page of prose is not littered with symbols; keyboard users
+           reach it by tabbing, which is why focus counts. */
+        .contents :is(h1, h2, h3, h4)[id],
+        .contents p[id] { position: relative; }
         .anchor-link {
-          margin-left: .4em; text-decoration: none; opacity: 0;
-          color: var(--text-muted); font-weight: normal; cursor: pointer;
+          position: absolute; top: 0; left: 100%;
+          margin-left: .5em; line-height: inherit;
+          text-decoration: none; opacity: 0;
+          color: var(--text-muted); font-weight: normal;
         }
         :is(h1, h2, h3, h4, p):hover > .anchor-link,
         .anchor-link:focus { opacity: 1; }
@@ -731,14 +745,6 @@ cat << _EOF_
           box-shadow: 0 0 0 .4em var(--bg-secondary);
           border-radius: 2px;
         }
-        .copy-toast {
-          position: fixed; left: 50%; bottom: 2em; transform: translate(-50%, .5em);
-          background-color: var(--bg-secondary); color: var(--text-primary);
-          border: 1px solid var(--border-light); border-radius: 3px;
-          padding: .5em 1em; font-size: .875em; z-index: 3000;
-          opacity: 0; pointer-events: none;
-        }
-        .copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
         /* Every heading is body size, which keeps the page even but leaves a
            section heading reading as a stray line of capitals: uppercase alone
            does not say "new section". A rule above says it structurally rather
@@ -991,40 +997,15 @@ cat << _EOF_
             var targets = document.querySelectorAll('.contents :is(h1,h2,h3,h4)[id], .contents p[id]');
             if (!targets.length) return;
 
-            var toast = null;
-            function flash(msg) {
-              if (!toast) {
-                toast = document.createElement('div');
-                toast.className = 'copy-toast';
-                document.body.appendChild(toast);
-              }
-              toast.textContent = msg;
-              toast.classList.add('show');
-              clearTimeout(toast._t);
-              toast._t = setTimeout(function() { toast.classList.remove('show'); }, 1600);
-            }
-
+            // An ordinary link, not a copy button: following it puts the
+            // address in the bar, and right-clicking offers copy-link the way
+            // it does for every other link on the web. Nothing to learn.
             targets.forEach(function(el) {
               var a = document.createElement('a');
               a.className = 'anchor-link';
               a.href = '#' + el.id;
-              a.setAttribute('aria-label', 'Copy link to this passage');
+              a.setAttribute('aria-label', 'Link to this passage');
               a.textContent = '\u00B6';
-              a.addEventListener('click', function(e) {
-                e.preventDefault();
-                var url = location.origin + location.pathname + '#' + el.id;
-                // The address bar is updated either way, so the link is
-                // obtainable even where the clipboard is unavailable.
-                history.replaceState(null, '', '#' + el.id);
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                  navigator.clipboard.writeText(url).then(
-                    function() { flash('Link copied'); },
-                    function() { flash('Press \u2318/Ctrl+C to copy'); }
-                  );
-                } else {
-                  flash('Press \u2318/Ctrl+C to copy');
-                }
-              });
               el.appendChild(a);
             });
 
diff --git a/test/regressions.sh b/test/regressions.sh
index 6315aac..416e45e 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -1423,24 +1423,33 @@ assert_file_contains "$dg/.dist/post/charted.html" '.contents :is(h1, h2) {'
 assert_file_contains "$dg/.dist/chart.html" 'width: 3ch;'
 assert_file_contains "$dg/.dist/chart.html" '.contents :is(h1, h2)::before {'
 
-it "a passage offers a mark that copies its link"
+it "a passage offers a mark linking to itself"
 # Ids alone are undiscoverable -- a reader would have to open the source to
-# find one. Hovering a heading or paragraph reveals a mark that copies the
-# full URL to that place.
+# find one. Hovering a heading or paragraph reveals an ordinary link to it.
 assert_file_contains "$dg/.dist/chart.html" "a.className = 'anchor-link';"
 assert_file_contains "$dg/.dist/post/charted.html" "a.className = 'anchor-link';"
 
+it "the mark is a plain link, not a copy button"
+# Following it puts the address in the bar, and right-clicking offers
+# copy-link the way it does for every other link on the web. Nothing to learn,
+# and nothing to go wrong where the clipboard is unavailable.
+assert_file_not_contains "$dg/.dist/chart.html" "navigator.clipboard"
+assert_file_not_contains "$dg/.dist/chart.html" "copy-toast"
+
+it "the mark is pinned to the top right of its block"
+# Trailing the last word put it wherever the text happened to stop, which is a
+# different place on every block and reads as punctuation. A fixed corner is
+# somewhere the eye can learn. Measured in Chrome: flush with the block top,
+# 8px past its right edge, and no mark overflows the viewport at 700px.
+assert_file_contains "$dg/.dist/chart.html" 'position: absolute; top: 0; left: 100%;'
+assert_file_contains "$dg/.dist/chart.html" '.contents p[id] { position: relative; }' 
+
 it "the mark is hidden until the passage is hovered or the mark focused"
 # Otherwise a page of prose is littered with symbols. Focus counts too, or a
 # keyboard user could never reach it.
 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 link is obtainable even without the clipboard"
-# The address bar is updated whether or not the copy succeeds, so the reader
-# can always take the link from there.
-assert_file_contains "$dg/.dist/chart.html" "history.replaceState(null, '', '#' + el.id);"
-
 it "following a permalink marks what was linked"
 # A reader landing mid-document needs to see which passage was meant.
 assert_file_contains "$dg/.dist/chart.html" "t.classList.add('target-flash');"