How to align content in quarto reveal.js presentations

[sbihorel]

Description

Hi,

Is it possible to control the horizontal alignment of text in Reveal.js slides (ideally using css)? Is it possible to control the position of a markdown, kable, or flextable table (I am specifically referring to the horizontal position of the table in the slide rather than the alignment of text within the table cells themselves) ?

Thanks in advance for your advice

---
title: "Test"
format:
  reveal.js
---

# A slide

Text which should be left-aligned

Text which should be right-aligned

Text which should be centered

Text which should be justified

| FOO | BAR |
|:---:|:---:|
| 1 | 2 |
| 3 | 4 |

[mcanouil]

Yes, that's possible, the best course of action is to use your favourite browser inspect / developer mode to look at the selector to use for your (S)CSS rule.
Then apply that rule using theme option (SCSS) or using include-*.

See:

• https://quarto.org/docs/presentations/revealjs/themes.html
• https://quarto.org/docs/output-formats/html-basics.html#includes

[sbihorel]

Thanks

Hi

Thanks for your response. I read these documents. While they provide some information about using custom html and css in revealjs presentations, they don't specifically address the issues of content alignment.
I've tried the following code creating a custom.scss file along my .qmd file. The css classes don't seem to modify the text alignment.

Would you be able to provide some specific guidance on this topic?

/*-- scss:defaults --*/
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.justified {
  text-align: justifed;
}

---
title: "Test"
format:
  revealjs:
    theme: [default, custom.scss]
---

# A slide

Text which should be left-aligned

[Text which should be right-aligned]{.right}

[Text which should be centered]{.center}

[Text which should be justified]{.justified}

| FOO | BAR |
|:---:|:---:|
| 1 | 2 |
| 3 | 4 |

[mcanouil]

Unfortunately, Quarto documentation cannot teach about the internals of Reveal.js or teach about CSS.
You need to learn how HTML/CSS work and use your favourite browser tools to learn the structure of the elements you wish to customise, such as rule specificity.
There are no shortcuts or magical solution.

See:

• https://www.w3schools.com/cssref/css3_pr_align-items.php
• https://www.w3schools.com/cssref/css3_pr_align-content.php
• ...

Anyone that would provide you with the exact (S)CSS rule would have gone through this process.

[mcanouil]

If you look at the content using your favourite browser you can see the spans with your classes are inside a paragraph.
text-align controls how inline content is distributed within a block container's available width (paragraph here).
A <span> is display: inline by default.
It shrinks to exactly fit its text, leaving zero spare horizontal space.
Setting text-align: right on it has no visible effect because there is nowhere to shift the text to.

Adding display: block makes the span expand to the full width of its parent.
The text now has surplus space around it, and text-align can position it accordingly.

Property	Inline <span>	Block <span>
Width	Shrinks to fit content.	Expands to fill parent.
Surplus space	None.	All remaining parent width.
text-align effect	Nothing visible.	Text shifts left, right, or centre.

---
title: "Test"
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
          .right,
          .center,
          .justified {
            display: block;
          }
          .right {
            text-align: right;
          }
          .center {
            text-align: center;
          }
          .justified {
            text-align: justify;
          }
          </style>

---

## A slide

Text which should be left-aligned

[Text which should be right-aligned]{.right}

[Text which should be centered]{.center}

[Text which should be justified]{.justified}

| FOO | BAR |
|:---:|:---:|
| 1 | 2 |
| 3 | 4 |

[sbihorel]

Great ! Thanks a lot for pointing out the display property. This does the trick for text.

I've spent a couple of days toying with the inspector mode and editing my css file. Before I posted my questions here, I had hoped to find some posts on the topic on stackoverflow or the Posit forum without much success I must admit. I guess that reflects on how little I know about css and html... Much to learn

I'll try to play around with table positioning. It seems that every table creation platform creates its own class... so it's going to be fun.

Thanks again