Back to Feed
article 3m read

One card added to a one-page print sheet, then the page kept shrinking to make it fit

A new training card pushed my staff schedule's print sheet past one page because nothing counted the title, padding or gaps, and most of my commits answered with thinner margins and a multiplier that shrinks even pages that already fit.

Article DepthPractice

bar chart

Print size of a page that already fits

Made-up round numbers, not measurements: one multiplier of about ninety percent, then a second small cut stacked on top.

Flow

Adding a card to a one-page sheet

Only the steps this post covers, in the order I'd take them.

  1. 1Count the overhead

    The title, padding and gaps use page height too.

  2. 2Size against the column

    Cards take a share of their column, not of the window.

  3. 3Add it to shared rules

    The new table joins the shared table styles and the text-shrinking step.

  4. 4No extra multiplier

    Let the measured ratio decide how much to shrink.

  5. 5Leave the margin alone

    Printers can't print to the edge, so the margin can't absorb an overrun.

The print sheet from my staff scheduler is one landscape page: the schedule on the left, a tip tracker and a chore list on the right. I added a small training log under the schedule. After that, my commits read like a fight to get the sheet back onto one page, and most of them changed the output instead of the sizing.

The page was overbooked from the start

The schedule card was sized as a share of the browser window, and so was the new training card. Together they took up nearly the whole window. But the page also has a title, some padding and a gap between the cards, and none of that was counted. A one-page layout is a budget. This one was overspent before anything else ran.

The script that shrinks the page

Before printing, a script sizes the table rows, adds blank rows to the chore list, shrinks text that doesn't fit its cell, and then measures the page. If the page is taller than the window, it scales everything down by that ratio. Measuring is a good idea, since the browser knows the real fonts.

Margins and a multiplier

Two settings only ever moved one way across the day's commits. The page margin got smaller, then smaller again, and in one version went to zero. The measured ratio got multiplied by a constant of about ninety percent, and some commits stacked a second small cut on top.

On top of the measured ratio sat a made-up constant of about ninety percent.

The ratio already says how much to shrink. A constant on top either wastes paper or hides a real error. And since scaling only happens when the ratio is below one, a page that fits exactly gets pushed below one and shrinks anyway. As I read it, a sheet that needed no help comes out smaller, with blank paper at the bottom.

The margin has its own risk. Printers can't print right to the edge, and CSS can't change that. At zero margin, the printer may cut off part of a table.

Splitting the column instead

Two of the commits rebuilt the layout properly. The cards on each side now take a percentage of their column instead of the window. The column is whatever is left after the title and padding, so the cards only split space that really exists. The two right-hand cards each take half their column, minus half the gap.

The new table also had to be added to the shared table styles and to the text-shrinking step.

Next on my list to untangle: the training table borrows the chore list's row height, so changing one will move the other.

Keep reading

Pick up a connected idea or branch into a nearby one.

5 paths forward