Legend Not Showing in Print Mode While Notebook is Embedded

[mcollie1]

Although a legends appears in print mode while viewing from the Notebook directly, the legend colors are missing when the notebook is embedded.

Browser: Chrome

[harshagarwalnyu]

This is a CSS specificity issue in embedded notebooks. Plot renders its color legend as <svg> or <div> swatches. When embedded, the host page's print stylesheet or Observable's own print-mode CSS can collapse display: inline-flex elements to zero width, hiding the colored swatches while keeping the text.

Workaround — force legend colors in print CSS:

@media print {
  /* Target Plot's swatch elements */
  .observablehq svg [fill],
  .observablehq [style*="background"] {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

Root cause: Browsers default print-color-adjust to economy, which strips background colors and some SVG fills to save ink. Plot's legend swatches use either background-color (HTML swatch) or fill (SVG swatch) — both get stripped.

Chrome-specific: Chrome requires -webkit-print-color-adjust: exact in addition to the standard property. Setting it on the iframe's container element usually propagates into the shadow DOM.

If you control the embedding page, adding the above CSS to the host stylesheet is the most reliable fix.