HTML Slides with notes

Post by chrismorgan » Sat, Nov 08, 2025, 4:22 PM UTC

econ wrote: post #37

chrismorgan wrote: post #6

(i = slide.nextElementSibling)?.className == "slidenote" ? i : slide ]), An alternative approach: slide.querySelector(":scope+.slidenote") ?? slide (|| would work just as well as ??, but ?? feels more appropriate.)

You could also make the notes mandatory.

  Notes:
   Hide
   Inline
   Only

  
      Slide

      
          Notes
      
  

  
      section {
          position: relative;
      }

      aside {
          background: #feb;
          padding: 1em;

          body:has(#notes-only:checked) & {
              position: absolute;
              inset: 0;
          }

          body:has(#notes-inline:checked) & {
              margin-top: auto; /* concept: if the slide uses flex, notes can try sticking to the bottom */
          }

          body:has(#notes-hide:checked) & {
              display: none;
          }
      }
  

Post by econ » Sat, Nov 08, 2025, 11:04 PM UTC

chrismorgan wrote: post #42

econ wrote: post #37

Earlier quoted context omitted.

You could also make the notes mandatory.

Or put the notes inside the slide, and then CSS is enough, the JavaScript doesn’t even need to know about notes: Notes: Hide Inline Only Slide Notes section { position: relative; } aside { background: #feb; padding: 1em; body:has(#notes-only:checked) & { position: absolute; inset: 0; } body:has(#notes-inline:checked) & { margin-top: auto; /* concept: if the slide uses flex, notes can try sticking to the bottom */ } b…

    
    document.write(`
    
    .${location.search.replace(/\W/g, '')}{
      display:none
    }
    
    `)
    

Post by cachius » Mon, Nov 10, 2025, 3:27 PM UTC

jy14898 wrote: post #21

cachius wrote: post #20

I find the notes mode confusing. You can't tell if you're viewing a note or a slide. Why would you use it? In PowerPoint the point of notes is to have an aside view for the presenter for extra info. Here all is revealed to the viewer.

Open the page in two windows, with one that has note mode enabled