VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pandoc): print CSS — content overflowing the right page margin

Browse source 
The HTML→PDF path produced PDFs where content extended past the
right margin of each letter page. Two contributing causes in
viewer-template.html's @media print rules:

1. .content-wrapper carries max-width: min(900px, 100%) from the
   screen layout. The print override set width: 100% but didn't reset
   max-width. Chromium's --print-to-pdf renders at the full page
   width (816px for letter at 96dpi) and only clips at print time,
   so without max-width: none the element actually extends past the
   ~624px printable area.

2. Tables, preformatted blocks, and long URLs had no print
   containment. A wide <pre> or a <table> with many columns would
   blow out the right edge even when the parent constraints held.

Fixes applied to @media print:

  - html, body, .app-container: explicit width: 100% + max-width: 100%
    to be sure the print viewport flows top-down with no horizontal
    creep at the layout root.
  - .content-wrapper: max-width: none + width: 100% (was just width).
  - .content-page: width: 100% added (was just max-width: none).
  - .document-content: max-width: 100% + box-sizing: border-box so
    the existing 0.5in horizontal padding stays inside the page.
  - pre/code/table/blockquote/img/video: max-width: 100% +
    overflow-wrap: break-word; <pre> additionally white-space:
    pre-wrap + word-break: break-word so unbreakable token runs
    (URLs, paths, command lines) wrap instead of overflowing.
  - table: table-layout: fixed so columns shrink to fit rather than
    forcing horizontal scroll/overflow.

Both source files (pandoc/viewer-template.html and the embed copy at
zddc/internal/convert/viewer-template.html) updated and verified
identical with diff -q.
This commit is contained in:
ZDDC 2026-05-13 13:48:41 -05:00
parent 1db9fd06e7
commit f7f018ca22
2 changed files with 72 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
pandoc/viewer-template.html
View file

@ -577,17 +577,33 @@ th, td {
}
/* Layout adjustments */
html, body {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.app-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.content-wrapper {
margin-left: 0 !important;
width: 100% !important;
/* The screen layout caps content-wrapper at 900px; in print, the
printable area is page-width minus @page margins (~6.5in =
~624px for letter at 96dpi), which is narrower than 900px BUT
chromium's --print-to-pdf renders at the full page width and
only clips at print time — so without max-width:none the
element extends past the right margin. */
max-width: none !important;
}
.content-page {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
}
@ -597,6 +613,25 @@ th, td {
padding: 0 0.5in !important;
border-left: none !important;
min-height: calc(100vh - 130pt) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Wide content that wouldn't otherwise wrap: tables, code blocks,
long URLs in inline code. Force them to stay within the
printable area instead of running off the right edge. */
pre, code, table, blockquote, img, video {
max-width: 100% !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
pre {
white-space: pre-wrap !important;
word-break: break-word !important;
}
table {
table-layout: fixed !important;
width: 100% !important;
}
/* Fix list formatting in print */

37
zddc/internal/convert/viewer-template.html
View file

@ -577,17 +577,33 @@ th, td {
}
/* Layout adjustments */
html, body {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.app-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.content-wrapper {
margin-left: 0 !important;
width: 100% !important;
/* The screen layout caps content-wrapper at 900px; in print, the
printable area is page-width minus @page margins (~6.5in =
~624px for letter at 96dpi), which is narrower than 900px BUT
chromium's --print-to-pdf renders at the full page width and
only clips at print time — so without max-width:none the
element extends past the right margin. */
max-width: none !important;
}
.content-page {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
}
@ -597,6 +613,25 @@ th, td {
padding: 0 0.5in !important;
border-left: none !important;
min-height: calc(100vh - 130pt) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Wide content that wouldn't otherwise wrap: tables, code blocks,
long URLs in inline code. Force them to stay within the
printable area instead of running off the right edge. */
pre, code, table, blockquote, img, video {
max-width: 100% !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
pre {
white-space: pre-wrap !important;
word-break: break-word !important;
}
table {
table-layout: fixed !important;
width: 100% !important;
}
/* Fix list formatting in print */