Verticator

For Reveal.js and Quarto

What does it do?

Verticator shows vertical indicators

On vertical slides only

Themed bullets

If you do not override the colors in the options, Verticator will use your theme colors: the bullets will be the same color as text in your presentation

The theme color is set as a CSS variable (--c-theme-color) in the Reveal element, and can also be used by other elements. On this page, it is rgb(255, 255, 255), because that is also the text color.

Themed bullets

Verticator detects if the slide background is set to a different color. If you do not override the colors in the options, the bullets will still take on the heading- or textcolor of the slide.

On this page, the CSS variable (--c-theme-color) is rgb(34, 34, 34), because that is also the text color.

Verticator is configurable globally through the Reveal options, but the colors can also be changed per slide.

Global options

The options below have user configurable options. In a regular Reveal.js presentation, these can be set through JavaScript, but Quarto makes it configurable through YAML options.

  1. themetag
  2. color
  3. inversecolor
  4. skipuncounted
  5. clickable
  1. position
  2. offset
  3. autogenerate
  4. scale
  5. tooltip

Option 1: themetag

Verticator uses your headings to get the color for the bullets, but you can also use other elements:

format:
  revealjs:
    ...
    verticator:
      themetag: 'p'

Option 2: color

You can override the (themed) color of the bullets to a specific color. You can use named colors, hex and rgb:

format:
  revealjs:
    ...
    verticator:
      color: 'yellow'

Option 3: inversecolor

You can override the (themed) inverse color of the bullets to a specific color. These apply if a slide has an inverse color to the main background of the theme.

format:
  revealjs:
    ...
    verticator:
      inversecolor: 'red'

Option 4: skipuncounted

To omit bullets in certain slides, set a data-attribute data-visibility="uncounted" to the slide. Then set this option (disabled by default, enabled here) to true:

format:
  revealjs:
    ...
    verticator:
      skipuncounted: true

Option 5: clickable

Clicking on a a Verticator bullet jumps to to the corresponding page. This behaviour is enabled by default but can be disabled.

format:
  revealjs:
    ...
    verticator:
      clickable: false

Option 6: position

Verticator is automatically positioned depending on the rtl setting of Reveal.js. This setting is used in languages like Hebrew and Arabic. Verticator will be on the left in that case. It can also be manually positioned like this:

format:
  revealjs:
    ...
    verticator:
      position: 'left' # or 'right'

Option 7: offset

By default, Verticator is positioned 3vmin off the edge of the presentation. It can be set to any other valid CSS size and unit:

format:
  revealjs:
    ...
    verticator:
      offset: '40px'

Option 8: autogenerate

Verticator will autogenerate bullets. In presentations with huge vertical stacks, this can result in an unsightly column of bullets. The user can then disable the autogeneration like this:

format:
  revealjs:
    ...
    verticator:
      autogenerate: false

Option 9: tooltip

Verticator can show tooltips of page titles, like this:

format:
  revealjs:
    ...
    verticator:
      tooltip: 'data-name'

It is turned off by default but can be enabled with these options:

  • tooltip: 'data-name' or any other attribute of the vertical slide.
  • tooltip: 'auto'. This will check titles of each slide in the order: data-verticator-tooltip, data-name, title, and if none found, headings inside each slide in the order: h1, h2, h3, h4.

Option 10: scale

Verticator will scale with the same ratio as the Reveal slides, but only up. To make the Verticator even bigger, you can manually set a scale. It is set to 1 by default, but can be changed like this:

format:
  revealjs:
    ...
    verticator:
      scale: 1.2

Slide options

  1. Force inverse color
  2. Force regular color
  3. Force specific color

Option 1: Force inverse color

Force the bullets to use the inverse color with a data-attribute of data-verticator="inverse", even on slides with unchanged background colors.

Option 2: Force regular color

Force the bullets to use the regular color with a data-attribute of data-verticator="regular", even on slides with inverse background colors.

Option 3: Force specific color

The Verticator color can also be set specifically (per slide) with a data-attribute of data-verticator="*" where the wildcard is a CSS color.

Don’t overdo it

Limit vertical slides. You probably don’t want 30 bullets on the right-hand side of your presentation.

Really

For more demos go to the Verticator plugin for Reveal.js