Highlighted

Tips for Print media style definitions

Adobe Community Professional ,
Jan 22, 2015

Copy link to clipboard

Copied

I just thought I'd post a few tips for people deciding to use Multiscreen HTML5 (possibly also Responsive HTML5, but I haven't tried it myself). Some of it may be obvious, and some of it may be because of the highly customise screen layout we have, but it tripped me up.

1. Removing TOC, Header, etc when printing.

  • I decided to put a Print media definition in the css for my screen layout (skin), to keep those styles close together. It is possible to define them in your regular project css, but it seems neater to keep the styles in the one spot.
  • Put the @media print section at the end of the stylesheet. I originally had it at the top, and had to use !important statements to get the styles to stick. When the section was placed at the end, the !important statement was no longer required.

2. "Viewport height" measurement and Internet Explorer 9

  • "Viewport height" basically (simplified) says to use the height of the browser as the value. It is used in conjunction with a number representing a percentage. So 'height: 100vh' = set my height to 100% of the browser window size. 'height: 50vh' = set my height to 50% of the browser window size.
  • If you use vh, IE9 gets confused when printing. IE takes the number to mean the number of pages. So 'height: 100vh' = print 100 pages.
  • If you find you get a ridiculous number of pages when printing (e.g. 101), in your @media print section, set tags/styles that uses vh to either a percentage or auto. Possibly this only needs to be done if the html/body tags use vh, but I don't think it hurts to set all. And you're testing, right?

Topics

HTML5 layout

Views

593

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Tips for Print media style definitions

Adobe Community Professional ,
Jan 22, 2015

Copy link to clipboard

Copied

I just thought I'd post a few tips for people deciding to use Multiscreen HTML5 (possibly also Responsive HTML5, but I haven't tried it myself). Some of it may be obvious, and some of it may be because of the highly customise screen layout we have, but it tripped me up.

1. Removing TOC, Header, etc when printing.

  • I decided to put a Print media definition in the css for my screen layout (skin), to keep those styles close together. It is possible to define them in your regular project css, but it seems neater to keep the styles in the one spot.
  • Put the @media print section at the end of the stylesheet. I originally had it at the top, and had to use !important statements to get the styles to stick. When the section was placed at the end, the !important statement was no longer required.

2. "Viewport height" measurement and Internet Explorer 9

  • "Viewport height" basically (simplified) says to use the height of the browser as the value. It is used in conjunction with a number representing a percentage. So 'height: 100vh' = set my height to 100% of the browser window size. 'height: 50vh' = set my height to 50% of the browser window size.
  • If you use vh, IE9 gets confused when printing. IE takes the number to mean the number of pages. So 'height: 100vh' = print 100 pages.
  • If you find you get a ridiculous number of pages when printing (e.g. 101), in your @media print section, set tags/styles that uses vh to either a percentage or auto. Possibly this only needs to be done if the html/body tags use vh, but I don't think it hurts to set all. And you're testing, right?

Topics

HTML5 layout

Views

594

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 22, 2015 1

Have something to add?

Join the conversation