brand.yml: placement of the logo

[fenke]

Description

Hi,

Experimenting with branding (_brand.yml) I found that processing through typst places the large logo in the top-left of the first page, while title, author and date are centered. This looks horrible.

There is no way that I can find to instruct quarto/typst to place the logo in the top-center of the page.

https://quarto.org/docs/authoring/brand.html#logo mentions control with format: typst: logo ... but the only reference to something like that is an unlinked page that does not help at https://quarto.org/docs/advanced/typst/brand-yaml.html

Is it all possible to change the placement of logo's?

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[mcanouil]

I had a bit of time so I made one:

Download the Quarto logo from: https://quarto.org/quarto.png

---
title: "Quarto Playground"
format: typst
keep-typ: true
brand:
  logo:
    large: quarto.png
---

This is a playground for Quarto.

{{< lipsum 1 >}}

![An image]({{< placeholder 600 400 >}}){#fig-placeholder}

My first guess was to modify the partials/template to get control over the logo, but there are no code about the logo in it: https://quarto.org/docs/journals/templates.html#typst-partials
From a bit of investigation, unless I missed something, the logo is only injected by a Lua filter which seems to imply there is a "location" option but that option is not part of the brand YAML schema.

[fenke]

Thank you. That's really small :)

Quarto was complaining about the 'location' option I was trying to sneak in, so I suppose that matches the schema. Maybe this shouldn't be in branding at all, since it is page layout.

But it should go somewhere :/

[mcanouil]

Quarto was complaining about the 'location' option I was trying to sneak in, so I suppose that matches the schema. Maybe this shouldn't be in branding at all, since it is page layout.

But it should go somewhere :/

Sorry, I don't understand what you mean here.

---

Note that I used keep-typ: true in my example to get access to the Typst code.
As a workaround, you could post-process the .typ file and compile it with quarto typst compile.

[gordonwoodhull]

Full control over positioning of the logo is supported through YAML. This is currently a Typst-only feature (although it uses CSS conventions).

https://quarto.org/docs/advanced/typst/brand-yaml.html#logo

I think I need to move this documentation somewhere more prominent.

[mcanouil]

Here is how it can be used.

---
title: "Quarto Playground"
format:
  typst:
    logo:
      location: right-bottom
brand:
  logo:
    large: quarto.png
---

This is a playground for Quarto.

{{< lipsum 1 >}}

![An image]({{< placeholder 600 400 >}}){#fig-placeholder}

As the setting is specific to Typst, it's preferable to nest the option under the format, but it would work for Typst, even at the top-level.

---
title: "Quarto Playground"
format: typst
logo:
  location: right-bottom
brand:
  logo:
    large: quarto.png
---

[fenke]

That does work, thank you.

Odd thing is that it renders the pdf with the location as set in the format when using 'quarto render' but not when using quarto preview. That last really lead me around in circles and I wonder where else 'quarto preview' has misled me about formatting options.

Anyway, my question is answered.

[fenke]

Full control over positioning of the logo is supported through YAML. This is currently a Typst-only feature (although it uses CSS conventions).

https://quarto.org/docs/advanced/typst/brand-yaml.html#logo

I think I need to move this documentation somewhere more prominent.

Thanks.

Found more interesting stuff at https://quarto.org/docs/advanced/
What else did they not tell us about?

[gordonwoodhull]

Odd thing is that it renders the pdf with the location as set in the format when using 'quarto render' but not when using quarto preview. That last really lead me around in circles and I wonder where else 'quarto preview' has misled me about formatting options.

I'm not able to repro this, at least with @mcanouil's examples. I see the Quarto logo in the lower right both via render and via preview.

I'm having a hard time imagining how this could happen, since preview simply renders the PDF and then shows it using PDF.js.

Can you say more?

[mcanouil]

I did both render/preview and no inconsistencies.
The question is are you (@fenke) sure about the context where you executed those commands? Were you exactly in the same place and not in a subdirectory of a parent directory with a _quarto.yml with different settings.