Skip to content

How would you implement Tufte-style sidenotes in Vivliostyle CSS? #1698

@MarvinBlome

Description

@MarvinBlome

I'm trying to create a Tufte-inspired style for PDF generation with Vivliostyle. The key feature of Tufte's design is that footnotes appear as sidenotes in the right margin, not at the bottom of the page.

Current Approach (Workaround)

I'm currently using a CSS hack with float: right and negative margins:

span.footnote::after {
  content: counter(footnote) "\00a0" content(text);
  float: right;
  clear: right;
  width: 2in;
  margin-right: -2.25in;
}

This works for simple cases, but it doesn't use Vivliostyle's native @page and paged media features. As a result, I'm running into issues:

  • Sidenotes inside block elements (e.g. quoteblocks) don't escape to the page margin
  • Long sidenotes can't break across pages
  • No automatic overflow handling

Question

How would you recommend implementing Tufte-style sidenotes using proper CSS Paged Media and Vivliostyle's @page features?

Is there a way to use page margin boxes, named flows, or other Vivliostyle-supported features to achieve margin notes that:

  • Are positioned in the right margin at the height of their reference
  • Can handle overflow gracefully
  • Work regardless of the parent element (quotes, tables, etc.)

Any example or guidance would be very helpful!

Attached: A sample book in Tufte Style.

Tufte sample-book.pdf

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions