Reports from our 2017 Meetings
Reports from our 2017 Meetings
This month we looked at what we needed to do to get a web page to print. It appears to be much ignored in the design world. What you need to see on the screen of a web page and what you need to see on a printed page are different. After all you can’t click on a printed page. The topic was suggested by John L who had added a “print this page” to wed design page of the Sydney PC site.
The look of a web page is determined by a style sheet and printing a page is no different it simply uses a different set of styles
To start the day, we had a look at a number of articles on how to get
a web page to print. The three main ones were,
When Visitors print ,
How to set up a print style sheet
We first discussed the ideas in “When visitors print” which asked the question “Why would you print a page?”. The answer included items like, to make notes on the margin of the printed article, to read the article with a coffee while sitting in the sun or to hand the report to a someone.
We then discussed the approaches to creating a print style sheet. You can create a separate sheet or add a media query to your existing sheet. If you do use a separate sheet you need to add a media type in the link instruction, “ media = “print”. This tells the browser that it should use this style when the client wants to print. It should look something like this,
<link href="../../../17-august/print.css" media="”print”" rel="stylesheet" type="text/css">
Adding a print instruction to an existing sheet is done by using a media query which would look like this @media print. To that code we add the items that need adjusting. An @media print may look like this
@media print{
.header {display:none;}
.aside { display:none;}
.main {display:block;}
.footer {display:none}
That brought us to the discussion on what was needed in a print style sheet.
It comes down to this simple idea, print is not screen, for example you can’t click on a printed page. The main items to consider when deciding what you keep in the sheet are navigation, headers, the main information any asides and footer. Most people would want the main information like this meeting report. The navigation would be a waste of paper as you can’t click on it. Showing a footer may depend on what information is in the footer. Asides could also fall into the same category depending on the information in it.
How to do this? Style sheets create ids and classes which are then styled by deciding what fonts, colours, margins, and sizes are used for each class or id. So, in a normal page we could have the following classes. A header, navigation, main and footer. For a printed page, we only need the header and the main. To remove the navigation and the footer we use code display : none eg nav {display : none} and footer {display : none} or you could combine them as nav, footer {display : none} Note; display none removes the element from the document while visibility hidden keeps the space on the page while hiding the content. The main would be reloaded as display block which would take up the whole of the space left by removing the nav and footer using display : none.
One thing of interest was links. While you can’t click on it, which is why you would normally not show any navigation it may be an idea to show in full any link on the page. In a meeting report like this you may want to show the links to the information sources used in the meeting. In this report, we added links to parts of a sentence. If we print it we see the words highlighted but not the link. To overcome this, we use this code,
p a:after {content: " (" attr(href) ")";font-size: 80%;}.
It is telling the browser, If you find a link in a paragraph (p) then display the content of the link on the printed page. We have also asked the browser to show the resulting link in a smaller font size.
We then had a try at putting the idea into practice by writing a print code for the reports on the site. Try printing this report to see what we took out and what we left in.
Steve South
Sig Leader