Tav, I’ve been asked to build a page to house an annual report for the NGO that I volunteer at.
I’m using Sidebar within full screen Section Pro sections.
It works fine on both desktop and mobile devices and the “client” loves it.
My problem?
The page needs to saved as a PDF so that interested parties can download it.
When printing or saving to PDF, the right hand column of each section is printed above the left hand column.
Is there a workaround that will rectify this?
It was actually designed to do that in order to retain the consistency with Foundation columns.
I am, however quite happy to change it so that printing follows desktop layouts exactly. I will do that tomorrow.
What’s the logic behind the Foundation columns?
I look forward to the changes!
I think it came about for a couple of reasons:
Firstly, if you wanted forms or layouts that were columnar in printable documents (which usually tend to be things like invoices, tickets, booking information etc) then they would have been constructed using tables and not columns and so would print as per their desktop appearance.
Secondly, with anything other than 2 columns, it is likely that it would become unreadable or overflow the page margins unless it was stacked as a block. By necessity, a framework has a set of rules that are more general and so the “lets stack all columns on mobile” was probably the best solution (especially given point one above).
I need some further input from you.
Changing the restriction of the media query from screen to all may not behave as you expect. When you print a document, a width controlled breakpoint targeting all will print however it is displayed on screen - i.e. a direct facsimile. Is this what you want? To be clear, if you have a wide browser and an extra large layout enabled in sidebar then this will be replicated in print when you press print.
Conversely, if you need to define a completely separate layout for print then this would need an entirely separate media query and its own settings. Bootstrap 3 used to get around this by using the XS settings for printing which was almost universally unpopular.
This method, of course, requires knowledge of the size of the media on which it is to be printed. This is more suitable to invoices / tickets etc where you are always printing to the same sized paper in the same orientation and the end user does not have any ability to change this
It all really depends on how you want it to work in practice.
Trying to get my head around the implications…
My layout has two columns. Currently the right column prints above the left column regardless of the VP width — which doesn’t enable a readable flow.
What I had expected is that — as with the mobile break, the print flow would be vice-versa.
If the columns were printed beside each other, that would also be acceptable. It would result in smaller print, but that can be compensated on a larger screen as is nowadays more usual
If it helps, here’s a link to my proposed design:
https://sandbox.rjh-webdesign.com/report/
The stacking order can now be matched to follow the desktop - I’ve already noticed that error and fixed it regardless of the above discussion.
Having seen that layout, I would say that it could work either way. The safe bet is to stack it for print - this will ensure that everything is readable - remember that font scaling will not necessarily be the same for print as for screen width.
Alternatively, if you trust users to be given the choice, we can make it follow the desktop layout and they can print whatever layout is visible in the browser when the print menu is selected. This has the advantage that the fonts and sizes of other elements will also work.
You’re kidding — right?
Trust the user??
Users are [in general] morons who have no idea what they want!
No, one up / one down would be just fine!
The safe bet – Stack for print is surely the best option.
Font scaling is of no importance whatsoever.
Most users would expect it to print as it appears on their screen but that is neither here nor there. They would get a pretty horrible and unreadable result printing it landscape if it all stacked automatically. Given that you don’t know the media size or orientation that they are printing on then I don’t really see how you can make a rational decision on it other than to leave it to the user.
If we want to enforce the small (stacked) layout for print (always) then we need to duplicate pretty much all of the code as it will have to go into a separate media query. We cannot use the all or screen targets for our queries due to the way that the flex box ordering works.
In such instances, my recommendation would therefore to use a simple Foundation column or Grummage which will do this by default.
Otherwise, I have DM’d you a revised SideBar that uses all rather than screen and so will stack in the order as per the stack settings but follow the layout of the browser when printed.
There are no easy answers to this without creating a dedicated page to print from with option buttons for users to select portrait / landscape etc.
55555
(the Thai word for “five” is “ha”!)
Thanks Andrew, I’ll be sure to use the revised version on this page.
Your help is (as usual) much appreciated!