Set one line/word at the top-right corner

[zhengchencai]

Description

Hello,

I am trying to add text at the top-right and left-bottom corners of the slide without any margin. So I created .top-right and .bottom-left in the scss file it worked without setting margins for div and p. It seems that once .reveal div and .reveal p are specified it will overwrite the margin in .top-right and .bottom-left such that these two will start their margin relative to p and div.

How can I make this right?

Also, for ![](https://quarto.org/docs/websites/images/tools.png){.fragment fragment-index=4 fig-align=center width=500px}, adding .r-stretch doesn't work, is there a way to use autostrech for a figure fragment? Changing width=500px is not effective, when increased to 1000px the final figure becomes even smaller than 500px. .r-stretch works very well to fit whatever the available area but not with .fragment

Here is the qmd file. Thanks a lot.

---
title: "Slides template using quarto revealjs"
format: 
  revealjs: 
    title: Slides template using quarto revealjs
    date: 2023-06-06
    author: a
    institute: a
    theme: mytheme.scss
    embed-resources: true
    standalone: true
    transition: none
    progress: true
    controls: false
    width: 1280
    height: 720
    margin: 0
    reference-location: margin
    menu: false
    preview-links: auto
---

## Markdown

Markdown is an easy to read and write text format:

::: {.fragment .fade-in-then-semi-out fragment-index=3}
- It's _plain text_ so works well with version control
:::

::: {.fragment .fade-in-then-semi-out fragment-index=2}
- It can be **rendered** rendered into HTML, PDF and more
:::

::: {.fragment .fade-in-then-semi-out fragment-index=1}
- Learn more at here ^1^
:::

![](https://quarto.org/docs/websites/images/tools.png){.fragment fragment-index=4 fig-align=center width=500px}

::: {.top-right}
Top right
:::

::: {.bottom-left}
Bottom left
:::

Here is my scss rules

/*-- scss:rules --*/

.top-right {
  position: absolute;
  margin: 0 0 0 0;
  top: -4px;
  right: 12px;
  text-align: right;
  font-size: 16px; 
  color: #2CCCD3
}

.bottom-left {
  position: absolute;
  bottom: 6px;
  left: 6px;
  text-align: left;
  font-size: 14px;
  color: #000
}

.reveal p {
  margin-left: 2vw;
  margin-top: 2vh;
}

.reveal h2 {
  margin-left: 2vw;
  margin-top: 2vh;
}

.reveal div {
  margin-left: 2vw;
  margin-top: 2vh;
}

.reveal .progress {
  background: #fff;
  color: #2CCCD3;
  height: 0.5%;
}

.reveal strong, .reveal b {
  font-weight: normal; 
  color: #FF6720 
}

[mcanouil]

::: {.top-right} means a div with class .top-right and inside a p element.

You have to define properly the nested rule.

.reveal div .top-right {
  p {
    margin: 0;
  }
  margin: 0;
  position: absolute;
  top: -4px;
  right: 12px;
  text-align: right;
  font-size: 16px; 
  color: #2CCCD3
}

Regarding the other question, simple use fenced divs as you did for the remaining of your example.

::: {.fragment fragment-index=4 style="text-align: center;"}
![](https://quarto.org/docs/websites/images/tools.png){.r-stretch}
::: 

[zhengchencai]

Thank you very much @mcanouil. It's great to learn this nested rule. It worked. The figure stretch also worked, but when I give a caption in ![] it is not displayed.

[mcanouil]

See https://quarto.org/docs/presentations/revealjs/advanced.html#stretch for "stretch" behaviour.

"it is not displayed" refers to what? I have no issue with having caption.