9

I can not seem to find a consistent method to create a page break that will work across word, internet explorer and chrome.

The following example (from Google Chrome Printing Page Breaks) will create page breaks properly for both Chrome and Internet explorer, but does not have page breaks in word.

      <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>

After messing around with word I have discovered you can get word to add a page break with the following:

<br style="ms-special-character:line-break;page-break-before:always" />

The problem here is that internet explorer also see's this as a page break, so if you combine the methods, Chrome and Word have page breaks properly, but Internet Explorer inserts two page breaks. If you use just one then either chrome and explorer is right and word is not and so on.

Improve this question

5 Answers 5

Reset to default
4

Try this:

<!--[if IE]>
<br>
<![endif]-->
<!--[if !IE]>
<br style="ms-special-character:line-break;page-break-before:always" />
<br>
<![endif]-->

Does that fit your needs? (Note, those work in plain old html. I tested in Chrome and MS Word (along with IE) and they worked fine.)

Improve this answer
4
  • 1
    This is not really a solution because we are generating a static html page (as a report) that the user may carry around and open in any one of the browsers or word.
    – Matthew Sanford
    Commented May 8, 2012 at 16:07
  • 1
    @MatthewSanford, can't you generate a file type that will consistently open in a certain program? like a pdf?
    – JakeParis
    Commented May 9, 2012 at 1:32
  • No we need it to be editable (ie word) but we need it to be viewable for any machine.
    – Matthew Sanford
    Commented May 14, 2012 at 19:33
  • 1
    @MatthewSanford Can you clarify why this solution isn't perfect? It seems like it's portable and robust (and not dissimilar from all the other ie fixes out there)
    – Basic
    Commented May 15, 2012 at 15:18
1

This is a difference between IE8 and IE9 (provided IE9 is in standards mode), so you need to differentiate between those browsers somehow - either with a conditional comment, or a CSS hack such as this:

div.page:not(.dummy)
{
    page-break-after: always;
    page-break-inside: avoid;
}

(Tested in Chrome, Firefox, OpenOffice Writer [hopefully an adequate substitute for Word] and IE 7,8,9)

For protection against browsers that both apply page breaks on br and understand :not, you could add this, though I don't know of any browser that needs it:

br:not(.dummy)
{
    page-break-before: auto;
}
Improve this answer
0

Put the relevant CSS in !IE conditional comments. Everything else can be left as it is.

<style type="text/css" media="print">
<!--[if !IE]>
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
<![endif]-->
   </style>

Explorer treats everything between <!--[if !IE]> and <![endif]--> tags as comments and Word won't react to it. All other browsers will continue to display as before.

Improve this answer
0

I know posts like that can cost me, but, seriously, back off a step and reconsider what you are trying to accomplish.

A user who can view and print your report using Word also has IE available and most likely has easy access to Chrome. So my guess is Word is not just for viewing and printing, but especially for editing.

I followed your example and my (unmodified in every aspect) IE9 will not print page breaks inserted using Word 2010 and the resulting HTML-document has hardly any resemblance with the initial one, especially the DIVs are gone, so assuming the document still prints the same after Word has had its say is almost carelessly optimistic.

This entire idea seems broken:

  • writing HTML your way seems pointless given what Word does with it
  • even a recent IE can't handle your simple example with page breaks inserted using Word
  • when saving Word created a language setting specific directory and three new files, which spawn a ridiculous big host of necessary tests for any product
  • a lot of user knowledge (spawning directories, how to save correctly, how to copy the entire document correctly) seems required to make this work even within a static Microsoft eco-system
  • it appears user defined settings can easily break any solution employing HTML

I'd suggest initially writing your report as a Word document. Even though zipped, Word documents are still markup like HTML so if you already can generate HTML, you can generate Word with little extra effort. As you can get Word viewers for virtually every x86 or ARM based device that seems a more reasonable direction than exploring in a direction where even the simple examples fail.

Improve this answer
2
  • Yes, writing reports in Word is tricky and frail. :-) For documents I want displayed the same, no matter what platform the user is currently on, I use a format that was invented for exactly this purpose ... <!--[if IE]> is really one of the worst things ever invented by Microsoft. It's basically a label saying "this code will produce by far the most bugs, risks and work over the next years".
    – user1129682
    Commented Nov 4, 2014 at 14:26
  • I am currently in a similar situation and have to defend Matthew. No developer in their right mind would voluntarily choose such a tricky and frail sollution without very good reasons behind it. For us, these reasons are: (1) the ability to open a software-created document on any computer running any OS without installing any software (that leads to HTML as file format), (2) consistency with the user experience of older versions of our software that targeted MS Word and (3) giving those users who are well-versed in text processing the chance to add individual data to the document.
    – Elmy
    Commented Nov 4, 2014 at 14:28
0

One more addition that might be helpful to some people handling this type of issue: the change applies to block element only. In our old test, someone coded a block using 'span'. I tested multiple times and couldn't get the Vreality's solution to work. Then I thought maybe it's because span is not a block element, so add 'display:block' to element that are not block element by default.

Another thing: I'm using the latest Chrome (v.25), the "page-break-inside: avoid;" fix seems no longer needed.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.