Horizontal overflow not disabled when printing with a third-party preview theme

gogdizzy_dizzygog · April 16, 2021, 4:06am

In preview, the container of code snippets are scrollable.

However, export to pdf, the code is truncated

I have to to this:
1> export to html
2> modify html content to below

.mde-preview pre > code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  **word-break: break-all;**
**  white-space: pre-wrap;**
  background: transparent !important;
  border: 0;
}

3> use chrome, convert html to pdf

Can we have an option to do this automatically? Thanks.

craftzdog · April 16, 2021, 8:54am

Hi Gogdizzy,

Thank you for the report.
That’s weird. The behavior you’d expect should work fine in exported pdfs.
I confirmed that word-wrapping works well:

So, I can’t reproduce the issue. What is your environment?

gogdizzy_dizzygog · April 16, 2021, 10:26am

OS: macOS Mojave 10.14.6
InkDrop ver: 5.2.1
And with plugins:

Maybe any plugin conflict?

gogdizzy_dizzygog · April 16, 2021, 10:32am

I closed all plugins but ‘export-print’， and export to pdf still not ok，result is

craftzdog · April 17, 2021, 8:04am

Thanks for the information.
Do you use github-markdown (built-in) for preview theme?
It already has a CSS for print like so:

@media print {
  .mde-preview table {
    overflow: hidden;
    word-break: break-word;
  }
  .mde-preview pre > code {
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

Nicole_Daniella · April 17, 2021, 1:33pm

I have run into the same issue, didn’t know that the theme played a role in that. Just checked again and can’t reproduce it.

Currently using:

Dracula Dark UI for UI Theme
Horizon Dark Syntax for Syntax Theme
Dracula Preview for Preview Theme

Don’t remember which themes I used when I ran into that issue. However, can confirm that it also happened on my end.

gogdizzy_dizzygog · April 19, 2021, 7:36am

Thank you.
Yes, the Github-Preview is OK.
I used Colorfi preview before. because i think colorfi is very beautiful.

gogdizzy_dizzygog · April 19, 2021, 7:47am

I followed the doc, copy the css code to “~/Library/Application\ Support/inkdrop/styles.less”
It works.

Now I can use Colorfi preview and export to PDF with wrapping.

craftzdog · April 20, 2021, 3:03am

Looks like the style should be built-in to the app itself! I’ll fix it in the next release.
Thanks again for reporting, @Nicole_Daniella and @gogdizzy_dizzygog

craftzdog · May 5, 2021, 1:50am

Fixed in v5.3.0🎉 Thanks again for the report.

Anagh_Kumar_Baranwal · October 15, 2021, 6:43pm

This seems to be happening again.

App Details:

Version: 5.4.3

I have tried both the Github Preview & Colorfi Preview just to be sure.

craftzdog · October 18, 2021, 6:31am

@Anagh_Kumar_Baranwal Thanks for reporting.
That’s weird. I tried to reproduce it but works fine like so:

Anagh_Kumar_Baranwal · October 18, 2021, 7:15am

I don’t know what to say then.

Do you want me to check anything specific? Or give you specific config files?

craftzdog · October 18, 2021, 7:41am

Can you give me an example Markdown?
Also, please try disabling other plugins.