Forum How do I...?

How do I expand an element to fill remainder of page?

wjdenny
I am writing a course book in Markdown, converting it to HTML+CSS with Pandoc and using PrinceXML to convert that into PDF files.

One of the things I need to write are worksheets. This usually includes a paragraph of instructions at the top, and lines for students to write on the bottom. Like the attached image.

It's a little hacky, but I can make do with just copying the element markdown in the source file (I tend to use an unordered list and list items for this) as many times as necessary to do what I need; adding or removing lines as needed.

The problem with this is that 1) I have to go through all the compile steps just to see if I have enough list items and not too many, and 2) if I add or remove even a few lines of text elsewhere in the document, I have to re-adjust the number of list items in my "writing area".

Are there any options for expanding the size of an element or copying an element to just before the point where a page-break would be necessary? Perhaps through some combination of CSS and JavaScript? I would prefer to separate the semantics of a "writing area" from the logistics of figuring out the element height or how many of them to copy.

I'm thinking a two-pass solution would be required, but I'm not sure exactly how the box tracking API works as there seems to be no documentation or way to load the module in a browser or Node.js console to explore its functions and objects.

There's two possibilities I can see (and I'm open to others, of course).
Option 1: Keep using the <ul><li> elements; I get the visual I want by using border-bottom styles. Mark them with a special class (.repeat-to-break) and create the source document with the minimum lines that I'd want on the final product. Use a two-pass solution to calculate how many more elements I would need to trigger a page break, and alter the DOM accordingly.

Option 2: Instead of <ul><li> elements, use the more HTML-semantic <textarea> element. I should be able to get the visual I want by using either a repeating background image or repeating background gradient. Then use a two-pass solution to calculate the height needed to trigger a page break and set it to one less than that.

A step beyond this should also be able to handle a paragraph that I want to keep at the bottom of the page (so, a paragraph fixed/floated to the top, and fixed/floated to the bottom, but at that point my head hurts. If PrinceXML ever implements flexbox, would that be a big help to this issue?

I'm open to any suggestions or insights. I'd like to put together a script that could be plugged into the CLI, and host it as a Github Gist for anyone else to use. Thanks!
  1. FireShot Capture 9 - - file____home_chronos_u-9fad390bd05bd12aefcc981b2127e7fe8ec2eac6_Downloads.png57.3 kB
    example of worksheet lines
mikeday
Either of your options sound workable; I can assist you with the box tracking API and have posted some details on the other forum thread.

You can use page floats to fix a paragraph to the bottom of the page, eg. "float: bottom".
hallvord
Hi wjdenny,
I have a suggestion - perhaps a bit of a hack.. but what about making a background graphic that adds lines to the parent element, then setting its height to make sure it extends to the bottom of the page? Something like this:

        section {
            page-break-after: always;
            background-image: url('lines.png');
            padding: 0;
            width: 100%;
            min-height: 230mm;
        }
        section div {
            width: 100%;
            background: #fff;
            padding-bottom: 48px;
        }
    </style>

Announcement: repos for tests/utils

  1. 3823.htm3.1 kB
    Demo
  2. 3823.pdf33.2 kB
    Here's an example PDF
  3. lines.png0.2 kB
    Example background image :)