CSS question: extra page when printing

,
#1

I’m trying to print some tiddlers as single pages. They fit well on the page (at least on U.S. Letter size – 8.5"x11".) But when I print, there is always an extra page, a blank one. This wouldn’t bother me if I was doing a single print of them, but the idea is to have users print out the one or two tiddlers that concern them, and for tidiness, if nothing else, I would like to avoid that extra page. Any suggestions as to how?

An anonymized version of the page is at http://scott.sauyet.com/Tiddlywiki/Demo/Postcards/v1/.

If you choose one of the main tiddlers (“Group One” - “Group Twenty-one”), close others and then bring up the print dialog, you will see the reasonably formatted first page, followed by a blank page. It’s that blank page that’s bothering me. I’ve tested in three browsers in Ubuntu and four in Windows. They all have the same behavior.

This is part of a political campaign, getting volunteers to write postcards to others in town in support of a candidate for the state legislature. But I expect to use the template in the future for other campaigns, so I would really like to get this right.

The only custom CSS is in the small $:/_/my/styles/css, and presumably the only relevant parts are:

@media print {
  .tc-subtitle, .tc-tags-wrapper {display: none;}
  .tc-tagged-PostcardGroup {break-after: page;}
  .tc-tagged-PostcardGroup:last-child {break-after: auto;}
}

That last line is a left-over from one of many attempts to fix this. I’ve tried avoid and auto. And I’ve skipped that line. None of this helps. Is there some other way to do this?

Is there something else I should add to the first line, some invisible-but-space-occupying bit of the story river that I should set to display: none? Any other ideas?

This may well be a plain CSS question, and not really TW-specific, but I think the folks here are more likely to understand the setup and have reasonable suggestions. However, if you think there’s a better place to post this question, please let me know.

#2

At the bottom of each tiddler, add this:

<span>This page intentionally left blank</span>

:stuck_out_tongue_winking_eye:

Otherwise, try setting:

.tc-tiddler-frame { height:99%; }

Or whatever hosting element you see fit to control it.

Source:

1 Like
#3

Thank you. That didn’t do it. I did not mention nearly everything I tried before asking, but that stackoverflow page was one of my sources of things to try. I tried everything that looked relevant and a few that didn’t. Arrggghhhh!

This is not a big deal, but it bothers me that I can’t find it.

I think I’m going to have to go with your other brilliant solution:




(This page intentionally left blank)

Thank you!

#4

Well, in that case, why not take this css-purist approach:

.tc-tiddler-frame::after {
   content: "This page designed to waste a little more ink.";
}

Sorry. I’ll stop now.

#5

Okay, serious hat on…

Open the inspector, insert an element beginning at the bottom of the “page” (I assume that’s near the end of div.tc-tiddler-frame?)

<span>This should be on page 1</span>

Notice: inline, not block. We don’t want our debugging to mask/hinder/exacerbate the problem.

Where does that print? On page1 or page2?

Now move it, up or down, depending on where it printed last.

The point, if it’s not clear: can you identify (or get close to) which element is triggering the page break?

btw, does print preview show the same issue?

#6

Thank you. That is very similar to the process I’ve been doing. But mostly I’m just using the inspector without any new markup. I just wouldn’t know where to put the markup. If it’s inside the tiddler frame, then by design, it will be on the first page. If I put it after, then break-after: page will require it to be on the following page. I’ve been making all sorts of element display: none but have yet to find the right one. I’ve been removing padding and margins, to no avail.

This is not a big deal. I can certainly live with the current behavior. I was mostly hoping that someone had seen it before and could point me in the right direction. Or that someone who prides themselves in their CSS skills would find it an interesting challenge.

But now I’m going to try the best problem-solving technique I know: sleep.

Maybe with fresh eyes this will seem straightforward.

Thank you very much for your suggestions. I’ll probably try some of them again tomorrow.

1 Like
#7

That’s why I favor my approach. Step back from that until you’ve found something tangible to focus on – then target that.

And looking at the broader issue, once you have a solution, lots of people are going to thank you when you post on SO or elsewhere.

#8

How about breaking after the name-list.

@media print {
  .tc-subtitle, .tc-tags-wrapper {display: none;}
  .claimant-web {display: none;}
  .claimant-print {display: block; text-align: right; font-size: 150%;}
  .name-list {break-after: always;}
}
}
#9

You need to hide all the elements that come after the .tc-tiddler-frame

For me this @media print works.

@media print {
  .tc-subtitle, .tc-tags-wrapper {display: none;}
  .tc-tiddler-frame {break-after: page;}

   p:has(.tc-drafts-list),
   .story-frontdrop,
  .tc-alerts,
  #styleArea {outline: 4px solid black; display:none;}

  .claimant-web {display: none;}
  .claimant-print {display: block; text-align: right; font-size: 150%;}
}

First I did add outline: 4px solid black; to the elements, that follow .tc-tiddler-frame, so I could see, if they will be printed. → They where.

For testing, you can remove the display:none; from those elements, so you can see them printed on the last page.

have fun!
mario

#10

Thank you! This works brilliantly when I am only printing a single page. And that is all I asked for. But some users will have two groups (maybe even more) and if I open both of them, it includes the second group’s header on the first page.

I don’t understand why it works for the single-page though. Next, I respond to @pmario’s answer, and that one I understand. For this technique, why do the elements that are giving me a problem so far—the ones which Mario points to—disappear when I break in this manner?

Thank you. Clearly I had a blind spot, thinking that anything I had to deal with must be in the story river. While I had tried some of these anyway, I had not even considered that there might be as many as four separate elements causing this headache. I don’t think I ever tried more than two at once. I hope I’ll never make that mistake again!

I’ve posted an updated version with this fix at

http://scott.sauyet.com/Tiddlywiki/Demo/Postcards/v2/

Thank you very much, @CodaCoder, @john.edw_gmail.com, and @pmario! I was planning on taking a fresh look this morning, but I really wasn’t looking forward to it, as I felt like I’d looked at everything. It’s great not to have to.