Search code examples
reveal.jsquarto

Using quarto and revealjs how can I have one word appear on a line on a slide?


I would like to have a word appear in a slide rendered with quarto in revealjs format.

I know I can have a word appear on the next line like this:

---
title: "Thoughts on Quarto"
format:
  revealjs
---

## Why do I use Quarto?


Because Excel 

:::{.fragment}
stinks
:::

but I want the new word to appear on the same line. Is that possible without making two nearly identical slides (and perhaps using auto-animate=true)?


Solution

  • Wrap the whole line (with fragments) within a pandoc divs (::::) and then set display: flex for the div and to make some space between the fragments, set some padding.

    ---
    title: "Thoughts on Quarto"
    format:
      revealjs:
        css: inline_fragment.css
    ---
    
    ## Why do I use Quarto?
    
    :::: {.inline-fragment}
    
    Because Excel 
    
    :::{.fragment}
    stinks
    :::
    
    ::: {.fragment}
    YESSSS!!!
    :::
    
    ::::
    
    

    inline_fragment.css

    .inline-fragment {
      display: flex;
    }
    
    .inline-fragment p {
      padding-right: 10px;
    }
    

    output


    initial


    fragment one


    fragment two