diff --git a/draftlogs/6758_fix.md b/draftlogs/6758_fix.md new file mode 100644 index 00000000000..9297a4973da --- /dev/null +++ b/draftlogs/6758_fix.md @@ -0,0 +1 @@ + - Fix handling multi-line text in title `automargin` [[#6758](https://github.com/plotly/plotly.js/pull/6758)] diff --git a/src/plot_api/subroutines.js b/src/plot_api/subroutines.js index 1386e1e8ab1..487decf74f9 100644 --- a/src/plot_api/subroutines.js +++ b/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); + }); + } } } }; diff --git a/test/image/baselines/automargin-title-paper-multiline.png b/test/image/baselines/automargin-title-paper-multiline.png index a83a9e493b5..94b0a4a6971 100644 Binary files a/test/image/baselines/automargin-title-paper-multiline.png and b/test/image/baselines/automargin-title-paper-multiline.png differ diff --git a/test/image/baselines/zzz-automargin-title-paper-multiline-bottom.png b/test/image/baselines/zzz-automargin-title-paper-multiline-bottom.png new file mode 100644 index 00000000000..3f0fea847aa Binary files /dev/null and b/test/image/baselines/zzz-automargin-title-paper-multiline-bottom.png differ diff --git a/test/image/mocks/zzz-automargin-title-paper-multiline-bottom.json b/test/image/mocks/zzz-automargin-title-paper-multiline-bottom.json new file mode 100644 index 00000000000..30b12cb505f --- /dev/null +++ b/test/image/mocks/zzz-automargin-title-paper-multiline-bottom.json @@ -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
Multi-line", + "pad": {"t": 15, "b": 10}, + "yref": "paper", + "y": 0 + } + } +}