Fix inconsistent axis title standoff when title is one text line vs. multiple lines.

Previously, the standoff was calculated in the same way for all axis sides, but since the renderer draws from top left to bottom right, the code must be different for top/left axes titles and bottom/right axes titles: For top/left axes all lines after the first of a multiline title require extra space before the ticklabels, whereas for bottom/right axes, the drawing baseline needs to be shifted 1 line after the ticklabels to prevent overlap.

Author: my-tien

src/plots/cartesian/axes.js

@@ -4060,9 +4060,7 @@ function approxTitleDepth(ax) {
     var fontSize = ax.title.font.size;
     var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
     if(ax.title.hasOwnProperty('standoff')) {
-        return extraLines ?
-            fontSize * (CAP_SHIFT + (extraLines * LINE_SPACING)) :
-            fontSize * CAP_SHIFT;
+        return fontSize * (CAP_SHIFT + (extraLines * LINE_SPACING));
     } else {
         return extraLines ?
             fontSize * (extraLines + 1) * LINE_SPACING :
@@ -4093,9 +4091,19 @@ function drawTitle(gd, ax) {
     var axLetter = axId.charAt(0);
     var fontSize = ax.title.font.size;
     var titleStandoff;
+    var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
 
     if(ax.title.hasOwnProperty('standoff')) {
-        titleStandoff = ax._depth + ax.title.standoff + approxTitleDepth(ax);
+        // With ax._depth the initial drawing baseline is at the outer axis border (where the
+        // ticklabels are drawn). Since the title text will be drawn above the baseline,
+        // bottom/right axes must be shifted by 1 text line to draw below ticklabels instead of on
+        // top of them, whereas for top/left axes, the first line would already be correctly drawn
+        // before the ticklabels, but we need an offset for all subsequent lines.
+        if(ax.side === 'bottom' || ax.side === 'right') {
+            titleStandoff = ax._depth + ax.title.standoff + fontSize * CAP_SHIFT;
+        } else if(ax.side === 'top' || ax.side === 'left') {
+            titleStandoff = ax._depth + ax.title.standoff + fontSize * (extraLines * LINE_SPACING);
+        }
     } else {
         var isInside = insideTicklabelposition(ax);
 

test/image/mocks/zz-axis_title_standoff0.json

@@ -0,0 +1,155 @@
+{
+    "data": [
+        {
+            "mode": "markers",
+            "x": [
+                100,
+                200,
+                300,
+                400,
+                500
+            ],
+            "y": [
+                200,
+                300,
+                400,
+                500,
+                600
+            ],
+            "type": "scatter"
+        },
+        {
+            "mode": "markers",
+            "x": [
+                100,
+                200,
+                300,
+                400,
+                500
+            ],
+            "y": [
+                200,
+                300,
+                400,
+                500,
+                600
+            ],
+            "type": "scatter",
+            "xaxis": "x2",
+            "yaxis": "y2"
+        },
+        {
+            "mode": "markers",
+            "x": [
+                100,
+                200,
+                300,
+                400,
+                500
+            ],
+            "y": [
+                200,
+                300,
+                400,
+                500,
+                600
+            ],
+            "type": "scatter",
+            "xaxis": "x3",
+            "yaxis": "y3"
+        },
+        {
+            "mode": "markers",
+            "x": [
+                100,
+                200,
+                300,
+                400,
+                500
+            ],
+            "y": [
+                200,
+                300,
+                400,
+                500,
+                600
+            ],
+            "type": "scatter",
+            "xaxis": "x4",
+            "yaxis": "y4"
+        }
+    ],
+    "layout": {
+        "width": 800,
+        "legend": {
+            "visible": false
+        },
+        "grid": {
+            "rows": 2,
+            "columns": 2,
+            "pattern": "independent",
+            "xgap": 0.4
+        },
+        "xaxis": {
+            "title": {
+                "text": "______xaxis______",
+                "standoff": 0
+            },
+            "side": "top",
+            "automargin": true
+        },
+        "xaxis3": {
+            "title": {
+                "text": "¯¯¯¯¯¯xaxis3¯¯¯¯¯¯",
+                "standoff": 0
+            },
+            "automargin": true
+        },
+        "yaxis": {
+            "title": {
+                "text": "______yaxis______",
+                "standoff": 0
+            },
+            "automargin": true
+        },
+        "yaxis3": {
+            "title": {
+                "text": "¯¯¯¯¯¯yaxis3¯¯¯¯¯¯",
+                "standoff": 0
+            },
+            "side": "right",
+            "automargin": true
+        },
+        "xaxis2": {
+            "title": {
+                "text": "xaxis2<br>some<br>more<br>______text______",
+                "standoff": 0
+            },
+            "side": "top",
+            "automargin": true
+        },
+        "xaxis4": {
+            "title": {
+                "text": "¯¯¯¯¯¯xaxis4¯¯¯¯¯¯<br>some<br>more<br>text",
+                "standoff": 0
+            },
+            "side": "bottom",
+            "automargin": true
+        },
+        "yaxis2": {
+            "title": {
+                "text": "¯¯¯¯¯¯yaxis2¯¯¯¯¯¯<br>some<br>more<br>text",
+                "standoff": 0
+            },
+            "side": "right",
+            "automargin": true
+        },
+        "yaxis4": {
+            "title": {
+                "text": "yaxis4<br>some<br>more<br>______text______",
+                "standoff": 0
+            },
+            "automargin": true
+        }
+    }
+}