How to maximise the screen realestate of page-layout: article

[johngayler]

Hi,

I'm creating a template file for an html article however would like to move the TOC further to the left of the page and expand the width of the main content block so that plots and text can be displayed at a larger size.

Inserting :::{.column-page} directly underneath my yaml and closing the document with ::: gets close to this in that it renders the main content block to the size that I would like, however it removes the TOC. I have also tried adjusting the margin-left YAML option to offset the TOC, however this pushes it off the page when the viewport size is adjusted.

If I render my page as is and highlight the grid, I make adjustments to the screen-start-inset and body-content-start minmax values to reflect how I would like the template to render, however am unsure how to make these changes enduring.

How can one go about maintaining that column page width for the main content while retaining the TOC to the left or right?

Thanks in advance!

[dragonstyle]

Right now, the grid system is pretty strict about the size of the grid elements (it doesn't accommodate alternative widths for the various grid elements). That is something that we'd like to support in a future release.

Adjusting the grid using css is a complex issue is that because we have responsive grid definitions, to override our grid you'd need to provide all the various sizes of grid that we're using at the various responsive sizes. We may also switch grids depending up the page layout, making perhaps more grid definitions for you to deal with. Ideally we'd give you some variables that would let you definite the key portions of the grid system and we'd derive all the necessary grid definitions using those values...

Are you already page-layout: full (with toc left)? That will at least allow the content region to expand to the right to consume more of the right margin space...

[johngayler]

Thanks for your response @dragonstyle; that makes perfect sense about the grid system. As you suggested, being able to define one or two variables related to the system but perhaps not the whole thing would be great down the track.

The content width of page-layout: full is exactly what I'm after, however when I use this in conjunction with toc: left the TOC is minimised and has to be clicked on to expand. If it were possible to have it expanded as it is with page-layout: article that would be exactly what I'm after.

[dragonstyle]

Glad this would work (if it worked ;-) ).

• The grid variables are on the list for a future update
• I think the collapsing that you're seeing should be fixed in our pre-release builds (https://quarto.org/docs/download/prerelease.html) if that is something you'd be willing to try.

[johngayler]

I've just tried out the pre-release build and can confirm that the collapsing has been fixed. The combination of page-layout: full and toc: left is now perfect; thanks so much for helping me out with this.

[dragonstyle]

Great news, glad you're all set!

[nikita-telkar]

Hi,

Any idea when this would be released for the stable build? Also looking to have page-layout: full and floating toc: left! 😄

Many Thanks!

[dragonstyle]

It will likely be a few weeks- we're hoping to ship 1.2 soon.

[nikita-telkar]

Hi,

I updated my R and RStudio to the latest October build, but still seem to be getting the below error

I've been trying to extend my code output to occupy the white space to the right of the page using {.column-page-right} when using the page-layout: article option, wanting my floating Table of Contents on the left of my HTML

But for some reason it doesn't seem to work - I get the left margin white space but with no TOC, no matter if I put the {.column-page-right} at the start of the document or somewhere below

Using the default page-layout: article option means that my code/text is restricted to the centre of the HTML page, and is too narrow

Image shows top chunk is normal width, bottom chuck is longer width --> no TOC

[dragonstyle]

We did just ship 1.2 (today), but there haven't really been changes in the last week or so, so I don't think there is anything new in recent builds specific to this. A couple of thoughts:

• Could you share a sample QMD that shows the issue? I might be able to make a suggestion when I get better understanding of the issue.
• In 1.3 (just entered pre-release, still very very fresh) we give you some additional control of grid layout (you can specify key widths of core elements via YAML, or take over very very granular control via SCSS variables).

[nikita-telkar]

I cannot seem to attach the QMD, so here's all the code!

`

title: "Quarto GitHub Discussion #2509"
format:
html:
page-layout: article
font-size: 50%
toc: true
toc-location: left
toc-depth: 5
theme: minty
highlight: pygments
editor: source
execute:
eval: false

---

Issue: When {.column-page-right} is used with page-layout: article, the floating TOC on the left is not visible. Any text and headings outside of {.column-page-right} will be visible in the TOC, but not the headings within.

If I write my headings between two {.column-page-right} chunks as below, then they show up in TOC:

Heading 1

::: {.column-page-right}

:::

Heading 2

::: {.column-page-right}

:::

But if I do the following, they don't:

::: {.column-page-right}

Heading 3

Heading 4

:::

`

[dragonstyle]

I think you're just observing the collapsing behavior of our TOC, which only expands to reveal the currently visible section. For a longer version of the same document, as you scroll, you can see that the other sections are present:

---
title: "Quarto GitHub Discussion #2509"
format:
  html:
    page-layout: article
    font-size: 50%
    toc: true
    toc-location: left
    toc-depth: 5
    theme: minty
    highlight: pygments 
editor: source
execute: 
  eval: false
  
--- 

Issue: When `{.column-page-right}` is used with `page-layout: article`, the floating TOC on the left is not visible. Any text and headings outside of `{.column-page-right}` will be visible in the TOC, but not the headings within.  

If I write my headings between two `{.column-page-right}` chunks as below, then they show up in TOC:

## Heading 1

Nullam varius faucibus porta. Etiam scelerisque, mauris hendrerit malesuada malesuada, urna nibh sollicitudin leo, ac porttitor felis odio in nunc. Vivamus sed elit vitae odio mattis auctor. Aenean non tellus sodales, ornare massa hendrerit, hendrerit nisl. Donec dapibus eleifend dignissim. Cras blandit laoreet ipsum, ut gravida nisl facilisis eget. Ut pharetra sem et libero ullamcorper, nec egestas tortor scelerisque. Pellentesque viverra sodales felis in pellentesque. Integer tempus ex leo, ac scelerisque leo fermentum eu. Ut viverra, eros at dapibus dapibus, nunc ligula efficitur felis, sed ornare velit metus eu neque.

Suspendisse potenti. Pellentesque id hendrerit enim. Phasellus pretium ante non velit pellentesque porttitor. Donec mattis ac turpis vel euismod. Sed quam elit, condimentum a nisi ac, dictum interdum velit. Integer aliquet, odio sit amet blandit viverra, purus mauris tincidunt libero, vel iaculis elit diam eget orci. Maecenas id ex id sem lacinia eleifend et eget sapien. Mauris sit amet enim rhoncus, blandit risus ac, varius justo. Nunc cursus ligula et felis cursus maximus.

::: {.column-page-right}
```{r}

```

:::

### Heading 2  

Nullam varius faucibus porta. Etiam scelerisque, mauris hendrerit malesuada malesuada, urna nibh sollicitudin leo, ac porttitor felis odio in nunc. Vivamus sed elit vitae odio mattis auctor. Aenean non tellus sodales, ornare massa hendrerit, hendrerit nisl. Donec dapibus eleifend dignissim. Cras blandit laoreet ipsum, ut gravida nisl facilisis eget. Ut pharetra sem et libero ullamcorper, nec egestas tortor scelerisque. Pellentesque viverra sodales felis in pellentesque. Integer tempus ex leo, ac scelerisque leo fermentum eu. Ut viverra, eros at dapibus dapibus, nunc ligula efficitur felis, sed ornare velit metus eu neque.

Suspendisse potenti. Pellentesque id hendrerit enim. Phasellus pretium ante non velit pellentesque porttitor. Donec mattis ac turpis vel euismod. Sed quam elit, condimentum a nisi ac, dictum interdum velit. Integer aliquet, odio sit amet blandit viverra, purus mauris tincidunt libero, vel iaculis elit diam eget orci. Maecenas id ex id sem lacinia eleifend et eget sapien. Mauris sit amet enim rhoncus, blandit risus ac, varius justo. Nunc cursus ligula et felis cursus maximus.

::: {.column-page-right}

```{r}

```
:::


But if I do the following, they don't:  


::: {.column-page-right}

## Heading 3

Nullam varius faucibus porta. Etiam scelerisque, mauris hendrerit malesuada malesuada, urna nibh sollicitudin leo, ac porttitor felis odio in nunc. Vivamus sed elit vitae odio mattis auctor. Aenean non tellus sodales, ornare massa hendrerit, hendrerit nisl. Donec dapibus eleifend dignissim. Cras blandit laoreet ipsum, ut gravida nisl facilisis eget. Ut pharetra sem et libero ullamcorper, nec egestas tortor scelerisque. Pellentesque viverra sodales felis in pellentesque. Integer tempus ex leo, ac scelerisque leo fermentum eu. Ut viverra, eros at dapibus dapibus, nunc ligula efficitur felis, sed ornare velit metus eu neque.

Suspendisse potenti. Pellentesque id hendrerit enim. Phasellus pretium ante non velit pellentesque porttitor. Donec mattis ac turpis vel euismod. Sed quam elit, condimentum a nisi ac, dictum interdum velit. Integer aliquet, odio sit amet blandit viverra, purus mauris tincidunt libero, vel iaculis elit diam eget orci. Maecenas id ex id sem lacinia eleifend et eget sapien. Mauris sit amet enim rhoncus, blandit risus ac, varius justo. Nunc cursus ligula et felis cursus maximus.


```{r}

```



### Heading 4  


Nullam varius faucibus porta. Etiam scelerisque, mauris hendrerit malesuada malesuada, urna nibh sollicitudin leo, ac porttitor felis odio in nunc. Vivamus sed elit vitae odio mattis auctor. Aenean non tellus sodales, ornare massa hendrerit, hendrerit nisl. Donec dapibus eleifend dignissim. Cras blandit laoreet ipsum, ut gravida nisl facilisis eget. Ut pharetra sem et libero ullamcorper, nec egestas tortor scelerisque. Pellentesque viverra sodales felis in pellentesque. Integer tempus ex leo, ac scelerisque leo fermentum eu. Ut viverra, eros at dapibus dapibus, nunc ligula efficitur felis, sed ornare velit metus eu neque.

Suspendisse potenti. Pellentesque id hendrerit enim. Phasellus pretium ante non velit pellentesque porttitor. Donec mattis ac turpis vel euismod. Sed quam elit, condimentum a nisi ac, dictum interdum velit. Integer aliquet, odio sit amet blandit viverra, purus mauris tincidunt libero, vel iaculis elit diam eget orci. Maecenas id ex id sem lacinia eleifend et eget sapien. Mauris sit amet enim rhoncus, blandit risus ac, varius justo. Nunc cursus ligula et felis cursus maximus.


```{r}

```

:::