htmltextquartojustify

How to justify text in Quarto?


I would like to justify the text in a Quarto document. This means that it should automatically add text between words so that both edges of each line of text are aligned with both margins. In a word-document this would be the following highlighted symbol:

enter image description here

So I was wondering if this method is possible in a Quarto document? Here is a reproducible example:

---
title: "How to justify text in Quarto"
format: html
editor: visual
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

Quarto is based on Pandoc and uses its variation of markdown as its underlying document syntax. Pandoc markdown is an extended and slightly revised version of John Gruber's Markdown syntax. 

Markdown is a plain text format that is designed to be easy to write, and, even more importantly, easy to read:

Output:

enter image description here


As you can see the text is not justified, because the lines of text are not all at both edges of each line with both margins.


Solution

  • Since output format is HTML, all you need the CSS property text-align set as justify.

    ---
    title: "How to justify text in Quarto"
    format: html
    engine: knitr
    ---
    
    ```{css, echo = FALSE}
    .justify {
      text-align: justify !important
    }
    ```
    
    ## Quarto
    
    ::: {.justify}
    
    Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.
    
    Quarto is based on Pandoc and uses its variation of markdown as its underlying document syntax. Pandoc markdown is an extended and slightly revised version of John Gruber's Markdown syntax and Markdown is a plain text format.
    
    Markdown is a plain text format that is designed to be easy to write, and, even more importantly, easy to read:
    
    :::
    

    justified text in Quarto