A little Benchmark and a few ideas on how to improve the output

[lukas-mertens]

Hey,

I just did a little Benchmark with a few typical things to see how good the output looks. This is my result.

Logseq PDF Export Benchmark.pdf

And this is how it looks in Logseq

As you can see, it does look way better in Logseq. But that is probably because of the way you handle printing: As far as I understand you use the native print-dialog, therefore the theme would have to use@media print CSS to style the output.

This sounds like a great approach, as it allows the result to be customizable via CSS. Maybe, however, you could add another option, which could lead to very pretty results: Chrome has a feature, which allows you to print in a wysiwyg-fashion, meaning it prints exactly as shown in Logseq. This could make it easy to render even custom elements added by other plugins.

https://superuser.com/questions/846082/how-to-get-wysiwyp-print-what-you-see-in-a-web-browser

I don't know if it is possible to access these APIs from JavaScript, but it would be very cool. You could just hide things like the menubar and we would get an output which looks exactly like in Logseq. What do you think?

[sawhney17]

I tried the approach and it wasn't really working because the print dialogue firstly printed the top bar, but more importantly only printed what was shown on screen and nothing that was shown off the screen. This is partly due to the weather Logseq handles blocks on large pages. I noticed that there was a lot of space on the top and bottom. Are you not exporting an A4?

How does the preview Windows look, as a approach I've  taken is to first convert the blocks in the page to HGML, then apply CSS and finally use the native print dialogue to print what's on the screen.

And have you selected the inherits CSS option in settings?

On 8 Apr 2022, 7:47 PM +0400, Lukas Mertens @.***>, wrote:

Hey, I just did a little Benchmark with a few typical things to see how good the output looks. This is my result. Logseq PDF Export Benchmark.pdf And this is how it looks in Logseq

As you can see, it does look way better in Logseq. But that is probably because of the way you handle printing: As far as I understand you use the native print-dialog, therefore the theme would have to @. print CSS to style the output. This sounds like a great approach, as it allows the result to be customizable via CSS. Maybe, however, you could add another option, which could lead to very pretty results: Chrome has a feature, which allows you to print in a wysiwyg-fashion, meaning it prints exactly as shown in Logseq. This could make it easy to render even custom elements added by other plugins. https://superuser.com/questions/846082/how-to-get-wysiwyp-print-what-you-see-in-a-web-browser I don't know if it is possible to access these APIs from JavaScript, but it would be very cool. You could just hide things like the menubar and we would get an output which looks exactly like in Logseq. What do you think? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.>

[sawhney17]

I believe that you can add custom CSS. You can go to plug-in settings and edit custom  CSS and other settings for the plug-in from there Including the option to inherit from your current log 16 On 8 Apr 2022, 10:14 PM +0400, Aryan Sawhney @.***>, wrote:

I tried the approach and it wasn't really working because the print dialogue firstly printed the top bar, but more importantly only printed what was shown on screen and nothing that was shown off the screen. This is partly due to the weather Logseq handles blocks on large pages. I noticed that there was a lot of space on the top and bottom. Are you not exporting an A4?

How does the preview Windows look, as a approach I've  taken is to first convert the blocks in the page to HGML, then apply CSS and finally use the native print dialogue to print what's on the screen.

And have you selected the inherits CSS option in settings?

On 8 Apr 2022, 7:47 PM +0400, Lukas Mertens @.***>, wrote:

Hey, I just did a little Benchmark with a few typical things to see how good the output looks. This is my result. Logseq PDF Export Benchmark.pdf And this is how it looks in Logseq

As you can see, it does look way better in Logseq. But that is probably because of the way you handle printing: As far as I understand you use the native print-dialog, therefore the theme would have to @. print CSS to style the output. This sounds like a great approach, as it allows the result to be customizable via CSS. Maybe, however, you could add another option, which could lead to very pretty results: Chrome has a feature, which allows you to print in a wysiwyg-fashion, meaning it prints exactly as shown in Logseq. This could make it easy to render even custom elements added by other plugins. https://superuser.com/questions/846082/how-to-get-wysiwyp-print-what-you-see-in-a-web-browser I don't know if it is possible to access these APIs from JavaScript, but it would be very cool. You could just hide things like the menubar and we would get an output which looks exactly like in Logseq. What do you think? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.>

[lukas-mertens]

Yes, I used the default settings for the templates. Inherits css is enabled in template 1, which I used.

The css to hide everything which should be hidden for printing should be:

.cp__sidebar-help-btn,#left-sidebar,#right-sidebar,#head {
  display: none !important;
}
#main-container {
  padding-left: 0 !important;
}

I then used the developer tools to set the page to an appropriate resolution by using the "responsive" feature:

You can then use the "capture full size screenshot"-function to export an image with full resolution.

This results in a screenshot like this (right now I don't have the bear theme set up in my browser and the image didn't load properly, but it should demonstrate my point):

[LarsJaeger]

I dont know what I'm doing wrong, inherit Logseq CSS as well as manually setting css for Templates does not work for me, it all looks like the following screenshot:

[sawhney17]

Try the new 4th option called print with retained formatting :)