serhii.net

In the middle of the desert you can say anything you want

02 Jul 2024

More quarto reveal presentation notes for lecture slides

References

Misc

Better preview at a specific port, handy for restarting after editing CSS. Similar to quarto project frontmatter preview: port: 4444 browser: false.

quarto preview slides.qmd --port 4444 --no-browser

Supported by default

In frontmatter:

  • logo is in bottom-right+
    • footer-logo-link
  • footer for all slides
    • overwrite with div of class footer
  • Likely relevant for me: Numbering reveajs options for dynamic bits, shift-heading-level-by, number-offset, number-section, number-depth — will touch if I need this.

Headers

In front matter:

  • header: one header text for all presentation
  • title-as-header,subtitle-as-header: if true, place the presentation frontmatter’s title/subtitle as header if one not provided (overwriting the header value)
    • use-case: I same repeating text everywhere w/o specifying it every time.
  • hide-from-titleSlide: all/text/logo to hide it from title slide
  • sc-sb-title: if true, h1/h2 slide titles will appear in the slide header automatically when slide-level is 2 or 3

Divs with classes:

Left/right/center blocks of text in header

Pasted image 20240702194920.png 3

  • If one uses section/subsection titles, they go in the left third and right third of the header, with the normal header text in the middle. This is neat to have in general, w/o the section/subsection titles.
    • sc-title, on the left, is section title
    • sb-title, on the right, is subsection title
  • How do I add arbitrary text there? And what would be a good interface for it?

The right way — extension code

Ugly CSS hack

Since .s[c|b]-title is present always, text added that way will be present on the title slide regardless of settings. … and — adding text to a presentation through CSS is, well, ..

.reveal-header .sc-title {
  background-color: red;

	&::before {
		content: 'sc-title header content';
  }

}

Slightly better ugly hack: main header text split in three, with two aligned l/r correspondingly.

.header-right {
  // text-align: left;
  float: right;
  background-color: pink;
  display: inline-block;
}

.header-left {
  // text-align: left;
  float: left;
  background-color: yellow;
  display: inline-block;
}
::: header 
[left]{.header-left} and not left [and right]{.header-right}
:::

Result: Pasted image 20240702193154.png

Extended ugly SCSS hack

Improved the above to support both footer and headers I have a hammer and everything is a nail SCSS can do mixins let’s use them

// L/R margins of the footer — if logo is wider than this, it may overlap right footer text.
// By default, logo max-height is 2.2em, width auto based on this.
$footer-margin: 5em;

// left or right column bits
%hfcol {
  display: inline-block;
}


/* L/R columns in header */
.reveal .reveal-header .rightcol {
  @extend %hfcol;
  float: right;
}

.reveal .reveal-header .leftcol {
  @extend %hfcol;
  float: left;
}

/* L/R columns in footer */
.reveal .footer .leftcol {
  @extend %hfcol;
  float: left;
  margin-left: $footer-margin;
}

.reveal .footer .rightcol {
  @extend %hfcol;
  float: right;
  margin-right: $footer-margin;
}

Usage:

## I am a slide  with custom headers

And With content 

::: footer 
[Left footer]{.leftcol} Center footer [Right footer]{.rightcol}
:::

::: header 
[Left header]{.leftcol} Center header [Right header]{.rightcol}
:::

Frontmatter usage works only for footer, likely header doesn’t support markup.

    footer: "Center footer [right]{.rightcol} [left]{.leftcol}"  # CHANGEME

Result: Pasted image 20240702205342.png

PROBLEMS:

  • asymmetrical if only one of the two is present. Likely fixable, but I don’t want to force any center div.

Footers through qmd cols

This works almost perfectly, including missing values:

::: footer 

::: {.columns}
:::: {.column width="20%"}
left
::::
:::: {.column width="50%"}
Center footer
::::
:::: {.column width="20%"}
right
::::
:::

:::

It even works inside frontmatter as multiline string (not that it’s a good idea):

    footer: | 
      ::: {.columns}
      :::: {.column width="20%"}
      left
      ::::
      :::: {.column width="50%"}
      FB5 – Informatik und Sprachen: Deep Learning (MDS)
      ::::
      :::: {.column width="20%"}

      ::::
      :::

This removes the margin placing it exactly in the same place as a normal footer:

.reveal .footer p {
  margin: 0 !important;
}

(but headers don’t work)

What is a good interface?

A filter that parses frontmatter and puts things in the correct places.

Nel mezzo del deserto posso dire tutto quello che voglio.