starred/jmap-webmail
1
0
Fork 0
mirror of https://github.com/root-fr/jmap-webmail.git synced 2026-10-05 16:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(print): shrink fixed-width HTML emails to fit on A4

Browse Source 
Newsletter-style mail is usually laid out with width="600" or
style="width:640px" tables. On A4 with 12 mm margins the printable
width is closer to 180 mm, so the right edge of the content was
being clipped. Add print rules that cap every element in
#print-overlay to max-width: 100%, let tables auto-layout, and force
long URLs / single words to wrap instead of overflowing. Images,
svgs, videos and canvases also get max-width: 100% with auto height
so they scale down proportionally.
This commit is contained in:
Matthieu MALVACHE
2026-04-17 14:32:36 +02:00
parent 0a084613d1
commit 8e659c1ed3
1 changed files with 37 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+37
View File
@@ -522,6 +522,43 @@ html.is-printing body > *:not(#print-overlay) {
background: #fff !important;
}
/* Newsletter-style HTML emails are typically laid out with fixed-width
tables (width="600" or style="width:640px"). On A4 paper the usable
width is around 180mm, so the right edge of the content gets clipped.
Force every printed element to shrink to the page width, let tables
auto-layout, and encourage long URLs / words to break. */
#print-overlay *:not(html):not(body) {
max-width: 100% !important;
box-sizing: border-box !important;
}
#print-overlay img,
#print-overlay video,
#print-overlay canvas,
#print-overlay svg {
max-width: 100% !important;
height: auto !important;
}
#print-overlay table {
max-width: 100% !important;
width: auto !important;
table-layout: auto !important;
}
#print-overlay td,
#print-overlay th,
#print-overlay p,
#print-overlay li,
#print-overlay pre,
#print-overlay code {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
#print-overlay pre {
white-space: pre-wrap !important;
}
#print-overlay .print-inlined-iframe {
width: 100% !important;
}
#print-overlay a {
color: #0645ad !important;
text-decoration: underline !important;