Merge pull request #6758 from plotly/automargin-multi-line-title

handle multi-line text in title automargin

Author: archmoj

draftlogs/6758_fix.md

@@ -0,0 +1 @@
+ - Fix handling multi-line text in title `automargin` [[#6758](https://github.com/plotly/plotly.js/pull/6758)]

src/plot_api/subroutines.js

@@ -430,6 +430,19 @@ exports.drawMainTitle = function(gd) {
                 'text-anchor': textAnchor,
                 dy: getMainTitleDyAdj(title.yanchor)
             }).call(svgTextUtils.positionText, x, y);
+
+            var extraLines = (title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
+            if(extraLines) {
+                var delta = alignmentConstants.LINE_SPACING * extraLines + alignmentConstants.MID_SHIFT;
+                if(title.y === 0) {
+                    delta = -delta;
+                }
+
+                titleObj.selectAll('.line').each(function() {
+                    var newDy = +(this.getAttribute('dy')).slice(0, -2) - delta + 'em';
+                    this.setAttribute('dy', newDy);
+                });
+            }
         }
     }
 };

test/image/baselines/automargin-title-paper-multiline.png

@@ -0,0 +1,29 @@
+{
+    "data": [
+        {
+            "showlegend": false,
+            "type": "scatter",
+            "x": [
+            1,
+            2,
+            3
+            ],
+            "y": [
+            4,
+            5,
+            6
+            ]
+        }],
+    "layout": {
+        "height": 300,
+        "width": 400,
+        "margin": {"t":0, "b": 0, "l": 0, "r": 0},
+        "title": {
+            "automargin": true, 
+            "text": "Paper<br>Multi-line",
+            "pad": {"t": 15, "b": 10},
+            "yref": "paper",
+            "y": 0
+        }
+  }
+}