- "markdown": "---\ntitle: Positioning Content in the Margin\nsubtitle: Create 'Tufte' style documents with sidenotes, margin tables and figures, and other margin content\ndescription: |\n This post demonstrates a few of the capabilities for positioning content in the margin of the page. You can read more about the complete capabilities in the the [Article Layout Guide](/docs/authoring/article-layout.qmd).\nauthor: Charles Teague\ndate: 2/17/2022\ncategories:\n - Features\n - Layout\nimage: margin-content.png\nimage-alt: \"Screenshot of two sections of post: Margin Figures, which has a plot in the margin; and Arbitrary Margin Content, which has text with a LaTeX equation in the margin.\"\nreference-location: margin\ncitation-location: margin\n---\n\n\nQuarto supports a variety of page layout options that enable you to author content that\n\n- Fills the main content region\n- Overflows the content region\n- Spans the entire page\n- Occupies the document margin\n\nThis post will demonstrate a few of the capabilities for positioning content in the margin of the page. You can read more about the complete capabilities in the the [Article Layout Guide](/docs/authoring/article-layout.qmd).\\\n\n## Margin Figures\n\nFigures that you create using code cells can be placed in the margin by using the `column: margin` code cell option. If the code produces more than one figure, each of the figures will be placed in the margin.\n\n\n::: {.cell .column-margin}\n\n````{.cell-code}\n```{{r}}\n#| label: fig-mtcars\n#| fig-cap: \"MPG vs horsepower, colored by transmission.\"\n#| column: margin\n\nlibrary(ggplot2)\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n mtcars$am, labels = c('automatic', 'manual')\n)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n geom_point() + geom_smooth(formula = y ~ x, method = \"loess\") +\n theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n{#fig-mtcars width=672}\n:::\n:::\n\n\n## Margin Tables\n\nYou an also place tables in the margin of your document by specifying `column: margin`.\n\n\n::: {.cell .column-margin}\n\n````{.cell-code}\n```{{r}}\n#| column: margin\n\nknitr::kable(\n mtcars[1:3, 1:3]\n)\n```\n````\n\n::: {.cell-output-display}\n| | mpg| cyl| disp|\n|:-------------|----:|---:|----:|\n|Mazda RX4 | 21.0| 6| 160|\n|Mazda RX4 Wag | 21.0| 6| 160|\n|Datsun 710 | 22.8| 4| 108|\n:::\n:::\n\n\n## Other Content\n\nYou can also place content in the margin by targeting the margin column using a div with the .`column-margin` class. For example:\n\n``` md\n::: {.column-margin}\nWe know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:\n\n\n$$\\frac{d}{dx}\\left( \\int_{a}^{x} f(u)\\,du\\right)=f(x).$$\n\n:::\n```\n\n::: column-margin\nWe know from *the first fundamental theorem of calculus* that for $x$ in $[a, b]$:\n\n\n$$\\frac{d}{dx}\\left( \\int_{a}^{x} f(u)\\,du\\right)=f(x).$$\n\n:::\n\n## Margin References\n\nFootnotes and the bibliography typically appear at the end of the document, but you can choose to have them placed in the margin by setting the following option\\[\\^1\\] in the document front matter:\n\n``` yaml\n---\nreference-location: margin\ncitation-location: margin\n---\n```\n\nWith these options set, footnotes and citations will (respectively) be automatically be placed in the margin of the document rather than the bottom of the page. As an example, when I cite @xie2018, the citation bibliography entry itself will now appear in the margin.\n\n### Asides\n\nAsides allow you to place content aside from the content it is placed in. Asides look like footnotes, but do not include the footnote mark (the superscript number). [This is a span that has the class `aside` which places it in the margin without a footnote number.]{.aside}\n\n``` markdown\n[This is a span that has the class aside which places it in the margin without a footnote number.]{.aside}\n```\n\n## Margin Captions\n\nFor figures and tables, you may leave the content in the body of the document while placing the caption in the margin of the document. Using `cap-location: margin` in a code cell or document front matter to control this. For example:\n\n\n::: {.cell .caption-margin}\n\n````{.cell-code}\n```{{r}}\n#| label: fig-cap-margin\n#| fig-cap: \"MPG vs horsepower, colored by transmission.\"\n#| cap-location: margin\n\nlibrary(ggplot2)\nmtcars2 <- mtcars\nmtcars2$am <- factor(\n mtcars$am, labels = c('automatic', 'manual')\n)\nggplot(mtcars2, aes(hp, mpg, color = am)) +\n geom_point() + geom_smooth(formula = y ~ x, method = \"loess\") +\n theme(legend.position = 'bottom')\n```\n````\n\n::: {.cell-output-display}\n{#fig-cap-margin width=672}\n:::\n:::\n",
0 commit comments