Mastering the Art of Slide Design: How to Tweak Font Size and Position of Reference in Quarto RevealJS Slide

• Create a new Quarto document or open an existing one.
• Add the following YAML header to the top of your document, replacing “16px” with your desired font size:

  ---
  font-size: 16px
  ---

• Save your document and preview your slides.

By adding this YAML header, you’ll set the global font size for your entire presentation. If you want to apply different font sizes to specific slides or sections, you can add additional YAML headers within those sections.

Method 2: Inline Formatting

Sometimes, you need to adjust font size for a specific piece of text or element. That’s where inline formatting comes in. Quarto RevealJS allows you to use Markdown syntax to format your text, including font sizes. Here’s an example:

### This heading will have a larger font size { .larger }

In this example, we’ve added the `.larger` class to the heading element, which will increase its font size. You can define custom classes in your Quarto document’s CSS file to control the exact font size and other styles.

Method 3: Custom CSS

The most powerful way to control font size is by using custom CSS. Quarto RevealJS allows you to define custom CSS rules in your document’s CSS file. This approach provides unparalleled flexibility and customization options. Here’s an example of how you can define a custom font size for headings:

/* In your Quarto document's CSS file */
h1, h2, h3 {
  font-size: 24px;
}

In this example, we’ve defined a custom font size for all heading elements (h1, h2, and h3) in the presentation. You can customize this code to target specific elements, classes, or IDs to achieve the desired font size and style.

Tweaking Reference Position in Quarto RevealJS

Now that we’ve covered font size, let’s move on to tweaking reference position. By default, Quarto RevealJS places references at the bottom of the slide. However, you might want to adjust this position to improve readability or emphasize certain information. Here are three methods to tweak reference position:

Method 1: Using YAML Headers (Again!)

Remember how we used YAML headers to adjust font size? You can also use them to tweak reference position. Add the following YAML header to the top of your document, replacing “top-right” with your desired position:

---
reference-position: top-right
---

This will set the global reference position for your entire presentation. You can choose from various position options, such as “top-left”, “bottom-left”, “center”, or “inline”. Experiment with different positions to find the one that works best for your slides.

Method 2: Inline Formatting (Again!)

Just like we used inline formatting for font size, you can also use it to adjust reference position. Add a Markdown class to the reference element, like this:

[Reference text](https://example.com) { .top-right }

In this example, we’ve added the `.top-right` class to the reference element, which will position it at the top-right corner of the slide. You can define custom classes in your Quarto document’s CSS file to control the exact position and style.

Method 3: Custom CSS (Again!)

The most flexible way to control reference position is by using custom CSS. You can define custom CSS rules to target specific reference elements or classes. Here’s an example of how you can position all references at the top-left corner:

/* In your Quarto document's CSS file */
.reveal .references {
  position: absolute;
  top: 0;
  left: 0;
}

In this example, we’ve targeted the `.references` class and used CSS positioning rules to place all references at the top-left corner of the slide. You can customize this code to achieve the desired position and style.

Conclusion

Tweaking font size and reference position in Quarto RevealJS might seem like a daunting task, but with these three methods, you’re equipped to take control of your slide design. Whether you prefer YAML headers, inline formatting, or custom CSS, the key to mastering font size and reference position is experimentation and practice.

Remember, the goal of slide design is to communicate your message effectively and engage your audience. By tweaking font size and reference position, you can create visually stunning slides that support your narrative and leave a lasting impression.

This table summarizes the three methods for tweaking font size and reference position in Quarto RevealJS. Choose the method that best fits your needs, and don’t be afraid to combine them to achieve the perfect slide design.

Further Reading

If you’re new to Quarto RevealJS or want to dive deeper into its features and customization options, be sure to check out the official Quarto documentation and RevealJS API documentation. There, you’ll find a wealth of information on how to master slide design, including tutorials, examples, and community resources.

Happy tweaking, and may your slides be forever fabulous!

Here are 5 Questions and Answers about “How to tweak font size and position of reference in Quarto RevealJS slide”:

Frequently Asked Question

Get ready to master the art of customizing your Quarto RevealJS slides and take your presentations to the next level!