Support simple subtitle parameter (like title)

[mjainGH]

Image from Figma mock by @TonyBurbs :

[TonyBurbs]

Here is a link to figma for the lowest touch effort:
https://www.figma.com/design/tp9E4awumSOuCG1ZNev09z/Plotly.js-Design-System?node-id=21676%3A325474&t=aE2dNlExZS4pbsNs-1
It's adding in the subtitle and citation without any other major design changes

[emilykl]

API for subtitle

• Same API as title
• Add a subtitle property directly under layout with the same properties as title

---

Structure:

• layout
  • subtitle
    • text: str
    • font: standard font options

@archmoj API-wise this seems pretty straightforward -- do you have any thoughts or suggestions?

[archmoj]

I think it should go inside layout.title object instead of layout.
It reminds of when we added minor ticks in #6166.

That would also allow adding multiple titles and subtitles later on.

[archmoj]

Also it would be nice (and possibly easy) to have the subtitle option available on the cartesian axes and other places too.

[archmoj]

For a quick prototype, perhaps you could add the subtitle text to the end of title.text with a <br> and style it differently.

[alexcjohnson]

I think it should go inside layout.title object instead of layout. It reminds of when we added minor ticks in #6166.

That would also allow adding multiple titles and subtitles later on.

I think that’s right. Also makes it clear that it inherits positioning from the title (presumably with optional overrides to at least the spacing relative to the main title) and it can inherit the main title font (but smaller, and remove bold if you bolder the main font?)

[emilykl]

@archmoj @alexcjohnson Makes sense -- do you mean something like the below?

• layout
  • title
    • subtitle
      • text
      • font

[archmoj]

@archmoj @alexcjohnson Makes sense -- do you mean something like the below?

-layout

• title

  • subtitle

    • text
    • font

Yes. Let's start with just that. Perhaps we rename subtitle to sub later.

[emilykl]

As suggested by @archmoj : A simple working prototype which uses HTML tags to simulate a subtitle:

https://codepen.io/emilykl-code/pen/MWdKYmr

[archmoj]

One may wants to add an attribute e.g. spacing (in pixel?) to help increase the space between the title and subtitle.
But I am not sure where it should go in the API i.e. title.spacing or title.subtitle.spacing?