Member Avatar for Dervish1

I'm working on my first web app, and have a simple version of the application working. It allows the user to create and edit a fantasy map from a set of terrain tile images - but I can't figure out how to make it print. A print preview (and an attempted print) shows just a blank page (or a blank page with the background image), but no sign of the existing map. The map is generated as a simple HTML table with each tile being an <img>.

The application uses the dojo toolkit for organization and several utilities, so I suppose it /might/ be related to that, but I seem to get the same problem without using Dojo. Do HTML tables with no data other than a background image print at all?

  • 3 Contributors
  • 5 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dervish1

Dani AI

Generated

this is a common gotcha with Dijit BorderContainer. It positions panes absolutely and relies on viewport-sized heights; most print engines ignore that, so the center pane collapses and you get a blank page. Your <img> tiles are fine; the container is hiding them. @LastMitch is on the right track about a print stylesheet, but it needs to target print and flatten the Dijit layout.

Try a minimal print override like this:

@media print {
  /* Flatten Dijit layout so content flows on the page */
  .dijitBorderContainer,
  .dijitBorderContainer > * {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Hide editing UI, show only the map */
  #mapToolbar, .sidebar, .dijitToolbar { display: none !important; }

  /* Keep the grid together */
  #mapTable img { page-break-inside: avoid; }
}

If you prefer a dedicated print view (which you mentioned), clone the map into a clean window and wait for images to load before printing. This avoids BorderContainer entirely:

function printMap() {
  const src = document.getElementById('mapTable'); // the table of <img> tiles
  const w = window.open('', 'printMap');
  w.document.write('<!doctype html><title>Map</title><style>@media print{img{page-break-inside:avoid}table{border-collapse:collapse}}</style>');
  w.document.write(src.outerHTML);
  w.document.close();

  const imgs = w.document.images;
  let done = 0, total = imgs.length;
  if (!total) return w.print();

  for (const img of imgs) {
    if (img.complete) { if (++done === total) w.print(); }
    else img.addEventListener('load', () => { if (++done === total) w.print(); });
  }
}

Bonus checks: avoid CSS background tiles for print, and remove transforms/overflow on the map container in print. ’s screenshot shortcut helps debug, but the CSS/print-view approach gives your users a real print.

Recommended Answers

All 5 Replies

Member Avatar for Member #949455

The application uses the dojo toolkit for organization and several utilities, so I suppose it /might/ be related to that, but I seem to get the same problem without using Dojo. Do HTML tables with no data other than a background image print at all?

What CSS did you try to used?

Did you include a style sheet like this:

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

You can look at this:

http://caniuse.com/

I used that as a reference to see a list of which HTML5 & CSS3 code is compatibility for browsers. You have to understand if the browser keeps updating then more HTML5 & CSS3 code will be available to used.

Edited by Member #949455 because: grammer
Member Avatar for Dervish1

At present, it's just a very simplified style sheet. Nothing specific to printing. The page is based on a simple BorderContainer, which seemed to be the problem.

I'll give the print style sheet a try. I had been thinking I needed to make a 'printer ready' page.

Member Avatar for Member #949455

The page is based on a simple BorderContainer, which seemed to be the problem.

I have seen couple of members used dojo.

You mean this:

You might have to used this too:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*You print sheet style goes here*/
}

Have you try to used a div container rather than a html table to print out:

<div class="img">
<img src="image.jpg" alt="" width="" height="">
</div>

You can used a div container as a layout too:

<div class="Table">
<div class="TableRow">
<div class="TableLabel">This Map 1</div>
<div class="TableLabel">This Map 2</div>
</div>
<div class="TableRow">
<div class="TableCell"><img src="image.jpg" alt="" width="" height=""></div>
<div class="TableCell "><img src="image.jpg" alt="" width="" height=""></div>
</div>
</div>

For you CSS:

.Table { width: 30%; height: 50%; display: table; }

.TableRow {width: 100%; height: 100%; display: table-row;}

.TableLabel { width: 30%; height: 100%; display: table-cell; border: 1px solid black;}
commented: Not the answer, but a helpful and organized list +1
Member Avatar for MidiMagic
  1. Get what you want to print on the screen.
  2. Hit Ctrl+PrintScreen
  3. Open MSPaint
  4. Paste.
  5. Either use Print Setup and Print, or save the file as a .jpg file and then print that.
Member Avatar for Dervish1

Even with multiple variants on the print style sheet, print preview and print both generate a blank page. Print Screen, on the other hand, isn't exactly acceptable for a user (but it works!). Yes, it is a dojo borderContainer, as LastMitch pointed out. (And changing the table to use a div container was unfortunately no better).

For those who might be interested in seeing details, a minimally-functional version is at androhil.com/docs/cgi/mapedit/mapedit.php - wait a moment for the page to load, and hit print preview; the problem is obvious.

I'm beginning to think Dojo's styling of the containing divs is what's at fault. This suggests I'll need to open a separate 'print ready' window and just copy the table there. It'll take a little while, just given the amount of free time I've got.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.