Controlling size of embeds - excess whitespace?

New To Observable
1

So I have my first little experimental project to see what fun can be had with this Observable thing.
(Snapshot of work-in-progress taken for the purposes of this query in the notebook ECV Connections - SNAPSHOT FOR EMBED PUZZLE / Tim Day | Observable )

(Oh, it seems I’m a bit limited by “new users can only include 2URLs”… )

I want to embed the “chords” cell (about the 7th one down, the 512x512 with the radial chords diagram in it… it responds to mouseovers to highlight links between the labels).

If I embed just that cell, the Embed menu gives me a URL with a ?cells=chords parameter which when viewed looks fine and dandy… except that some styling is missing.

The desired styling is in an html cell called “styling”, and if I include that in the embed too (selecting the checkbox for it in the embed dialog) the URL becomes
https://observablehq.com/embed/7da8aec10e86020e?cells=styling%2Cchords
then the styling is as expected (it specifies use of a font in the attached .woff2 file). Nice!

However… including the styling cell seems to add a significant amount of whitespace above the canvas… the full iframe code suggested includes height="631" (quite a bit more than the 512 pixel canvas), and if I reduce that height parameter I get a scrollbar down the side of the iframe, which isn’t what’s wanted.

I’m curious what the “observable way” to approach this is? ie how should I get the styling to influence the embed, but without the styling cell taking up any vertical space. Or is there something I can do to get the styling cell’s influence pulled in without me explicitly including it in the embed? (It should just do it because of dependency analysis or something?)

Thanks for any pointers!

1 Like
2

Ah, I think I have a solution.
Instead of putting the desired styling in a

styling=html`<style>...</style>`

I just declare it as a string

styling=`<style>...</style>`

And then chuck that in the header in the main block creating the canvas

chords = {
document.head.innerHTML+=styling;
…

(I think I was also making a mistake trying to put multiple HTML elements - a <link> and a <style> - into a single styling=html… element… the docs make it clear it’s for the creation of single elements. In practice the preloading doesn’t seem to be necessary… I’d just found it useful on standalone pages before to avoid issues with asynchronous font fetching).

2 Likes
3

Snapshot of the fixed version at
ECV Connections - Snapshot 1 / Tim Day | Observable .

An embed of the just the canvas element now seems to be styled as expected (and no vertical whitespace for the styling block).
https://observablehq.com/embed/209049b85a1d6ef2?cells=chords

2 Likes