Closed kdahlquist closed 9 years ago
Main way that this is done is to use CSS media rules (e.g., there are ways to say how something should look when displayed onscreen vs. when printed). Most frequent use is to hide/show certain elements depending on print or screen media.
Initial exploration is OK, but now we can just do print CSS for the entire website. Remove sidebar and header for all web pages when printed.
Also need to look into why blank pages are appearing at the end. Experiment: change the background color to something other than white.
Just tested beta on firefox:
So I see what's going on here, but I'm not actually fully sure how to fix it. When viewing in localhost, the graph fits perfectly on one page, though it tacks on an extra page. However, when viewing in the website, it for some reason makes the graph larger and pushes it down, causing the graph to go over two pages instead. I still am unsure why it adds on the extra page. I've tried hiding every other element on the page, and it still shows up. I've also tried restricting the height on the elements, but it still shows up the same.
Here is a graph when printed in localhost:
And the same graph when printed off the web-site. As you can see its on two pages:
Scale transforms to shrink the element also do not work. They cause the graph to appear very far to the right and push it down. As seen below when printed in localhost, it causes the graph to go onto two pages:
I'm going to continue researching, but at this point, I'm pretty stumped on why this is happening.
I've committed a fix to beta
that, on my standalone setup, eliminates the extra blank page in Chrome and Safari. For wider-ranging tests, @NAnguiano needs to refresh the published beta to see what effect this fix has "in the wild."
It seems to work fine in Chrome, but I'm still seeing 2 pages in Firefox when I view the printed page as a PDF in preview on my mac.
How does it look for you standalone? Do you get 2 pages then, or 1? It may be that more work needs to be done when the graph is framed as with github.io.
In localhost, it's 1 page in Chrome and 2 pages in firefox.
OK, that is helpful...Firefox localhost was also 1 page for me, oddly enough. Looks like more digging is called for then.
Some updates:
Another possibility: when printing, assign dimensions in inches. That should make it easier to map sizes onto paper.
So here is my report:
So with the laptop unplugged from the docking station/monitor, l tried printing again.
I tested it on three different computers and here are the results. I didn't get a chance to test any of these in Landscape mode, so all of these are in Portrait mode. Once I get access to the last two computers again, I'll check how they prnt in Landscape mode.
The first computer was a laptop running Windows 7, 15" screen and 1920x1080 resolution. On Firefox v32.0.3, it printed two pages, with the graph fully showing on the first and being blank on the second. On chrome version 37.0.2062.122, it printed a single page.
The second computer was a PC running Windows 7, 27" screen and 2560 x 1440 resolution. On Firefox v32.0.3, it printed a single page. On chrome version 37.0.2062.122, it printed a single page.
The last computer was a laptop running Windows 7, 15" screen and 1366x768 resolution. On Firefox v32.0.3, it printed two pages, with the graph cut off on the first and being blank on the second On Chrome v37.0.2062.122, it printed two pages, with the graph fully showing on the first and being blank on the second.
Approach:
If the minimum width is still active at print, could be causing the print problem (#146).
Checked the code and can confirm that there is a min-width: 1200px
attached to the iframe
displaying the graph. However I was unable to replicate the two-page printout on my copy of Firefox (tried both on my 11" laptop and bigger-screened desktop), so chose not to proceed because I wouldn't have been able to check whether things worked.
The iFrame no longer has a min-width due to the bounding box being fixed. While for me on all of my computers the graph now only prints a single page in both Firefox and Chrome, the graph is still heavily cut off in firefox. I used jQuery clone to create a new instance of the graph and attempted to print only that new instance, and it didn't appear to make any difference (though the arrowheads disappeared when the graph was printed in Firefox). I'm not certain anything in the iFrame is causing the problem, because the Firefox cutoff problem is also visible when attempting to print the graph through localhost.
Something weird is going on with the way firefox prints when compared to the way google chrome prints. In Firefox, the graph is shifted heavily over to the right for some weird reason. When I applied a scale transform, it became pretty obvious the difference between how they print (ignore how tiny the graph is, I applied a scale transform that shrank it a little too much):
This is how it prints in Chrome
This is how it prints in Firefox
The graph in firefox appears to be larger, centered vertically, and shifted over to the right. The graph in chrome is smaller, not vertically centered, and is horizontally centered. I'm a little stumped on where to go from here.
We two workarounds that we need to add to the documentation page:
After the change is made to the documentation, let's just close this issue.
OK--here is some language to put in the Documentation page:
Replace the last bullet point of section three with:
To print a graph, select the menu item File > Print. Mac users can utilize native print to PDF function available from their operating system to print the graph to a PDF file. Windows users will need to have the full version of Adobe Acrobat (or other "print to PDF" utility) to print graphs to a PDF file. The Print menu item is disabled until a gene regulatory network graph is loaded. There is a known bug when GRNsight is used with Firefox browsers where the side of the graph gets cut off. This is an issue with Firefox that we cannot solve at this time. There are two workarounds. First, in Firefox, go to the menu item File > Page Setup and check the box Shrink to fit Page Width. Second, you can ues the Chrome browser to print to PDF.
I went ahead and replaced the last bullet point with that text. Reassigning for review.
I just noticed that one of the sentences has an awkward phrase in it (my fault for not catching this sooner). Replace the first two sentences of that bullet point with:
To print a graph, select the menu item File > Print. Mac users can utilize the native print to PDF function available from their operating system to print the graph to a PDF file.
Just switched out those two sentences with the revised version above. Reassigning for review.
Confirmed change and am closing.
Instead of dealing with fancy export function, we will enable print function in our menu so that if the user has a print to pdf on their computer they can do it. #59