Show slide boundaries for presentations

[skwde]

Description

I would like see slide boundaries + margin in preview (revealjs presentation), but cannot find an option to view that.
This is useful to easily detect when there is to much stuff on a slide (or if a bullet point or new line still fits onto the existing slide).

I am looking for something similar to the LaTeX package layout or the geometry option showframe.

How to draw a line for slide boundaries? In addition showing the margin can be quite helpful.

[mcanouil]

Reveal.js is HTML thus you can use (S)CSS to target the slide section and add a border rule.
You can use your favourite browser inspect/developer mode to see precisely what to target.

Not tested:

.reveal .slide {
  outline: thick double #B22222;
}

/* or */

.reveal .slide {
  border: thick double #B22222;
}

Note that since it is HTML and elements are resized, you still need to preview your slides on a sufficient screen display size to display the slides at the right size, see https://quarto.org/docs/presentations/revealjs/advanced.html#presentation-size.

[skwde]

Profiles look like exactly what I am looking for.

I have following directory layout

_quarto-debug.yml
debug.css
_test
  - talk.qmd
  - _quarto.yml

with _test/talk.qmd

---
title: "Quarto talk"
---

# test slide

## aabc

adfadsf

and _quarto.yml

date: last-modified
date-format: long
author:
  - name: skw
format:
  revealjs:
    # ## use aspectratio 1610
    width: 1280 # default: 970
    height: 800 # default: 700
    auto-stretch: false
    navigation-mode: vertical
    controls: true
    progress: true
    slide-number: h.v
    toc: true
    toc-depth: 1

then I have

_quarto-debug.yml with content

css: debug.css

and the debug.css with

.reveal .slide {
    outline: thick double #B22222;
}

Now I run

quarto preview _test/talk.qmd --no-browser --port 8030 --profile debug

but it does not show that the css: debug.css is added to the pandoc option after running the preview command.
It works only when moving _quarto-debug.yml and the debug.css into the _test folder.

What do you mean by metadata flag?

[mcanouil]

Would you mind sharing your test setup as a Git repository?

[skwde]

You can find it here: https://github.com/skwde/test-quarto-debug-project

Would you mind also commenting on what you mean by metadata flag?

[mcanouil]

Would you mind also commenting on what you mean by metadata flag?

I meant the --metadata flag.

❯ quarto render --help

Usage:   quarto render [input] [args...]
Version: 99.9.9                         

Description:

  Render files or projects to various document types.

Options:

  -h, --help                          - Show this help.                                                   
  -t, --to                            - Specify output format(s).                                         
  -o, --output                        - Write output to FILE (use '--output -' for stdout).               
  --output-dir                        - Write output to DIR (path is input/project relative)              
  -M, --metadata                      - Metadata value (KEY:VALUE).                                       
  --site-url                          - Override site-url for website or book output                      
  --execute                           - Execute code (--no-execute to skip execution).                    
  -P, --execute-param                 - Execution parameter (KEY:VALUE).                                  
  --execute-params                    - YAML file with execution parameters.                              
  --execute-dir                       - Working directory for code execution.                             
  --execute-daemon                    - Keep Jupyter kernel alive (defaults to 300 seconds).              
  --execute-daemon-restart            - Restart keepalive Jupyter kernel before render.                   
  --execute-debug                     - Show debug output when executing computations.                    
  --use-freezer                       - Force use of frozen computations for an incremental file render.  
  --cache                             - Cache execution output (--no-cache to prevent cache).             
  --cache-refresh                     - Force refresh of execution cache.                                 
  --no-clean                          - Do not clean project output-dir prior to render                   
  --debug                             - Leave intermediate files in place after render.                   
  pandoc-args...                      - Additional pandoc command line arguments.                         
  --log                     <file>    - Path to log file                                                  
  --log-level               <level>   - Log level (info, warning, error, critical)                        
  --log-format              <format>  - Log format (plain, json-stream)                                   
  --quiet                             - Suppress console output.                                          
  --profile                           - Active project profile(s)    

[mcanouil]

Your YAML project config should be at the same level as your profile.
_quarto-debug.yml is the same as _quarto.yml but activated for the "debug" profile.

❯ tree -a -L 1
.
├── _quarto-debug.yml
├── _quarto.yml
├── debug.css
└── talk.qmd