Export PDF or print support page option

Question

Export PDF or print support page option

jackxujh opened this issue 7 years ago · 29 comments

When using the export to PDF feature in Typora, it always exports using A4 Portrait, instead of using values in File > Page Setup. I don’t know if this was designed this way or it is not behaving correctly, but I think the normal practice in macOS apps is to use the Page Setup for exporting. I am using a workaround for now — first export to html, and then print the html to PDF from Safari. It would save some hassle if Typora could handle the page setup itself. Thanks!

Answer 1 · 2019-06-27T06:36:55.000Z

any plan fix this problem? the exported A4 PDF font size too large to view especially for code part with little fonts.

Answer 2 · 2019-07-18T14:53:26.000Z

I was able to set page size and margins using CSS at the top of the document, e.g.:

<style type="text/css">@page { size: letter; margin: 0.25in; }</style>

I'm not sure what other options are supported, but this worked for me to get letter size paper with a usable margin.

Answer 3 · 2019-07-18T15:57:03.000Z

That's a great hack. That CSS can also be added to one of the CSS override files -- putting it in base.user.css will affect all themes.

Answer 4 · 2019-09-11T01:05:40.000Z

I was able to set page size and margins using CSS at the top of the document, e.g.:
<style type="text/css">@page { size: letter; margin: 0.25in; }</style>
I'm not sure what other options are supported, but this worked for me to get letter size paper with a usable margin.

It seems not work on my side.

Answer 5 · 2019-09-24T17:05:37.000Z

That's a great hack. That CSS can also be added to one of the CSS override files -- putting it in base.user.css will affect all themes.

I agree. Not knowing much about coding, I put it straight into the base.use.css like so:
<style type="text/css">@page { size: letter; margin: 0.25in; }</style>
With this
}
immediately below.
But it does not work. Did I leave something out?

Answer 6 · 2019-09-24T17:20:24.000Z

If this is the only custom CSS you're using, then your entire base.user.css file should look like this:

@page { size: letter; margin: 0.25in; }

Answer 7 · 2019-09-25T04:58:32.000Z

If this is the only custom CSS you're using, then your entire base.user.css file should look like this:
@page { size: letter; margin: 0.25in; }

Thanks for your reply.
There is quite a bit more in my base.user.css
So, what I did was, below the last line of commands I left 1 blank line, then added the line as you stated. The only difference is that for size I put A4 instead of "letter".
But the output was as before, no change.

Even if I do use "letter" there is no change.

Answer 8 · 2019-09-27T17:26:46.000Z

@abnerlee : any chance to give me some guidance on this?

Answer 9 · 2019-09-27T19:06:26.000Z

Are you saying that when you use letter, you're still getting an A4 PDF?

Note that you should make the change in base.user.css with Typora closed, then open the app and create a PDF.

Answer 10 · 2019-09-28T03:09:17.000Z

@asherber : thanks for your feedback.
What I mean is that the margins don't change. I have set them at 0.1 in but they are still at about 1 inch on either side.

Answer 11 · 2019-09-28T10:51:28.000Z

There does seem to be a minimum margin applied somewhere else in the export process, but I still find that 0.25in gives me slightly smaller margins than the default. If you set it to something bigger, like 2in, you'll definitely see that it has an effect.

Answer 12 · 2019-09-28T11:22:44.000Z

@asherber : yes, you are right, setting it to 2in does make a difference. I find the default minimum too wide: the user should be able to choose.
Anyway, thanks for your patience and help.

Answer 13 · 2019-09-28T18:04:35.000Z

The extra margin is probably on the body or some other tag. Export as HTML, open in a browser, and use the dev tools to inspect a paragraph and its parents, and that should let you find where it is. Then you can add a print rule to the stylesheet to drop out that body, or else change your page margins to compensate.

Answer 14 · 2019-09-29T08:25:44.000Z

@pjeby : thanks for the advice. Unfortunately I am not technical enough to take that route.

As for "change your page margins to compensate": that does not work, as I described above.

Answer 15 · 2020-02-19T07:51:40.000Z

can't set margin too。 anyelse other way ?

Answer 16 · 2020-04-21T08:20:31.000Z

This issue troubled me quite a long time on my Mac. Nether @page Nor @media custom setting is worked for me. One day I found the PDF exported is affacted by default paper size setting of OSX Printers & Scanners. I customized a paper with 230 mm width, then the margins and font size of exporting PDF is very close to tpyora editor under github theme. Hope it works for you.

Answer 17 · 2020-06-11T11:10:04.000Z

add this into theme.css, PDF margins will be a acceptable space.

@media print {
    #write{
        max-width: 100%;
    }
    @page {
        size: A4;
        margin-left: 0;
        margin-right: 0;
    }
}

Answer 18 · 2020-08-05T09:47:31.000Z

add this into theme.css, PDF margins will be a acceptable space.

@media print {
    #write{
        max-width: 100%;
    }
    @page {
        size: A4;
        margin-left: 0;
        margin-right: 0;
    }
}

@yantanglife
I can use this to change my rendering experience within Typora by loading it from the Themes menu.
However, when exporting a PDF, the PDF still remains looking the same, just as @pjeby comment did not help in producing adapted exports on PDFs.

Is there any update on this issue?

I "just" want to export something that approximately looks the same as when I see it within Typora.

Answer 19 · 2020-08-05T10:17:20.000Z

An update.

Having some themes.css with the following content

@media print {
    html {
        font-size: 12px!important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.typora-export {
        padding: 0 !important;
        margin: 0 !important;
    }
    .typora-export #write {
        padding: 0 !important;
        margin-top: -2mm !important;
        margin-right: 0mm !important;
        margin-bottom: -2mm !important;
        margin-left: 0mm !important;
    }
}

loading it via the Themes menu, and then Export > PDF has worked for me now - the margins of the pdf are pretty narrow.

Answer 20 · 2020-08-05T12:31:19.000Z

This issue was opened almost 3 years ago, and here we are, still messing around with CSS to try to find a workaround. I wonder if Abner is ever going to tackle this properly.

Answer 21 · 2020-09-03T22:19:57.000Z

Was working with a coworker on this exact issue and it seems margins work perfectly for the windows Typora but not for mac. So there might be an inconsistency somewhere there.

Answer 22 · 2020-09-22T22:07:07.000Z

Any news on this?

Answer 23 · 2020-09-22T22:31:34.000Z

Debug mode (Help menu -> Enable Debugging, then right-click on the document and Inspect Element) suggests that Typora is using Safari for its rendering engine as of v0.9.9.35.2 on the Mac.

Safari currently doesn't support CSS' @page as suggested in earlier fixes, that may have worked with a prior rendering engine?

Putting @zecevic-matej's solution in a file named <current-theme>.user.css in Typora's themes folder works for me.

Answer 24 · 2020-10-02T15:48:17.000Z

add this into theme.css, PDF margins will be a acceptable space.

@media print {
    #write{
        max-width: 100%;
    }
    @page {
        size: A4;
        margin-left: 0;
        margin-right: 0;
    }
}

This procedure by @yantanglife works for me on Linux by putting it in base.user.css.

Answer 25 · 2021-01-20T15:34:58.000Z

2021 is the year and this is still a problem ❓
on Linux when printing with the system dialog to a pdf you get almost zero customization options and it will get incredibly small

Answer 26 · 2021-02-18T17:10:58.000Z

An update.

Having some themes.css with the following content

@media print {
    html {
        font-size: 12px!important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.typora-export {
        padding: 0 !important;
        margin: 0 !important;
    }
    .typora-export #write {
        padding: 0 !important;
        margin-top: -2mm !important;
        margin-right: 0mm !important;
        margin-bottom: -2mm !important;
        margin-left: 0mm !important;
    }
}

loading it via the Themes menu, and then Export > PDF has worked for me now - the margins of the pdf are pretty narrow.

Unfortunately, this does not help as it should be. :/

MarkText export:

Typora export:

Answer 27 · 2021-02-22T15:21:57.000Z

An update.
Having some themes.css with the following content
@media print {
    html {
        font-size: 12px!important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.typora-export {
        padding: 0 !important;
        margin: 0 !important;
    }
    .typora-export #write {
        padding: 0 !important;
        margin-top: -2mm !important;
        margin-right: 0mm !important;
        margin-bottom: -2mm !important;
        margin-left: 0mm !important;
    }
}
loading it via the Themes menu, and then Export > PDF has worked for me now - the margins of the pdf are pretty narrow.
Unfortunately, this does not help as it should be. :/

MarkText export:

Typora export:

Same here. I'm on MacOS and all the solution above didn't work for me. When I export the PDF file the margin is still very large.

Answer 28 · 2021-04-27T15:08:52.000Z

https://support.typora.io/Export/#paper-size

Answer 29 · 2023-10-16T08:21:09.000Z

Reporting success. -- I solved this via a combination of recommendations above and @abnerlee's support page link, the following successfully defines the right/left margin at 16mm in Export PDF, on Windows, as a default for all themes:

File saved to themes directory: .../Typora/themes/base.user.css

@media print {
    html {
        font-size: 12px!important;
        padding: 0 !important;
        margin: 0mm !important;
    }
    body.typora-export {
        padding: 0 !important;
        margin: 0mm !important;
    }
    .typora-export #write {
        padding: 0 !important;
        margin-top: -2mm !important;
        margin-right: 16mm !important;
        margin-bottom: -2mm !important;
        margin-left: 16mm !important;
    }
}

Whereas, the following (alone) in base.user.css did not define the R/L margins at 16mm:

@media print {
  @page {
  	margin: 25mm 16mm 25mm 16mm; 
	}
}

hth.
(Apologies if this reopens the issue, please re-close if so).