j6k4m8 / goosepaper

generate and deliver a daily newspaper to you or your remarkable tablet
Apache License 2.0
271 stars 24 forks source link

pdf page size #75

Closed martinetd closed 1 year ago

martinetd commented 1 year ago

Hello!

I've been playing with goosepaper last week, it's great -- fiddling a bit with it to read less on computer in front of kids and it looks like I'll be able to work some nice workflows.

One problem I've run into is page size; I'm not sure how it used to render on older versions but with the latest 3.0 update I find the remarkable is pretty bad at handling A4 pdf (default paper size) -- there's often some text left over at the bottom, requiring to scroll, which is horrible UX.

I'm sure we could muck up with margins, but it's just as simple to get page size right: just add size: x y; to the style in @page you use and it'll come out alright (for the remarkable2, the screen size is supposed to be 188mm by 246mm, with a resolution of 1404 by 1872px (ratio doesn't match, eh). Doing full 1404x1872 px makes the font too small, but I've had good results with size: 184.5 246mm; and size: 702pt 936pt; (fits more text, mm gets converted to something in the 500s px)

I've also made the middle colon slightly wider with column-gap: 2rem; in the last .row of the FifhtAvenue stylesheet.css.

Papers with these changes look fairly good for me (also made the header smaller as so much blank space feels weird without weather; it's probably safe to ignore that part; margins are also mostly personal taste and you might be better with the original values this is just an example you'll probably want to fiddle with hence not a PR)

diff --git a/styles/FifthAvenue/stylesheet.css b/styles/FifthAvenue/stylesheet.css
index 181d56ff1505..87b400917954 100644
--- a/styles/FifthAvenue/stylesheet.css
+++ b/styles/FifthAvenue/stylesheet.css
@@ -1,15 +1,16 @@
 @page {
-    margin-top: 0.5in;
-    margin-right: 0.2in;
-    margin-left: 0.65in;
-    margin-bottom: 0.2in;
+    size: 702pt 936pt;
+    margin-top: 30mm;
+    margin-bottom: 20mm;
+    margin-left: 20mm;
+    margin-right: 10mm;
 }
 body {
     font-family: "Open Sans";
 }
 .header {
-    padding: 1em;
-    height: 10em;
+    padding: -6em;
+    height: 6em;
 }
 .header div {
     float: left;
@@ -93,4 +94,5 @@ figure>span {
 }
 .row {
     column-count: 2;
-}
\ No newline at end of file
+    column-gap: 2rem;
+}
j6k4m8 commented 1 year ago

@martinetd — so sorry for the delay; have been traveling and lost track of things :)

This is a great fix and renders more nicely on my device as well; would you be willing to PR this so you can collect the associated internet-points? :)