quarto-dev / quarto-dev/quarto-cli

Default to print-responsive CSS for simple document content

Open
#9,510 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

A doc with very simple content defaults to generating HTML with CSS that is not print-responsive. By print-responsive I mean CSS that is supported by WeasyPrint so that the HTML+CSS responds to be being rendered onto a print page (as PDF).

Steps to reproduce
  1. get into environment with weasyprint (see environment below)
  2. copy print0.qmd.txt to current working directory as print0.qmd
  3. quarto render print0.qmd
  4. weasyprint print0.html print0.pdf
  5. open print0.html and print0.pdf with web browser and PDF viewer

WeasyPrint environment:

You can install WeasyPrint locally by apt-get install weasyprint or see https://doc.courtbouillon.org/weasyprint/stable/first_steps.html
Or you can run in a container I used to test:

podman run --rm -it -v .:/mnt -w /mnt registry.gitlab.com/perm.pub/dock/qweasyprint-deb:12.5-1.4.553-1

Expected behavior

At a superficial level, I expected the PDF and HTML to have the same space between the author and the introduction section title.

At a deeper level, I expected Quarto to not default to depending on Bootstrap (CSS) for basic HTML content because Bootstrap is not tested to be print-responsive (i.e. work with WeasyPrint).

Sounds like Quarto is putting A LOT of effort into turning HTML into Typst so that a PDF can look like the HTML. So I would expect that Quarto would put at least some effort into outputting HTML that can be turned directly into a PDF using WeasyPrint so that no Typst intermediate step is needed.

Actual behavior

The PDF has no space between the author and the first title whereas a web browser shows ~16px space. This is because Bootstrap CSS is using margin-block-end which is not support by WeasyPrint.

Your environment

podman run --rm -it -v .:/mnt -w /mnt registry.gitlab.com/perm.pub/dock/qweasyprint-deb:12.5-1.4.553-1
which contains weasyprint 57.2. But current version 60.2 also reproduces the issue.

Quarto check output

Quarto 1.4.553
[✓] 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.553
Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
Tex: (not detected)

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

[✓] Checking Python 3 installation....OK
Version: 3.11.2
Path: /usr/bin/python3
Jupyter: (None)

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

[✓] Checking R installation...........(None)

  Unable to locate an installed version of R.
  Install R from https://cloud.r-project.org/

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied print0.qmd reproduction, run quarto render print0.qmd, and inspect the generated HTML and CSS alongside the WeasyPrint PDF. Trace where Bootstrap styling is applied to simple document content; done means the rendered HTML uses print-responsive styling and preserves the expected spacing between the author and introduction heading.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
documentation, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.