Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Title and subtitle support #423

Closed
wants to merge 1 commit into from

Conversation

martgnz
Copy link
Contributor

@martgnz martgnz commented May 30, 2021

Adding tentative HTML title and subtitle support (live example https://observablehq.com/d/90ecbc9920d7456e). A SVG approach would be better for chart portability (e.g. exporting to Illustrator) but it would mean implementing text wrapping and some lookups for text positioning that could be potentially troublesome.

For titles, we add a h1 element, and for subtitles a h2. We wrap everything in a figure tag, extending the support for captions.

I wonder how minimal we want to go with the styling and which elements we'd want to use. A h1 and h2 make sense for an isolated element but it might be too much for a chart that will be inside a document.

imagen

Closes #92.

@Fil
Copy link
Contributor

Fil commented May 30, 2021

I think the use of figcaption to describe the sources is incorrect, per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption:

[The] Figure Caption element represents a caption or legend describing the rest of the contents of its parent <figure> element.

We'd also need to place signature and sources (or maybe only sources), in a semantically correct way.

@CatChenal
Copy link

The proposed solution is a great improvement, but as @martgnz noted, fixing the style to h1 and h2 is very limiting.
Perhaps adding a "header channel" with a list for header-part-name: {part-text, part-style} would work better?

plot.plot({
  header: [ title: {"This is a title in Observable plot", "h3"},  
            subtitle: { "Relative frequency of letters in the English language", "h4"}
            ],
  marks: [plot.barY(data, { y: "frequency", x: "letter", fill: "steelblue" })]
})

Note: I am a newbie in both javascript and Observable notebooks, but going through the Observable Overview tutorial, I came to the lack of title problem when I wanted to indicate which country the data was filtered for in the plot title so that if I wanted to download a picture of that specific plot, the information would not be lost.
I did try this:

label: "price_in_usd: " + country

... but that's really not a title (& neither is a caption)!

@Fil
Copy link
Contributor

Fil commented Aug 15, 2023

superseded by #1761
Thank you for the contribution!

@Fil Fil closed this Aug 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Plot title (and signature, sources).
3 participants