code: fixing negative margin on inline clipboard #1038

assets/css/format-print.css

@@ -17,11 +17,6 @@ html {
 body {
   background-color: rgba(255, 255, 255, 1);
 }
-code.copy-to-clipboard-code {
-  border-start-end-radius: 2px;
-  border-end-end-radius: 2px;
-  border-inline-end-width: 1px;
-}
 pre:not(.mermaid) {
   border: 1px solid rgba(204, 204, 204, 1);
 }
@@ -43,20 +38,11 @@ pre:not(.mermaid) {
     visibility: visible;
   }
 }
-#R-body span.copy-to-clipboard-code {
-  padding-inline-end: 2px;
-}
-#R-body .inline-copy-to-clipboard-button,
-#R-body .block-copy-to-clipboard-button {
-  display: none;
-}
 
-#R-body .inline-copy-to-clipboard-button + code.copy-to-clipboard-code,
+code.copy-to-clipboard-code:after,
-#R-body code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button) {
+.inline-copy-to-clipboard-button,
-  border-end-end-radius: 2px;
+.block-copy-to-clipboard-button {
-  border-start-end-radius: 2px;
+  display: none;
-  border-inline-end-width: 1px;
-  margin-inline-end: 0;
 }
 
 #R-body .svg-reset-button {

assets/css/theme.css

@@ -945,23 +945,6 @@ code {
   padding-right: 2px;
 }
 
-span.copy-to-clipboard {
-  display: inline;
-  position: relative;
-}
-
-/* #1022 FF has issues if we set span.copy-to-clipboard to display: block;
-so this is not an option; and we have to flip the elements ourself in the
-JS part of the code; this will fix FF for LTR but RTL is still broken;
-so at least it looks fine for most of the user base */
-.inline-copy-to-clipboard-button + code.copy-to-clipboard-code,
-code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button) {
-  border-end-end-radius: 0;
-  border-start-end-radius: 0;
-  border-inline-end-width: 0;
-  margin-inline-end: calc(22px + var(--bpx1) * 2px);
-}
-
 pre:not(.mermaid) {
   background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
   border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
@@ -1435,14 +1418,19 @@ html[dir='rtl'] .topbar-button-next i {
   }
 }
 
+span.copy-to-clipboard {
+  display: inline;
+  position: relative;
+}
+
+code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
+  display: inline-block;
+  width: calc(22px + var(--bpx1) * 2px);
+  content: '';
+}
+
 .inline-copy-to-clipboard-button,
 .block-copy-to-clipboard-button {
-  border-start-start-radius: 0;
-  border-start-end-radius: 2px;
-  border-end-end-radius: 2px;
-  border-end-start-radius: 0;
-  border-style: solid;
-  border-width: 1px;
   cursor: pointer;
   display: inline;
   font: initial;
@@ -1452,12 +1440,12 @@ html[dir='rtl'] .topbar-button-next i {
 .inline-copy-to-clipboard-button {
   background-color: var(--INTERNAL-CODE-INLINE-BG-color);
   border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
-  border-start-start-radius: 0;
+  border-inline-start-style: solid;
-  border-start-end-radius: 2px;
+  border-inline-start-width: 1px;
-  border-end-end-radius: 2px;
-  border-end-start-radius: 0;
   color: var(--INTERNAL-CODE-INLINE-color);
   margin-inline-start: calc(-1 * (22px + var(--bpx1) * 2px));
+  position: relative;
+  z-index: 10;
 }
 .inline-copy-to-clipboard-button:hover {
   background-color: var(--INTERNAL-CODE-INLINE-color);

layouts/partials/shortcodes/highlight.html

@@ -86,8 +86,9 @@
 {{- /* enrich attributes */}}
 {{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "highlight" slice) " ")) }}
 {{- if and $wrap (not $hl_inline) }}
-  {{- $attributes = merge $options (dict "class" (delimit (append (index $attributes "class" | default slice) "wrap-code" slice) " ")) }}
+  {{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "wrap-code" slice) " ")) }}
 {{- end }}
+{{- $attributes = merge $attributes (dict "dir" (delimit (append (index $attributes "dir" | default slice) "auto" slice) " ")) }}
 
 {{- /* print da shtuff */}}
 {{- $div := slice }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.4.1+1dfc98d640339f54e98e7b19af7d21d492f17155
+7.4.1+e985d6fcb4b74082c65c5f98e82051053233f3d7

static/js/theme.js

@@ -678,6 +678,7 @@ function initCodeClipboard() {
         var clone = code.cloneNode(true);
         var span = document.createElement('span');
         span.classList.add('copy-to-clipboard');
+        span.setAttribute('dir', 'auto');
         span.appendChild(clone);
         code.parentNode.replaceChild(span, code);
         code = clone;
@@ -726,6 +727,7 @@ function initCodeClipboard() {
           var clone = pre.cloneNode(true);
           var div = document.createElement('div');
           div.classList.add('highlight');
+          div.setAttribute('dir', 'auto');
           if (window.relearn.enableBlockCodeWrap) {
             div.classList.add('wrap-code');
           }
@@ -738,12 +740,7 @@ function initCodeClipboard() {
         code.classList.add('highlight');
         code.dataset.code = text;
         if (button) {
-          // #1022 fix for FF; see CSS for explanation
+          code.parentNode.insertBefore(button, code.nextSibling);
-          if (isRtl) {
-            code.parentNode.insertBefore(button, code.parentNode.firstChild);
-          } else {
-            code.parentNode.insertBefore(button, code.nextSibling);
-          }
         }
       }
     }