HTML5 Level II Session II Chapter 13 - How to Work with Fonts and Printing www.profburnett.com Hello. My name is Carl Burnett and I’ll be your instructor for this session. In Session 2, we will cover Chapter 12 - How to Format Web Pages for Printing.

Chapter Outline How to Embed Fonts in a Web Page Formatting Web Pages for Printing Formatting A Two-Column Web Page with Special Formatting for Printing In this chapter we will cover how to format a web page for printing and how to format a a Two-Column Web Page for printing with Special Formatting. 9/17/2018 Copyright © Carl M. Burnett

Heading with Font Imported with CSS3 The CSS for embedding a font @font-face { font-family: Murach; src: url("HARNGTON.TTF"); } The CSS for applying the font to an HTML element #booktitle { font-family: Murach, sans-serif; } The HTML for the element that the font is applied to <h1 id="booktitle">Murach Books</h1> 9/17/2018 Copyright © Carl M. Burnett

Where to Find the Fonts On a Windows system - C:\Windows\Fonts On a Mac OS system - System\Library\Fonts 9/17/2018 Copyright © Carl M. Burnett

How to Import and Apply a Font Copy font family into a folder for your web site. In CSS page code rule set for the @font-face selector. Use font-family property for name. Use src Property to locate the font file. In HTML element use name as value for font-family property. List one or more other font-families in case the browser doesn’t support the CSS3 @font-face selector. 9/17/2018 Copyright © Carl M. Burnett

Fonts Free Service 263 Font Families https://www.google.com/fonts 9/17/2018 Copyright © Carl M. Burnett

Heading that uses Google Web Font The CSS for importing a Google Web Font <link href="http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy" rel="stylesheet"> The CSS for applying the font to an HTML element #booktitle { font-family: "Sorts Mill Goudy", serif; } The HTML for the element the font is applied to <h1 id="booktitle">Murach Books</h1> 9/17/2018 Copyright © Carl M. Burnett

Adobe Typekit Editor Free account limited to two fonts https://typekit.com/ 9/17/2018 Copyright © Carl M. Burnett

How to apply a Typekit font to an element Code the class attribute with its value set to the name that was displayed in the upper-left corner of the Typekit Editor. The script elements for importing Typekit fonts <script src="http://use.typekit.com/vxu5ibx.js"></script> <script>try{Typekit.load();}catch(e){}</script> The HTML for an element that a font is applied to <h1 class="tk-blambot-pro">Murach Books</h1> 9/17/2018 Copyright © Carl M. Burnett

Link Elements for Screen and Print Style Sheets <link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="styles/print.css“ media="print"> To define the CSS rules for printing a web page you use an external CSS file to define these rules. Here is a example of the link to an external css file to print a web page. Notice that there is a special attribute “media” with a “print” value at the end of the CSS link. This alerts the browser to use the CSS code that uses this attribute and value. In this example the browser renders the web page and the last style sheet, the print.css, is the print style sheet. The css rules in the print.css sytlesheet determine the placement of the items and override the display styles. 9/17/2018 Copyright © Carl M. Burnett

Rule Set for Printing Embedded Within a Screen Style Sheet @media print { body { font-family: "Times New Roman", Times, serif; background-color: white; } Style Element for Printing in the Head Section of the HTML <style media="print"> font-family: "Times New Roman", Times, serif; background-color: white; </style> I this example, the font family is replaced and the background color is returned to white. Listed here is a style elements placed in the head section of the HTML page. 9/17/2018 Copyright © Carl M. Burnett

Recommendations for formatting printed pages Change the text color to black and the background color to white. Change text other than headings to a serif font to make the text easier to read when printed. Use a base font size that’s easy to read when printed. Remove site navigation since it can’t be used from a printed page. Remove as many images as possible, particularly Flash and animated images. There are standard recommendations that should be used when formatting web pages for printing. First - Change the text color to black and the background color to white. Also, Change text other than headings to a serif font to make the text easier to read when printed. Use a base font size that’s easy to read when printed. Remove site navigation if possible, since it can’t be used in a printed page. Remove as many images as possible, especially Flash and animated images. 9/17/2018 Copyright © Carl M. Burnett

CSS Properties for Printing Property Description display block, inline, none visibility visible, hidden page-break-before always, auto, avoid page-break-after page-break-inside auto, avoid orphans An integer to determine minimum number of lines within element that can be printed at the bottom widows An integer to determine minimum number of lines within element that can be printed at the next page Listed here are the common CSS properties that can be specified for printing a web page. If you don’t want an element to be included when the web page when it is printed, set the display property to none. If you don’t want an element to be included when the web page when it is printed, but you still want to allocate space for this element set the visibility property to hidden. 9/17/2018 Copyright © Carl M. Burnett

CSS that Uses Two of the Properties for Printing img { display: none; } h1, h2, h3 { page-break-after: avoid; } Listed here is the CSS that uses two properties for printing. 9/17/2018 Copyright © Carl M. Burnett

The CSS for the printed web page body { font-family: "Times New Roman", Times, serif; width: auto; } h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; /* the styles for the navigation bar */ #nav_bar { display: none; /* the styles for the sidebar */ aside { /* the styles for the article */ article { border: none; Example Web Page Example Printed Page Listed here is the CSS for printing a web page. Here’s what the page looks like. In this example the navigation bar and aside aren’t printed and the headings, text, and borders are set to black. The width of the article is wider and the right border is removed. Additionally, the font for the text has been changed to a serif font so it’s easier to read. Here’s an example of the printed page. 9/17/2018 Copyright © Carl M. Burnett

How to Preview and Print a Web Page To display a page in Print Preview mode, choose the FilePrint Preview command from the browser’s menu. To print a page, click the Print button in the browser’s toolbar, choose the FilePrint command from the menu, or click the Print button in Print Preview mode. Another option is to include a Print button on a page and use JavaScript to print the page when the button is clicked. To display a page in Print Preview mode, choose the FilePrint Preview command from the browser’s menu. To print a page, click the Print button in the browser’s toolbar, choose the FilePrint command from the menu, or click the Print button in Print Preview mode. Another option is to include a Print button on a page and use JavaScript to print the page when the button is clicked. 9/17/2018 Copyright © Carl M. Burnett

Student Exercise 2 Complete Exercise 13-1 and 2 on page 473 using Dreamweaver. Upload your HTML pages and CSS files to the live site to preview. Now it’s your turn. Please complete Exercise 12-1 on page 413. When you have completed this exercise restart the video. 9/17/2018 Copyright © Carl M. Burnett

Class Review How to Embed Fonts in a Web Page Skills for Formatting Printed Web Pages A Two-Column Web Page with Special Formatting for Printing Next Chapter 15 - How to Use JavaScript and jQuery to Enhance Your Web Pages Welcome back. This completes Chapter 12 How to Format Web Pages for Printing. Please complete the post-course assessment at the end of this screencast. The next chapter we will cover is Chapter 13 - How to Use JavaScript to Enhance Your Web Pages Thank you. 9/17/2018 Copyright © Carl M. Burnett