Skip to content

Add page breaks and header/footer/page number #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
NeedsAdjustment opened this issue Apr 14, 2016 · 23 comments
Closed

Add page breaks and header/footer/page number #118

NeedsAdjustment opened this issue Apr 14, 2016 · 23 comments
Labels
enhancement import / export

Comments

@NeedsAdjustment
Copy link

Native support for page breaks would be great. At the moment I'm using:
<div style="page-break-after: always;"></div> as a workaround every time I need one, but I imagine actual support wouldn't be too hard to add in?

The header/footer issue is a little more tricky. I'm not sure how to html that, but I think it depends on the pdf/html compiler that Typora uses?
@abnerlee
Copy link
Contributor

For page breaks. In typora, theres no pages. After exporting PDF, there will be pages, but <div style="page-break-after: always;"></div> should work in exported PDFs.

header/footer seems also a future for exported PDFs, maybe we can add option in printing/exporting dialog to handle this

@vassudanagunta vassudanagunta mentioned this issue Oct 21, 2016
Open
@retsyo
Copy link

retsyo commented Oct 27, 2016

how can we use <div style="page-break-after: always;"></div> in typora workspace?

@MicheleLevorato
Copy link

I'm used to add the following row:
@media print { h1 {page-break-before: always;} }
in Typora\resources\app\style\base.css

@kcpr
Copy link

kcpr commented May 17, 2017 •
edited
Loading

You can also add the following in specific file:
<style>h1 { page-break-before: always; }</style>.
Unfortunately, If You start Your document from h1, You will get blank page at the beginning of the exported file.

Another solution is to combine both options, adding <style>.page-break { page-break-after: always; }</style> anywhere in the document and <span class='page-break'/> every time You want to have a page break.
And, in my humble opinion, this one could be quite easily added as option in Paragraph or Format menu.

@abnerlee
Copy link
Contributor

For macOS, there's an option to break page for each h1 section when printing.

For other OS, currently, using CSS suggested by @MicheleLevorato and @kcpr could be a workaround

@orschiro
Copy link

Can this become a menu entry such as Insert > Page Break which inserts the HTML line of code at the cursor position?

@lloyd094
Copy link

lloyd094 commented Jun 2, 2017

I'd love this option - to have a toggle somewhere that makes these documents printable. It's a gorgeous program and makes great looking papers, but the inability to print pages makes it tough.

@abnerlee abnerlee mentioned this issue Jun 8, 2017
Closed
@lloyd094
Copy link

lloyd094 commented Jun 8, 2017

After doing some research into CSS, I found a simple trick for an instant page break:

Wherever in Typora where you need a new page, add the line: <div class="page-break"></div>.

Seems to be working for me anyways.

@abnerlee abnerlee mentioned this issue Jun 16, 2017
Closed
@abnerlee abnerlee mentioned this issue Jul 3, 2017
Closed
@Crissov
Copy link

Crissov commented Sep 15, 2017 •
edited
Loading

For manual page breaks (i.e. not before headings), you should be able to repurpose horizontal lines, i.e. <hr> in HTML and ----, ____ or **** in Markdown.

@media print {
  hr {
    page-break-after: always /* CSS 2 */; 
    break-after: page /* CSS 3+ */; 
    height: 0.1em; visibility: hidden /* make the horizontal line invisible but still affect layout*/;
  }
}

@haribo256
Copy link

Any idea on whether this is being considered? and what priority it is?

This is the one feature that would sincerely help when handing over our beautiful Markdown documents over to non-Markdown people via the export.

@abnerlee abnerlee mentioned this issue Dec 18, 2017
Closed
@abnerlee abnerlee mentioned this issue Jan 27, 2018
Closed
@banderlog
Copy link

All this dances with custom css styles for such basic thing as a pagebreak are look like a bicycle full of crutches.
It is a very nice markdown software and pagebreake insertion shouldn’t be harder, for user, than table insertion. But at this moment it is)

@osamimi
Copy link

osamimi commented Mar 9, 2018

@Crissov

I tried adding the hr CSS to my base.user.css in the themes folder but it did not make any difference.
I am using 0.9.9.12.5 on mac. Any ideas?

@rolfw rolfw mentioned this issue Mar 27, 2018
Closed
@mrclrchtr
Copy link

http://support.typora.io/Page-Breaks/

@Crissov
Copy link

Crissov commented Apr 5, 2018

@banderlog It should work, if I’m not missing something. Note: there used to be a typo in my example code.

@banderlog
Copy link

Yes, it works. But, let's imagine, that I have a long document with plots and tables and text. And I do not want to page-break after each #h1.

Maybe, sometimes, I want page break after certain #h2 or after dome plots (not all). And I want to see such places before pdf compilation, as long as it is WYSIWYG editor.
Or, at least, do such stuff as in other editors -- insert LaTeX's \pagebreak, at the minimum it is just one word. Instead, I must every time mess with css styles. Not cool.

@Crissov
Copy link

Crissov commented Apr 9, 2018 •
edited
Loading

Well, I suggested to use hr for manual or forced page breaks. You can also suggest preferred page break opportunities for headings etc.

@MicheleLevorato
Copy link

MicheleLevorato commented Apr 10, 2018 •
edited
Loading

I suggested to use hr for manual page breaks

It looks way more semantically appropriate than H1. This option has my vote.

@abnerlee abnerlee mentioned this issue Apr 20, 2018
Closed
@abnerlee abnerlee changed the title Add page breaks and header/footer Add page breaks and header/footer/page number May 13, 2018
@j3ffwilcox
Copy link

j3ffwilcox commented Aug 27, 2018 •
edited
Loading

+1 for header and footer support for export. This is really the only missing feature keeping me from switching our doc system to use Typora. We need to be able to produce PDFs with a boilerplate footer for document release and there really isn't any way to do that at the moment.

We use Word today, but having a documentation flow that plays nice with text repositories like Git is a huge win. There are a few other small missing features that are nice to have, but this one little feature is really standing in the way unfortunately.

@Epandudev
Copy link

Just follow the below table structure.No need to write more css this works in all browsers include.this is working for me lets try.If you want to add page numbers you can add but it works only in firefox.

<!-- place the header part here-->
<thead class="report_header_Mh">
  <tr>
    <th class=""> <div class="header_info_Mh"> </div>
    </th>
  </tr>
</thead>
<!-- Header Ends here--> 

<!-- Place the Main Content here-->
<tbody class="report_content_Mh">
  <tr>
    <td class="report_content-cell_Mh"><div class="main_Mh">
        <table border="0" cellpadding="2" cellspacing="0" width="790" align="center" style="margin: auto">
          <tbody>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          	<tr><td>
          		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          	</td></tr>
          </tbody>
        </table>
      </div></td>
  </tr>
</tbody>
<!-- Main Content ends here--> 

<!--Place Footer content here-->
<tfoot class="report_footer_Mh">
  <tr>
    <!--<td class="report_footer_cell_Mh"><div class="footer_info_Mh">
        <div class="report_footer_counter_Mh" style="text-align: center"> <span style="float: right" class="foot-F-Size"> SAF - NM</span> </div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="text-align: center;"><em class="foot-F-Size">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</em></td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div></td>-->
  </tr>
      <div class="footer-container">
    <div class="footer-widget">
        <b>FooBar Company Name</b>
    </div>
    <div class="text-align-right">
        <span class="page"></span>/<span class="topage"></span>
    </div>
</div>


<!-- Footer Ends here-->
<style> thead.report_header_Mh { display: table-header-group; } tfoot.report_footer_Mh { display: table-footer-group; } table.print > tbody > tr { page-break-inside: avoid; } tabel.report_container_Mh { page-break-after: always; overflow: clip } /*For page numbers it works add these properties in print media*/ .report_footer_counter_Mh:after{ counter-increment: Page ; content: "Page " counter(Page); text-align: right; z-index: 20px; } </style>

@marksugar
Copy link

When I was writing a large-scale article, I also encountered such troubles. However, time has passed so long, it seems that this issue has not made much progress. If you can, in addition to the question here, can add a watermark function!

Thanks

@abnerlee abnerlee mentioned this issue Mar 22, 2019
Closed
@jiuxiaxixi
Copy link

For page breaks. In typora, theres no pages. After exporting PDF, there will be pages, but <div style="page-break-after: always;"></div> should work in exported PDFs.

header/footer seems also a future for exported PDFs, maybe we can add option in printing/exporting dialog to handle this

is that support now?

@nohackair nohackair mentioned this issue Oct 28, 2019
Closed
Crissov added a commit to Crissov/wiki-website that referenced this issue Nov 16, 2019
@Crissov
Update 2017-09-20-Page Breaks.md
199265d 
Exhaustive overhaul, partially build upon feedback in typora/typora-issues#118
@Crissov Crissov mentioned this issue Nov 16, 2019
Merged
@abnerlee abnerlee mentioned this issue Aug 23, 2020
Closed
@abnerlee
Copy link
Contributor

supported as https://support.typora.io/Export/#header--footer

@knennigtri
Copy link

Is there an easy way to target header/footer created with a yaml file now? This would be nice to move the header footer/footer left/right and changing the font.
Is there a class name we can use?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement import / export
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests