Printing the preview in portrait mode

Hello!

I would like to print letters directly from Tinderbox. I envision this process by capturing the data for the letter through attributes and writing the actual content of the letter in the note. This way, content and form remain separate. For the design and printing of the letter, I would position the elements using CSS. I know that this approach is more cumbersome than designing the letter directly in the note, but I definitely want to prevent elements (address field, sender field, logo, etc.) from shifting. This can be achieved with CSS because content and form are separated. I donā€™t want to use a word processor because the data in the letter should be linked to other data in Tinderbox.

My problem and question:
I canā€™t print the finished letter because it only displays in landscape format. How can I print the preview in portrait format?

Best regards!

As is generally the case in Macintosh software, choose File ā–ø Page Setupā€¦ to adjust print settings before printing.

Thats is, what I also thought, but unfortunately, that does not work:

It also doesnĀ“t matter, which of my printers I choose or if I export it to pdf.

Thatā€™s interesting: Page Setup works as expected for the text pane, but not, it seems, for the Preview Pane. Iā€™ll take a look.

1 Like

BTW, Iā€™d love to see your approach here. Are you putting the CSS and other elements directly in the note, or are you using the templating approach?

Have you seen our meetup for earlier the month on email management, while not a letter the methods are similar: Tinderbox Meetup Sunday, 15 Sept 2024 (Video): Emailing, Templates, Includes, CSS. Also, if you integrate Pandoc into your workflow, you can easily export you ā€œletterā€ to a word file.

1 Like

Hi Michael,

To keep content and design separate, I use a css-template. I also find this clearer, especially when writing multiple letters.
I know that Tinderboxā€™s strengths donā€™t lie in functioning as a word processor, but if you want to use the other data in the TBX for the letter, then the slightly cumbersome process is worth it. Once the letter is finished, it is exported as a PDF, sent, and filed in DevonThink - at least, thats the plan. It just needs to be possible to export the document in portrait format. Itā€™s great that Mark is looking into it.

I havenā€™t watched the Meetup video you mentioned yet, but I will. In general: Your tutorial videos are great! Iā€™ve learned a lot from them. At this point, I just have to say: Thank you!

Regarding Pandoc: I tried using Markdown and integrating Pandoc, and I watched one of your videos for that. But the video is missing the part about how to actually get Pandoc into Tinderbox, meaning how to select it. In the video, itā€™s just there, but in my Tinderbox, it isnā€™t. Thatā€™s why I havenā€™t done anything with Markdown or Pandoc yet. But maybe that will be explained in the Meetup.

Pandoc is a separate command line app that needs to be installed. Once it is installed you can then call the commandLine and pass Pandoc, using exportedString, the test to create a word file. If youā€™re interested, maybe this is something we can review once Iā€™m back from my travels.

1 Like

Iā€™ve been dealing with this very issue recently where I didnā€™t have the time or frankly the cognitive capacity to deal with Pandoc and html2pdf like fixes

I export to html in the usual way and use the following in the css to force control + P in the browser to print in portrait.

@media print {
/* Set the page size to A4 /
@page {
size: A4; /
A4 paper size /
margin: 0; /
Set margins to zero for full use of A4 size */
}

/* General print styling /
body {
margin: 0; /
Remove default body margins /
padding: 20mm; /
Optional padding to create a margin-like effect */
box-sizing: border-box;
}

/* Ensure content fits A4 size exactly /
.print-container {
width: 100%;
height: auto;
page-break-after: always; /
Forces a new page after each section */
}

/* Style headers, footers, and other elements as needed /
header, footer {
display: none; /
Hide headers and footers if not needed */
}

/* Adjust font sizes and other print-specific styles /
h1, h2, h3, p {
margin: 0;
line-height: 1.2; /
Adjust line height for better print readability */
}
}

Iā€™m on my IPad at the moment but happy to post my tbx file later if you canā€™t get it working

1 Like

Hey Mark,

it works! :+1:

I get a nice and clean html-page which i can now print in portrait mode. That is a nice workaround. Thank you very much!

By the way: I like your website-generator, you have posted 2019 in the forum. I use it as the basis for my website and it helped me very much, to understand how the export-process with Tinderbox works.

I have now installed Pandoc and it runs on the commandline. I have also installed MacTex and it works fine and Pandoc is able to generate nice pdfs with it - on the commandline. But I can not get it to work in Tinderbox.

I you know a step-by-step guide or video how to make it work, that would be great.

Iā€™ve located the issue, and the portrait/landscape settings from Page Setupā€¦ should be respected in the next backstage release.

On pandoc, the master builder is Michael Becker, but heā€™ll be in Bhutan for a couple of weeks. The key is the runCommand action: runCommand(command_line, input)

1 Like

Hey @eastagte

Iā€™ve located the issue, and the portrait/landscape settings from Page Setupā€¦ should be respected in the next backstage release.

Thatā€™s great! That reminds me, I need to do an update again. Thanks for your work!

On pandoc, the master builder is Michael Becker, but heā€™ll be in Bhutan for a couple of weeks.

Bhutan sounds exciting. Iā€™d love to go there someday.

The key is the runCommand action: runCommand(command_line, input)

IĀ“ll try that. Thanks!

My pleasure, glad it worked

BTW, your post got me motivated to get the PDF conversion in my workflow working. :slight_smile: I can show everyone what I did once I get back from the Bhutan Inovation Forum and my Trek.

BTW, on this front, here are several posts Iā€™ve made about this adventure (Iā€™ve had several conversationss about Tinderbox as the ethos of Tinderbox aligns with grounded ideas in the management of self-sovereign identity principled public-private good infrastructure:

  1. Arriving, Dr. Michael Becker on LinkedIn: #bhutaninnovationforum #selfsovereignidentity #privacy #bhutanā€¦ | 14 comments
  2. Trek up to The Tigerā€™s Nest, Dr. Michael Becker on LinkedIn: #bhutaninnovationforum #digitalidentity #digitalidentitywalletā€¦ | 31 comments
  3. Day 1 of the forum, and the His Magesty the Kingā€™s opening ceremony, Dr. Michael Becker on LinkedIn: Bhutan King Graces opening ceremony of 3-Day Bhutan Innovation Forum
  4. Some fun pics, Dr. Michael Becker on LinkedIn: #bhutaninovationforum
  5. Amazing announcement from Bhutan NDI, Dr. Michael Becker on LinkedIn: #selfsovereignidentity #papuanewguinea #partnership #intrapreneurshipā€¦
  6. Learn more about Bhutan NDI in the Oct. 15 webinar, Dr. Michael Becker on LinkedIn: Bhutan Webinar.

Tinderbox has been central to my note-taking at the event, as well as the drafting and management of all my social posts (Iā€™ve created some killer action code and templates to automate hashtags and anchor mentions while creating atomic note assets in the processā€”maybe another meetup for another day). I canā€™t imagine doing my work now without Tinderbox and the satellite of tools in its orbit.

That sounds exciting. Iā€™m looking forward to it!

I do similar for my aTbRef export to print chain. In the TBX, I have 4 CSS files:

aTbRef-10.tbx 2024-10-03 10-05-19

The ā€˜stylesā€™ file is only used for the main aTbRef website. The other three are only used for exporting the document to a single [sic] styled HTML page. The export template calls them thus:

<link rel="stylesheet" href="^root^css/pdf-screen.css" type="text/css">
<link rel="stylesheet" href="^root^css/pdf-manual.css" type="text/css">
<link rel="stylesheet" href="^root^css/pdf-print.css" type="text/css" media="print">

Note the media="print" in the last case, meaning those styles are only used when printing, including ā€˜printingā€™ direct to PDF as opposed to paper. The use of media types is a standard behaviour within CSS though little /seen used as most HTML pages are never printed.

For anyone going so far as to view the above in Tinderbox there is some duplication between the 3 print css files. Per CSS styles are set in the order generated (i.e. order discrete CSS files are loaded, order within file) with the last loaded variant replacing any previous build-in or already-loaded definition. IOE, is all the files defined a different body text font, the last loaded would be the one used. An exception is use of CSS media directives where the style is only applied/altered for then media type, e.g. print vs screen display. Anyway, the duplication is partly an accident of birth. If I used PDf/print a lot iā€™d probably de-dupe more but for now it all works.

Perhaps the main print-related part, apart from on-page typographic styling are the page-break-before andpage-break-after codes which as the name implies alter the screen-to-page pagination process to give clean breaks around headings. There are also orphans and widows print CSS selectors to avoid lines breaking to or or two words or page breaks leaving only a single line from a paragraph atop a new page.

It is worth noting that to make print media CSS work you want to start with a well styled HTML page, i.e. HTML and CSS in harmony. This avoids building on sand and hard to diagnose outcomes at the later print stage. I note these as lessons I learned the hard way when first trying this approach.

TL;DR ā€” the aTbRef TBX has exportable reports built-in (templates, CSS, etc.) that employ this technique allowing you to experiment without having to build the initial scaffolding yourself. That way you can take what works and apply it clearly to your own work.

More on CSS2+ and ā€˜paged mediaā€™, with descriptions of some of the above page-related selectors: Paged media (at W3C).