Switch .column-margin to left side

[JeffreyRStevens]

Is there any way to switch the .column-margin to be on the left side of the body column? In particular, I would like my asides to be on the left to group entries in a CV based on year (e.g., https://jeffreyrstevens.github.io/cv/). Or is there another way besides asides to do this in Quarto?

[dragonstyle]

There isn't an easy way out of the box to do this, though you have a couple tools at your disposal. First you can use \reversemarginpar and \normalmarginpar to reverse and reset the margin positions from the left to the right (this works fine in documents now), but currently our margin layout geometry doesn't change, so the document will have a large right margin even though you reversed the margin using the above command.

You could try using left-margin and right-margin or geometry to resize and adjust the margins once they're reversed (though I haven't actually done this so I'm not 100% sure that this will work).

[JeffreyRStevens]

Many thanks, @dragonstyle. I can almost get it to work with the PDF using geometry. The only issue is that the aside is slightly raised above the line of text. Not a big deal, but it doesn't happen when the aside is on the right for HTML.

But I assume that \reversemarginpar is LaTeX code. So when I try this in HTML, it does not work.

Any suggestions for how to do this in both PDF and HTML? I would really like to have a single CV document that outputs to both, so I don't have to update two documents.

Here's my reproducible example:

---
geometry:
  - right=1in
format:
  pdf: default
  html: default
---

\reversemarginpar

# Positions

[2020-]{.aside}
Associate professor, Department of Psychology, Center for Brain, Biology & Behavior, University of Nebraska-Lincoln

[2022-]{.aside}
Data science mentor, RStudio Academy

[dragonstyle]

Nice work on the LaTeX side!

There isn't a way of doing this without pitfalls on the HTML side yet. As it stands, there is a grid system and it is pretty easy to shift elements around within the grid system using simple css. But in the case of column-margin elements - we are using the !important keyword in the CSS which is likely going to prevent you from overriding this value. In a little testing, I also notice that some of our logic for preventing elements from overlapping doesn't work properly when you positions the margin elements on the left side without also flipping the entire sidebars (meaning moving navigation to the right and the TOC to the left).

I was thinking that this might possibly work, but definitely ymmv even if it does seem to work:

/* redefine the margin position in the grid to the left side */
.column-margin {
  grid-column: page-start/body-start !important;
}

/* redefine the margin bar position in the grid to the left side */
#quarto-margin-sidebar {
 grid-column: page-start/body-start;
}

/* redefine the sidebar portion in the grid to the right side */
#quarto-sidebar {
 grid-column: body-end/page-end;
}

[JeffreyRStevens]

Oh, now we're getting somewhere!

I tweaked the css (named the file flipmargin.css) to change the spacing.

/* redefine the margin position in the grid to the left side */
.column-margin {
  grid-column: body-start-outset/body-start !important;
}

/* redefine the margin bar position in the grid to the left side */
#quarto-margin-sidebar {
 grid-column: body-start-outset/body-start;
}

/* redefine the sidebar portion in the grid to the right side */
#quarto-sidebar {
 grid-column: body-end/page-end;
}

And flipped the toc to the other side.

---
geometry:
  - right=1in
format:
  pdf: default
  html: 
    css: flipmargin.css
    toc: true
    toc-location: left
---

\reversemarginpar

# Positions

[2020-]{.aside}

Associate professor, Department of Psychology, Center for Brain, Biology & Behavior, University of Nebraska-Lincoln

[2022-]{.aside}

Data science mentor, RStudio Academy

I implemented this in my full CV (HTML and PDF). Still some formatting to tweak, but it looks pretty good!

Thanks again for your help on this and for all of the work developing Quarto!

[dragonstyle]

That came out very nicely- thanks for sharing you results!