Multi-line titles don't respond to title.yanchor

[hannahker]

When creating a multi-line title, eg. with <br> tags, the positioning doesn't seem to respect the title.yanchor parameter. See the example below where I would expect the full title to be positioned above the plot area. The title also stays in the same place when I change title.yanchor to top or middle.

CodePen: https://codepen.io/hannahker/pen/gOjyLEY

[archmoj]

Looks like a bug to me. @alexcjohnson what do you think?

[hannahker]

It looks like this is due to errors in how the dy property of the SVG text is set (which is controlled from the API via yanchor). This function sets the dy for the .gtitle element, but text for multi-line titles is broken into tspan elements. It's looking like the children tspan elements don't have the dy set appropriately and I'm not sure where these values are coming from.

[avm19]

This bug still persists and the issue must be re-opened. @archmoj, @hannahker
Checked for Plotly.version "2.33.0".

Changing yanchor: "bottom" to yanchor: "top" in the code below has no effect.

Most importantly, from my perspective of a plotly.py user, there is no convenient way of "resting" a multi-line title precisely on top of the paper. One should keep guessing padding in pixels or percent, and then do over when a font size or height change. This is why this issue matters.

If I understand the semantics correctly, yanchor: "bottom" must line up the bottom of the bottom line with the position, and yanchor: "top" must line up the top of the top line.

JS code based on [Hannah's Codepen example](https://codepen.io/hannahker/pen/gOjyLEY)

Plotly.newPlot("div1", {
  data: [
    {
      showlegend: false,
      type: "scatter",
      x: [1, 2, 3],
      y: [4, 5, 6]
    }
  ],
  layout: {
    width: 300,
    height: 200,
    paper_bgcolor: "LightSteelBlue",
    margin: { t: 40, b: 0, l: 0, r: 0 },
    yaxis: {
      automargin: true,
      title: { text: "Y-axis" }
    },
    xaxis: { automargin: true, title: { text: "X-axis" } },
    title: {
      text: "ELELELE<br>ELEELELEL<br>ELELELEL",
      font: { size: 12 },
      yref: "paper",
      y: "1",
      yanchor: "bottom",
      pad: {b: 0}
    }
  }
});