2

I am trying to emulate A4 page for a given HTML document. Basically I am trying to create very basic version of Google Docs for a custom document format. This document format has also footer,header and page margins. I have found this question which is very similar to what I am trying to achieve. However, no matter how I change the padding, it doesn't leave same space at the bottom as the top one. I attached the screenshot of a layout I am trying to achieve and my current HTML.

As you can see from the JSFIDDLE link, my content doesn't divide to 2 pages. If I change padding size, it leaves a weird spaces on top, but bottom one doesn't have much spaces as the top one.

JAVASCRIPT

<script type="text/javascript">
var max_pages = 100;
var page_count = 0;

function snipMe() {
  page_count++;
  if (page_count > max_pages) {
    return;
  }
  var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  console.log('Long: ' + long)
  var children = $(this).children().toArray();
  var removed = [];
  while (long > 0 && children.length > 0) {
    var child = children.pop();
    $(child).detach();
    removed.unshift(child);
    long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
  }
  if (removed.length > 0) {
    var a4 = $('<div class="A4"></div>');
    a4.append(removed);
    $(this).after(a4);
    snipMe.call(a4[0]);
  }
}
$(document).ready(function() {
  $('.A4').each(function() {
    snipMe.call(this);
  });
});

</script>

JSFIDDLE

https://jsfiddle.net/t2u7v0mq/

Targeted Layout

Meanteacher
  • 2,031
  • 3
  • 17
  • 48
  • 1
    On my screen this is the closest: `padding: 76.875pt 70.875pt 76.875pt 70.875pt;` however this will depend on the font, fontsize, padding between rows, and a lot of multiple things. The standard MS word also doesn't have the same padding size for all kind of variate (of the above mentioned stuff). – golddragon007 May 24 '19 at 12:38
  • @golddragon007 The problem is when content gets larger, it doesn't leave enough space on the footer. Try to edit my JSFIDDLE and see what I mean. I am looking for better js code to divide the content correctly. JSFiddle supposed to have 2 pages instead of one with equal footer and header. – Meanteacher May 24 '19 at 15:03

0 Answers0