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

[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

[MurakamiShinyu]

Thank you for sharing your use case and the workaround for sidenotes. I understand the limitations of the workaround and we need to have a proper solution for sidenotes in Vivliostyle.js.

However, our current focus is on implementing and stabilizing the footnotes feature based on the CSS GCPM specification (see issues: https://github.com/vivliostyle/vivliostyle.js/issues?q=footnote%20sort%3Aupdated-desc).

Regarding the CSS specifications for sidenotes, there is a proposal for extending the CSS specifications to include sidenotes and other types of notes:

• Specifications for notes (in paged and continuous media) w3c/csswg-drafts#12472

I will consider implementing the proposed specifications in the future. If you have any better ideas regarding the proposal, I recommend commenting on the proposal.