Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

revealjs: indentation with h3 in columns #9999

Closed
aronatkins opened this issue Jun 13, 2024 · 3 comments
Closed

revealjs: indentation with h3 in columns #9999

aronatkins opened this issue Jun 13, 2024 · 3 comments
Assignees
@cderv
Labels
bug Something isn't working revealjs Issues with the revealjs format themes Related to HTML theming or any other style related issue (like highlight-style)
Milestone
v1.6

Comments

@aronatkins
Copy link
Contributor

Bug description

h3 elements within columns end up indented differently than lists and other text within the same column.

Steps to reproduce

---
title: columnar
format: revealjs
---

## Column lists

::: {.columns}

::: {.column}

### Odd

* one
* three
* five
* seven
* nine

:::

::: {.column}

### Even

* two
* four
* six
* eight
* ten

:::

:::

## Column text

::: {.columns}

::: {.column}

### Odd

this text is odd.

> this blockquote is also odd.

:::

::: {.column}

### Even

this text is even.

> this blockquote is also even.

:::

:::

Expected behavior

sub-headings and other column text should have consistent alignment within columns

Actual behavior

image

image

Your environment

No response

Quarto check output

Quarto 1.4.551
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.551
      Path: /Users/aron/quarto/quarto-1.4.551-macos/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /opt/homebrew/opt/[email protected]/bin/python3.12
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.3
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
      knitr: 1.45
      rmarkdown: 2.27

[✓] Checking Knitr engine render......OK
@aronatkins aronatkins added the bug Something isn't working label Jun 13, 2024
@mcanouil mcanouil added the revealjs Issues with the revealjs format label Jun 13, 2024
@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Jun 13, 2024 •
edited
Loading

I was surprised by @cderv's analysis that this is because a margin specified in em will be a different size for <p> and <h3>, but yes indeed, em is relative not to the base font but to the font of the element.

<head>
<style>
  .indent {
    margin-left: 4em
  }
</style>
</head>

<body>
  <h1 class="indent">H1 with indent</h1>
  <h2 class="indent">H2 with indent</h2>
  <h3 class="indent">H3 with indent</h3>
  <p class="indent">p with indent</h1>
</body>
</html>
image

(These margins would be the same size with rem units.)

@mcanouil mcanouil added the themes Related to HTML theming or any other style related issue (like highlight-style) label Jun 13, 2024
@cderv
Copy link
Collaborator

cderv commented Jun 14, 2024

Putting back here my analysis. This is due to some CSS settings we set which uses em units.

quarto-cli/src/resources/formats/revealjs/quarto.scss

Lines 401 to 413 in 50b4cf1

.reveal .columns > .column > :not(ul, ol) {
margin-left: 0.25em;
margin-right: 0.25em;
}
.reveal .columns > .column:first-child > :not(ul, ol) {
margin-right: 0.5em;
margin-left: 0;
}
.reveal .columns > .column:last-child > :not(ul, ol) {
margin-right: 0;
margin-left: 0.5em;
}

It has been added at the time in 805f7ad to add spacing between columns

(These margins would be the same size with rem units.)

We probably need to use rem then here, right @gordonwoodhull ?

@cderv cderv self-assigned this Jun 14, 2024
@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Jun 14, 2024 •
edited
Loading

Absolute units like px could also work. I guess rem has the advantage of being the minimal change, but you’ll still have to test to make sure it looks good!

1rem == the current font size.

@cderv cderv added this to the v1.6 milestone Jun 14, 2024
@cderv cderv closed this as completed in 2eab7cb Oct 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cderv cderv

Labels
bug Something isn't working revealjs Issues with the revealjs format themes Related to HTML theming or any other style related issue (like highlight-style)
Projects
None yet
Milestone
v1.6
Development

No branches or pull requests
4 participants
@aronatkins @gordonwoodhull @cderv @mcanouil