🏠 back to Observable

Embedded cell loses CSS style

Hi all,

I’m trying to embed cells from this notebook into a Jekyll blog. The embed had styling a few days ago but now it doesn’t. I made changes but unsure what exactly caused it to lose styling. Any ideas?

I tried these and couldn’t fix it:

  • Not wrapping SVG with a div container
  • Not using CSS custom properties
  • Moving <style> above chart output

Would you mind sharing the code you used to embed the notebook?

I’m using the embed code without modifications:

Wrapped in div:

<div id="observablehq-46da78e1"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@rayshan/unicorn-startup-ipo-leader-board.js?v=3";
const inspect = Inspector.into("#observablehq-46da78e1");
(new Runtime).module(define, name => (name === "leaderboard") && inspect());
</script>

SVG-only:

<div id="observablehq-2663ced7"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@rayshan/unicorn-startup-ipo-leader-board.js?v=3";
const inspect = Inspector.into("#observablehq-2663ced7");
(new Runtime).module(define, name => (name === "chart") && inspect());
</script>

So what’s happening here is that the style cell isn’t referenced by your chart and thus isn’t being rendered. Here are two options:

  • Copy the contents of the style cell and include it in your HTML either via a <link rel="stylesheet"> tag in the head (if you save the styles to a separate .css file) or by putting the styles in a <style> tag.
  • Or you can first name the style cell in your notebook e.g.:
myStyles = html`
<style>
/* ...

and then make sure that cell is rendered in your embed code:

<div id="observablehq-2663ced7"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@rayshan/unicorn-startup-ipo-leader-board.js?v=3";
const inspect = Inspector.into("#observablehq-2663ced7");
(new Runtime).module(define, name => (name === "chart" || name === "myStyles") && inspect());
</script>

Hope that helps and welcome to the forums, by the way!

2 Likes

Going with option 2 - named cell, and it works. Thank you and thanks for the welcome too!

It would be good to include your instructions in this notebook (cc @jashkenas).

1 Like

Good idea! I’ve added a note about it to the section on Rendering Cells.

2 Likes