2e:null 2f:["$","title",null,{"children":"slideshow: Advanced slide styling | Jo Wood | Observable"}] 34:T520,const titleSlide = async () => md` # My presentation ## My name _My title_
_My institution_

xxx@xxx.xxx

@xxxx.bsky.social `; const plotSlide = () => [ Plot.plot({ width, height: width / 1.618, color: {legend: true}, marks: [ Plot.dot(penguins, { x: "body_mass_g", y: "flipper_length_mm", fill: "species" }) ] }), html`

Gentoo and Adelie penguins show quite distinct morphologies. Chinstrap penguins show overlap with both species, making them difficult to identify by morphology alone.

` ]; const gentooUrl = await gentoo.url(); const imageSlide = () => [ html`

`, ]; const imageTextSlide = () => [ html`

`, html`

Gentoo penguins are identifiable by their distinctive white stripe across the top of the head. They are larger than most species in similar environments (only King and Emperor penguins are larger).

` ];35:[{"id":"7356e6a9cfe3e3a2cb967789e9471d45e11f070ef5e30543508d110be8744d41c7158f6aed231be003f603a5dfa6f76eb1173d3c948d6d3343d363ad444d111a","href":"https://static.observableusercontent.com/files/7356e6a9cfe3e3a2cb967789e9471d45e11f070ef5e30543508d110be8744d41c7158f6aed231be003f603a5dfa6f76eb1173d3c948d6d3343d363ad444d111a","name":"gentoo.jpg","type":"image/jpeg","lastModified":1789571313000,"size":120649},{"id":"f195934da25ca1d5c10a12eb51b9444eb45300358a9e4fc69b1265f29276bafa70ed16000ab9dc5908306dd146f2ac8d942a32ce7269be44d192af85fd69393f","href":"https://static.observableusercontent.com/files/f195934da25ca1d5c10a12eb51b9444eb45300358a9e4fc69b1265f29276bafa70ed16000ab9dc5908306dd146f2ac8d942a32ce7269be44d192af85fd69393f","name":"emailSmall.png","type":"image/png","lastModified":1789629940000,"size":21364},{"id":"ce0145fde0daadecb711be91d0c962301c3a026e185e41de24b8947a3eaee52dfd6593eb7cb6352566c06fce9ca692d8e39a0c5716ea53dfa2bd2eb90e4169ec","href":"https://static.observableusercontent.com/files/ce0145fde0daadecb711be91d0c962301c3a026e185e41de24b8947a3eaee52dfd6593eb7cb6352566c06fce9ca692d8e39a0c5716ea53dfa2bd2eb90e4169ec","name":"bluesky.png","type":"image/png","lastModified":1789629933000,"size":6197}] 32:{"id":"d6d41be94f854d10","slug":"advanced-slide-styling","title":"slideshow: Advanced slide styling","thumbnail":"3b1362f23783970f568817ac7fc032c11b79b4d5b902252148d1a6fa838dbe59","access_level":"public","create_time":"$D2026-09-17T06:00:29.790Z","update_time":"$D2026-09-21T07:01:09.726Z","view_time":null,"first_public_time":"$D2026-09-21T08:03:15.633Z","has_unpublished_edits":null,"fork":{"id":"1c5574f3e0e8ad17","slug":"basic-slide-styling","title":"slideshow: Basic slide styling","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":752,"publish_version":752,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e02897f1b4db0237","slug":"slideshows","title":"slideshows","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"slideshow: Advanced slide styling","cells":[{"id":1,"value":"# slideshow: Advanced slide styling\n\n1. [Introducing slideshow](https://observablehq.com/@jwolondon/observable-embedded-slideshow)\n1. [Using built-in slide layouts](https://observablehq.com/@jwolondon/using-built-in-slide-settings)\n1. [Basic slide styling](https://observablehq.com/@jwolondon/basic-slide-styling)\n1. **Advanced slide styling**\n1. [Interactive slides](https://observablehq.com/@jwolondon/interactive-slides)\n1. [Example: Visualising Electoral Bias](https://observablehq.com/@jwolondon/ldw-visualising-electoral-bias)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"For precise control over the appearance of slide content, we can provide further style specifications to the slide deck. This is achieved by scoping additional CSS rules beneath `.observable-deck`. For example, we might wish to allow inline icon images:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Using these classes in the slide content allows us to place small icons inline with text:\n\n```javascript\nconst slide1 = async () => md`\n# My presentation\n\n## My name\n_My title_
\n_My institution_\n\n

xxx@xxx.xxx\n\n
\n

@xxxx.bsky.social\n\n`;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Here's another example where we set the text accompanying the Plot output to use a smaller italic font to fit in a 4:1 two-column layout. With the style specified, the new `annotation` class can be reused in any slide for consistent visual appearance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"This could be referenced in the slide content as follows:\n\n```js\nconst plotSlide = () => [\n Plot.plot({ /* Plot specification here... */ }),\n html`

Gentoo and Adelie penguins show quite distinct morphologies.\n Chinstrap penguins show overlap with both species, making them difficult to identify by morphology alone.

`\n];\n\nslide.columns(plotSlide, {ratios: [4, 1]})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"For more sophisticated control over the position and appearance of slide elements, we can use the full flexibility of CSS. The first rule below makes the slide content area a positioning container. An image and text can then be positioned relative to that area.\n\nFor example, here's a style to allow a shadowed text box to overlay an image:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"This can then be used to construct a slide that displays a positioned image and an overlaid text box:\n\n```javascript\nconst imageTextSlide = () => [\n html` $\"Gentoo$ `,\n html`

Some text content to appear in the callout here.

`\n];\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"Combining built-in slide layouts, slideshow-wide CSS settings and slide-specific CSS gives you control over any Observable content that can be rendered as a DOM node. The example below combines the techniques described on this and the preceding pages to give a styled presentation and a staged text reveal over an image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"slideshow(\n [\n slide.central(titleSlide),\n slide.columns(plotSlide, {ratios: [4, 1]}),\n slide.left(imageSlide, {contentClassName: \"image-text\"}),\n slide.left(imageTextSlide, {contentClassName: \"image-text\"})\n ],\n {\n invalidation,\n display\n }\n)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"[Interactive slides](https://observablehq.com/@jwolondon/interactive-slides)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"_For slideshow function, and basic styling:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {\n slideshow,\n slide\n} from \"observable:@jwolondon/observable-embedded-slideshow\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"_Example slides and content:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {gentoo} from \"observable:@jwolondon/using-built-in-slide-settings\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"_For this notebook's style including the Lexend font used in the final slideshow example:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2","titling":"auto"}} 33:"$32:body"