Quarto logo.
  • Overview
  • Get Started
  • Guide
  • Extensions
  • Reference
  • Gallery
  • Blog
  • Help
    • Report a Bug
    • Ask a Question
    • FAQ

Layout

  • Guide
  • Authoring
    • Markdown Basics
    • Figures
    • Tables
    • Diagrams
    • Videos
    • Callout Blocks
    • Article Layout
    • Scholarly Writing
      • Title Blocks
      • Citations & Footnotes
      • Cross References
      • Creating Citeable Articles
      • Appendices
  • Computations
    • Using Python
    • Using R
    • Using Julia
    • Using Observable
    • Execution Options
    • Parameters
  • Tools
    • JupyterLab
    • RStudio IDE
    • VS Code
    • Neovim
    • Text Editors
    • Visual Editor
      • Editor Basics
      • Technical Writing
      • Content Editing
      • Shortcuts & Options
      • Markdown Output
  • Documents
    • HTML
      • HTML Basics
      • HTML Code Blocks
      • HTML Theming
      • Publishing HTML
    • PDF
      • PDF Basics
      • PDF Engines
    • MS Word
      • Word Basics
      • Word Templates
    • Markdown
      • GitHub (GFM)
      • Hugo
      • Docusaurus
    • All Formats
  • Presentations
    • Overview
    • Revealjs
      • Reveal Basics
      • Presenting Slides
      • Advanced Reveal
      • Reveal Themes
    • PowerPoint
    • Beamer
  • Websites
    • Creating a Website
    • Website Navigation
    • Creating a Blog
    • Website Search
    • Website Tools
    • About Pages
    • Listing Pages
      • Document Listings
      • Custom Listings
  • Books
    • Creating a Book
    • Book Structure
    • Book Crossrefs
    • Customizing Output
  • Interactivity
    • Overview
    • Observable JS
      • Introduction
      • Libraries
      • Data Sources
      • OJS Cells
      • Shiny Reactives
      • Code Reuse
      • Examples
        • Penguins
        • Sunburst
        • Arquero
        • Population
        • NOAA CO2
        • GitHub API
        • Layout
        • Shiny
          • K-Means
          • Binning
          • Data Binding
          • Covid Map
    • Shiny
      • Introduction
      • Running Documents
      • Execution Contexts
      • External Resources
      • Examples
        • Old Faithful
        • K-Means
        • Diamonds
    • Widgets
      • Jupyter Widgets
      • htmlwidgets for R
    • Component Layout
  • Publishing
    • Publishing Basics
    • Quarto Pub
    • GitHub Pages
    • RStudio Connect
    • Netlify
    • Other Services
    • Publishing with CI
  • Projects
    • Project Basics
    • Managing Execution
    • Project Profiles
    • Environment Variables
    • Project Scripts
    • Virtual Environments
  • Advanced
    • Includes
    • Variables
    • Page Layout
    • Document Language
    • Conditional Content
    • Notebook Filters

Layout

You can control the layout of OJS content in a number of ways.

page-layout: full

This example uses page-layout: full to have its contents occupy the entire width of the page:

---
title: "Layout"
format: 
  html: 
    page-layout: full
---

Enclose the inputs in a sidebar panel and the outputs in a tabset panel (click the “Code” button at top right to see the full source code):

viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)

Plot

Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)

Data

Inputs.table(filtered)

Read and filter the data based on the user’s inputs:

data = FileAttachment("palmer-penguins.csv").csv({typed: true})
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})

width and layoutWidth: fine-grained layout tracking

Like ObservableHQ, ojs cells support the reactive width which tracks the clientWidth of the main HTML element.

width

In addition, if you need the widths of specific parts of the layout, use the CSS class ojs-track-layout in a div. Quarto’s OJS runtime tracks all such divs in layoutWidth. In this example, the tabset above has id penguins-tabset, and you can see its clientWidth reactively below. If this webpage is sufficiently wide, the sidebar will take up some of the space and the width of the resulting tabset will be smaller:

layoutWidth
GitHub API
Shiny
Source Code
---
title: "Layout"
format:
  html:
    echo: false
    code-tools: true
    page-layout: full
    toc: false
---

You can control the layout of OJS content in a number of ways.

## `page-layout: full`

This example uses `page-layout: full` to have its contents occupy the entire width of the page:

``` yaml
---
title: "Layout"
format: 
  html: 
    page-layout: full
---
```

Enclose the inputs in a sidebar panel and the outputs in a tabset panel (click the "Code" button at top right to see the full source code):

```{ojs}
//| panel: sidebar
viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)
```

::: {#penguins-tabset .panel-tabset .ojs-track-layout}
## Plot

```{ojs}
Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)
```

## Data

```{ojs}
Inputs.table(filtered)
```
:::

Read and filter the data based on the user's inputs:

```{ojs}
//| echo: true
data = FileAttachment("palmer-penguins.csv").csv({typed: true})
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})
```

## `width` and `layoutWidth`: fine-grained layout tracking

Like ObservableHQ, `ojs` cells support the reactive `width` which tracks the `clientWidth` of the main HTML element. 

```{ojs}
//| echo: true
width
```

In addition, if you need the widths of specific parts of the layout, use the CSS class `ojs-track-layout` in a div. Quarto's OJS runtime tracks all such divs in `layoutWidth`. In this example, the tabset above has id `penguins-tabset`, and you can see its `clientWidth` reactively below. If this webpage is sufficiently wide, the sidebar will take up some of the space and the width of the resulting tabset will be smaller:

```{ojs}
//| echo: true
layoutWidth
```
Proudly supported by RStudio
  • About
  • FAQ
  • License
  • Trademark