rtl: fix alignment of buttons #1039

assets/css/theme.css

@@ -959,12 +959,6 @@ pre:not(.mermaid) {
   position: relative;
 }
 
-div.highlight {
-  /* even in RTL languages code is supposed to be LTR */
-  direction: ltr;
-  text-align: left;
-}
-
 pre:not(.mermaid) code {
   background-color: inherit;
   border: 0;
@@ -1463,7 +1457,7 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
   display: none;
   padding: 5px 3px;
   position: absolute;
-  right: 4px;
+  inset-inline-end: 4px;
   top: 4px;
 }
 @media (any-hover: none) {
@@ -1608,7 +1602,7 @@ html[dir='rtl'] .expand[open] > .box-label > i.expander-icon {
   line-height: 1.15;
   padding: 5px 3px;
   position: absolute;
-  right: 4px;
+  inset-inline-end: 4px;
   top: 4px;
 }
 .svg-reset-button:hover {

docs/content/introduction/releasenotes/7/5.en.md

@@ -0,0 +1,16 @@
++++
+disableToc = false
+hidden = true
+title = "Version 7.5"
+type = "releasenotes"
+weight = -5
++++
+
+## 7.5.0 (XXXX-XX-XX) {#7-5-0}
+
+### Change
+
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} Buttons for languages written right to left are now rendered correctly. This applies to
+
+  - the Mermaid zoom button depending on the page's language
+  - inline and block copy-to-clipboard buttons depending of the contained text content

layouts/partials/version.txt

@@ -1 +1 @@
-7.4.1+e985d6fcb4b74082c65c5f98e82051053233f3d7
+7.4.1+fd4478e535854d245f3536be9d306e77eda5ea96

static/js/theme.js

@@ -172,7 +172,7 @@ function restoreTabSelections() {
 
 function initMermaid(update, attrs) {
   var doBeside = true;
-  var isImageRtl = false;
+  var isImageRtl = isRtl;
 
   // we are either in update or initialization mode;
   // during initialization, we want to edit the DOM;
@@ -357,7 +357,7 @@ function initMermaid(update, attrs) {
           button.addEventListener('click', function (event) {
             svg.transition().duration(350).call(zoom.transform, d3.zoomIdentity);
             this.setAttribute('aria-label', window.T_View_reset);
-            this.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isImageRtl ? 'e' : 'w')));
+            this.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isImageRtl ? 'e' : 'w'));
           });
           button.addEventListener('mouseleave', function () {
             if (this.classList.contains('tooltipped')) {
@@ -646,7 +646,7 @@ function initCodeClipboard() {
     }
   });
 
-  var preOnlyElements = document.querySelectorAll('pre > :not(code), pre:not(:has(>*))');
+  var preOnlyElements = document.querySelectorAll('pre:not(.mermaid) > :not(code), pre:not(.mermaid):not(:has(>*))');
   for (var i = 0; i < preOnlyElements.length; i++) {
     // move everything down one level so that it fits to the next selector
     // and we also get copy-to-clipboard for pre-only elements
@@ -758,21 +758,21 @@ function initCodeClipboard() {
   clip.on('success', function (e) {
     e.clearSelection();
     var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre';
-    var isCodeRtl = !inPre ? isRtl : false;
+    var isCodeRtl = window.getComputedStyle(e.trigger).direction == 'rtl';
     var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table');
     e.trigger.setAttribute('aria-label', window.T_Copied_to_clipboard);
-    e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w')));
+    e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isCodeRtl ? 'e' : 'w'));
   });
 
   clip.on('error', function (e) {
     var inPre = e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'pre';
-    var isCodeRtl = !inPre ? isRtl : false;
+    var isCodeRtl = window.getComputedStyle(e.trigger).direction == 'rtl';
     var doBeside = inPre || (e.trigger.previousElementSibling && e.trigger.previousElementSibling.tagName.toLowerCase() == 'table');
     e.trigger.setAttribute('aria-label', fallbackMessage(e.action));
-    e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w')));
+    e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isCodeRtl ? 'e' : 'w'));
     var f = function () {
       e.trigger.setAttribute('aria-label', window.T_Copied_to_clipboard);
-      e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's' + (isCodeRtl ? 'e' : 'w')));
+      e.trigger.classList.add('tooltipped', 'tooltipped-' + (doBeside ? '' : 's') + (isCodeRtl ? 'e' : 'w'));
       document.removeEventListener('copy', f);
     };
     document.addEventListener('copy', f);