How to Align Reveal.Js Slides to The Top of The Page

Can I align reveal.js slides to the top of the page?

To move your slides to the top is just a configuration option of reveal.js.

Reveal.initialize({
    center: false
}

I haven't figured it out how to move them to the left though.

Horizontal alignment can be done from CSS:

.reveal .slides { margin: 0; }

How to change the position of the whole text (title, headers and body) in reveal.js to top left?

I believe you have your YAML header setup incorrectly if you are not getting the expected behaviour.

---
output:
  revealjs::revealjs_presentation:
    center: true
---

The center: true entry is for vertical positioning according to the reveal.js configuration (link).

// Vertical centering of slides

center: true

How can I get left-justified paragraphs in reveal.js?

Solution

You can change how the slides appear by adding some custom CSS to your presentation. E.g., add

<style type="text/css">
p { text-align: left; }
</style>

to left align all paragraphs.

More Examples

You only asked about left-aligned paragraphs, but here are some more complicated examples, in case someone finds them useful:

• Restyle the title part of non-title slides:

  <style type="text/css">
  .reveal .slide h1 { font-size: 200%; text-decoration: underline; }
  </style>
  

• Restyle the title part of the title slide:

  <style type="text/css">
  .reveal .slides .title {
    /* Ugly ... */
    text-shadow: 0px 0px 25px rgb(100,256,0); 
    font-size: 300%;
  }
  </style>
  

The reveal.js default CSS files are complicated, e.g. reveal.css, but I've had good luck with just looking at the generated HTML to figure out what my CSS should target.

Pandoc

All this still works if you're generating reveal.js slides from markdown using Pandoc, which I highly recommend. In that case, put the <style> block in a file and tell Pandoc to insert it with pandoc --include-in-header=<file with <style> block> ....

Adjust positioning and font color of Title and Tabsets on revealjs slides

If you use ## Format tabsets instead of # Format Tabsets, "Format Tabsets" will be rendered as an h2 header and in Quarto revealjs presentation h2 header is placed in the top-left side by default. Even though, if you want to align it to the right side, just specify the CSS style rule for .reveal h2 selector.

---
format:
  revealjs:
    controls: true
    navigation-mode: vertical
    self-contained: true
    css: tabset_style.css
---

## Format Tabsets 

:::: {.column-screen}
::: panel-tabset

### Tab A 

-   How do I move the Title and tabsets to upper left or upper right corner

-   format the title font as green and the font on the as red

### Tab B
-    Tab B

:::
::::

tabset_style.css

.panel-tabset-tabby a {
  color: red;
}

.reveal h2 {
  text-align: right;
}

---

---

reduce empty space at the top of presentation

Reveal keeps the aspect ratio of the resolution you entered in the config.

If you want your slides to have less padding, there are multiple ways:

---

disable centering:

 center: true, // add this in init or config

slides get positioned at the top of the page, and all the padding happens at the bottom

---

use a 4:3 format for your slides

width: 1024, // add this in init or config
height: 768,

this will move all padding to sides of the page (well, assuming the browser window is not resized) as long as the page ratio is wider than 4:3

---

create fully responsive slides:

var resizeSlide = function() {
   Reveal.configure({
     width: window.innerWidth,
     height: window.innerHeight
   });
}

setInterval(resizeSlide, 1000);

you will then need to make your slides responsive to changes in slide format, but this will make them utilize the full page for the presentation.
I'm using setInterval and not onResize because onResize just don't work on mobile and some browser/os combination (i.e. chrome on windows 8.1 when using keyboard shortcut and desktop hotspots to resize the window)

reveal.js title slide override

Just use a class to namespace your title slide

<section class="title-slide">
    <h1>Title</h1>
</section>

and style it with a higher specificity than the other slides

h1 {
    text-align: left;
}

.title-slide h1 {
    text-align: center;
}

This should address your second question as well without having to trigger anything dynamically.

---

Related Topics