Speaking notes with horizontal page scroll (purely with CSS!)

Share & showcase
1

I use Obsidian to prepare teaching material each week, and I’ve REALLY wanted a way to use Obsidian for my speaking notes as well. In particular, I’ve wanted page scrolling: the ability to swipe right or left on my screen and get to the next whole page of notes. (Public speakers know that incremental vertical scrolling can really mess up your sense of where you are on the page, which throws you off as you look up and down.)

Up until now, there hasn’t been a great option. There is an (unmaintained) plugin for page scrolling that doesn’t work. Slides/Advanced Slides destroys formatting and works poorly with large text blocks.

So, my process has required copying my final text from Obsidian into Pages where I set up my speaking notes (with a custom page size that matches my iPad screen, adjusting pagination so paragraphs aren’t broken up) and then exporting to a PDF, which I send back to the iPad and use in Goodnotes. It works, but it’s a lot of extra steps and I’ve tried a few times to find a better solution.

Today I took a gander with ChatGPT and was able to work out a solution using only a CSS snippet. This snippet takes effect when reading mode is enabled, and:

  1. Turns your entire document into columns that are the exact size of your tablet screen

  2. Enables a snappy page scroll in between each column

  3. Lets you set a custom font size, line spacing, paragraph spacing, and page margins (which are designated in the comments below)

  4. Doesn’t break up paragraphs

  5. Only takes effect on a tablet screen, not a phone (although you can change that by adjusting min-width).

Basically, it’s a one-button “speaking notes mode,” and I couldn’t be more happy. Here’s the CSS snippet, which you can leave enabled all the time, unless you want to use reading mode on the tablet for other purposes.

/* iPad paged reading view */
@media (min-width: 700px) {
  
  body.is-mobile .view-content {
    height: 100vh !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-behavior: smooth;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  body.is-mobile .markdown-preview-view {
    height: 100% !important;
    overflow: visible !important;     
    line-height: 1.6;                 /* set your line height here */
    font-size: 20pt !important;       /* set your font size here */
  }

  body.is-mobile .markdown-preview-view p {
    margin-top: 1.75em;               /* set paragraph spacing (top) here */
    margin-bottom: 1.75em;            /* set paragraph spacing (bottom) here */
  }
  
  body.is-mobile .markdown-preview-view .markdown-preview-sizer {
    height: 100% !important;
    box-sizing: border-box;
    column-width: 100vw;
    column-fill: auto;
    column-gap: 60px;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 0 !important;   
  }

  body.is-mobile .markdown-preview-view .markdown-preview-sizer > * {
    scroll-snap-align: start;
    break-inside: avoid;
    padding-left: 30px !important;      /* set your left margin here */
    padding-right: 0px !important;      /* set your right margin here */
    box-sizing: border-box !important;
  }
}
2 Likes