/* ------------------------------------------------ p7cssbpm2_drc_print.css.2015-07-30.b4b 30/Jul/2015 8:01 ------------------------------------------------ */ /* ------------------------------------------------ PVII CSS Page Builder Magic Copyright (c) 2011 Project Seven Development www.projectseven.com Print Media Style Sheet ------------------------------------------------ */ /*Min-width determines the point at which your layout width will cease to shrink horizontally and your browser will spawn a horizontal scroll bar.*/ body { margin: 0; padding: 0; min-width: 0; } /*DO NOT EDIT*/ .sidebar, .main-content, .sidebar2 { padding-bottom: 0; margin-bottom: 0; float: none; /* Because none are floated, the print order is the order in which the divs appear in the main style sheet -- i.e., 1) .main-content, 2) .sidebar, 3) sidebar2 */ width: auto; border: 0; } .menuside li { display: inline-block; } .main-content { margin: 0; } /* ------------------------------------------------- DRC ---------------------------------------------- */ /* 16/Apr/2015 13:06 - the following prevents printing of the associated divs */ .masthead {display: none;} .menutop-wrapper {display: none;} .sidebar {display: none;} /* .footer {display: none;} */ zimg.scalable { height: auto !important; /* 1/26/2015 - if don't set this then CARD image height < normal compared to width */ width: 100%; /* 1/26/2015 - without this the printed images are too large */ /* At 100% image just fills table_graph. Don't set to auto else image in table_graph runs off right side of page. */ /* max-width: 100%; */ /* 1/25/2015 - img scales OK w/o max-width but width must be retained */ /* 1/May/2015 7:27 - to center the image. see http://webdesign.about.com/od/beginningcss/a/aa012207.htm */ display: block; margin-left: auto; /* to center image */ margin-right: auto; /* 1/May/2015 15:29 - the following doesn't seem to work for a naked image (not inside a table) */ display: block; page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */ page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */ page-break-inside: avoid; /* 1/May/2015 8:28 */ } /* 26/Jul/2015 6:21 - height & width are now inherited from p7cssbpm2_09.css */ img.scalable { /* 1/May/2015 7:27 - to center the image. see http://webdesign.about.com/od/beginningcss/a/aa012207.htm */ display: block; margin-left: auto; /* to center image */ margin-right: auto; /* 1/May/2015 15:29 - the following doesn't seem to work for a naked image (not inside a table) */ display: block; page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */ page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */ page-break-inside: avoid; /* 1/May/2015 8:28 */ } zimg.scalable { /* 1/May/2015 7:27 - to center the image. see http://webdesign.about.com/od/beginningcss/a/aa012207.htm */ display: block; margin-left: auto; /* to center image */ margin-right: auto; /* 1/May/2015 15:29 - the following doesn't seem to work for a naked image (not inside a table) */ display: block; page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */ page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */ page-break-inside: avoid; /* 1/May/2015 8:28 */ } /* ------------------------------------------------- Tables ---------------------------------------------- */ table { table-layout: fixed; /* 25/May/2015 14:11 - if "auto" then table can be wider than paper width, esp. with long urls. This occurs in IE but not Chrome. Example: table in Appendix C of titanium_1a.html. */ /* table-layout: auto; */ /* width: 40em; */ } /* table {page-break-inside: avoid;} */ /* 17/Apr/2015 22:29 - debug; test with test_pages/table_no_page_break_inside.html */ /* 4/May/2015 16:50 - to prevent splitting of rows when printing. See http://stackoverflow.com/questions/15318183/when-printing-a-table-chrome-and-safari-are-cutting-a-row-in-half . Test on titanium_1a.htm */ table { page-break-inside: auto; } table tr { page-break-inside: avoid; page-break-after: auto; } ._table_img_container { margin-top: 5pt; margin-bottom: 5pt; } ._table_img { /* table-layout: fixed; */ /* auto; */ /* 27/Jul/2015 20:39 - if use auto, image extends off RHS of table if no _img_print_height specified. See figures 4 & 5 of file:///E:/websites/usr/test_pages/display_drawings/display_drawings_1a.html if table-layout not specified and not inherited then image doesn't extend off RHS of table. */ /* The table cells are just wide enough to accommodate the text. Therefore, can center the text & don't have to use nonbreaking spaces. */ /* border: 1px solid blue !important; */ /* 3/May/2015 7:35 - was 2px */ /* height: 300pt !important; */ /* 31/Jul/2015 22:43 - if explicitly include height then _table_img frame may be much taller than the image, giving excess white space above and below */ page-break-inside: avoid; /* 1/May/2015 8:28 - avoids breaking the image */ /* width: 400pt !important; */ /* 400pt looks reasonable. */ /* 7/May/2015 12:11 - not needed because images are scaled with _img_print_size_ directly in the html */ /* Used to indirectly limit the height of an image so less likely to move smaller image to next page. use pt rather than % so that the image width is the same in either protrait or landscape */ } /* see http://stackoverflow.com/questions/2226939/what-are-most-useful-media-print-specfic-cross-browser-compatible-css-propert */ ._table_img tr, ._table_img td, ._table_img th { /* height: 300pt !important; */ /* 31/Jul/2015 22:43 - if explicitly include height then _table_img frame may be much taller than the image, giving excess white space above and below */ page-break-inside: avoid; /* 1/May/2015 8:28 */ } ._table_caption { page-break-inside: avoid; /* 1/May/2015 8:28 - avoids breaking the image */ } ._table_caption td { font-weight: normal; font-size: 10.5pt; line-height: 125%; } /* used to set image width (or, indirectly, height) during printing. */ /* If needed, this will take precedence over other image scaling -- e.g., */ ._img_print_height {max-height: 215pt;} /* 7/May/2015 20:49 - all images will have the same height. */ /* Based on a default LibreCalc graph image whose raw size ~ 730px x 430px */ ._table_svg_local { border: 5px solid purple; } ._svg_print_height1 { height: 350pt !important;} /* 28/Jul/2015 9:37 - 350pt works well when L & R print margins = 0.4". However, as the margins increase the height of the _table_image cell remains constant, even though the height of the svg decreases. Increasing _svg_height1 increases the height of the _table_image cell but the height of the svg remains unchanged (apparently constrained by the print margins). Decreasing _svg_height1 decreases the height of the svg but not the _table_image cell. Using "max-height" gives same results.*/ ._svg_width1 {width: 350pt;} /* Obsolete 8/May/2015 6:31 ._img_print_size_default { width: 360pt !important; } ._img_print_size_a { width: 200pt !important; } ._img_print_size_b { width: 210pt !important; } ._img_print_size_c { width: 220pt !important; } ._img_print_size_d { width: 230pt !important; } ._img_print_size_e { width: 240pt !important; } ._img_print_size_f { width: 250pt !important; } ._img_print_size_g { width: 260pt !important; } ._img_print_size_h { width: 270pt !important; } ._img_print_size_i { width: 280pt !important; } ._img_print_size_j { width: 290pt !important; } ._img_print_size_k { width: 300pt !important; } ._img_print_size_l { width: 310pt !important; } ._img_print_size_m { width: 320pt !important; } ._img_print_size_o { width: 330pt !important; } ._img_print_size_p { width: 340pt !important; } ._img_print_size_q { width: 350pt !important; } ._img_print_size_r { width: 360pt !important; } ._img_print_size_s { width: 370pt !important; } ._img_print_size_t { width: 380pt !important; } ._img_print_size_u { width: 390pt !important; } ._img_print_size_v { width: 400pt !important; } */ ._table_graph { margin-left: auto; /* to center the table. See http://www.granneman.com/webdev/coding/css/centertables/ */ margin-right: auto; /* to center the table */ page-break-inside: avoid; /* 1/May/2015 8:28 - avoids breaking the image */ margin-top: 10pt; margin-bottom: 10pt; /* margin-left: 5%; margin-right: 5%; */ width: 400pt; /* 400pt looks reasonable */ /* Used to indirectly limit the height of an image so less likely to move smaller image to next page. use pt rather than % so that the image width is the same in either protrait or landscape */ padding: 2pt; /* for the title in the 2nd (bottom) row */ font-size: 1.0em; /* for the caption title */ } /* see http://stackoverflow.com/questions/2226939/what-are-most-useful-media-print-specfic-cross-browser-compatible-css-propert */ ._table_graph tr, ._table_graph td, ._table_graph th { page-break-inside: avoid; /* 1/May/2015 8:28 */ } .zzz_table_image { /* 26/Jul/2015 22:16 - previously replaced by _table_img */ page-break-inside: avoid; /* 1/May/2015 8:28 - avoids breaking the image */ width: 300pt; /* looks reasonable */ /* Used to indirectly limit the height of an image so less likely to move smaller image to next page. use pt rather than % so that the image width is the same in either protrait or landscape */ font-size: 1.0em; /* for the caption title */ } .zzz_table_image tr, ._table_image td, ._table_image th { /* 26/Jul/2015 22:16 - previously replaced by _table_img */ page-break-inside: avoid; /* 1/May/2015 8:28 */ white-space: nowrap; /* In setting the table width, this takes precedence over the width setting in _table_image */ /* max-width: 100pt; */ /* max-height: 20pt; */ /* 2/May/2015 9:37 - doesn't work in FF to limit the height of an image */ /* height: 50pt; */ /* 2/May/2015 9:37 - doesn't work in FF to limit the height of an image */ } /* ------------------------------------------------- End Tables ---------------------------------------------- */ body { font: 10.5pt Georgia /* numbers have small height */ , "Times New Roman", /*, "Courier New", - ugly */ serif; /* DRC - 19/Apr/2015 10:26 - serif */ font: 12.0pt Garamond; /* preferred - therefore list last */ /* DRC - 19/Apr/2015 8:18 - see http://alistapart.com/article/goingtoprint , http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ Also see http://meiert.com/en/blog/20070221/print-style-sheets-the-basics-for-no-excuses/ However, http://css-discuss.incutio.com/wiki/Print_Stylesheets suggests not using a fixed font-size for accessability reasons. */ /* https://css-tricks.com/almanac/properties/f/font/ - "Two of the values in font shorthand are mandatory: font-size and font-family. If either of these is not included, the entire declaration will be ignored. Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored." */ /* margin: 0pt; */ /* this margin adds to the margin that the user sets in printer setup */ /* "you will probably want to set the values for margin and padding to zero since the user's "print margins", as described above, must be assumed to be sufficient (and what the user wants). " - http://css-discuss.incutio.com/wiki/Print_Stylesheets */ background: white; /* DRC - 19/Apr/2015 8:18 */ /* color: black; */ /* DRC - 19/Apr/2015 8:18 - for text. Don't specify this because user may have a color printer. */ } .main-content { background: transparent; /* DRC - 19/Apr/2015 8:32 - see http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ */ overflow: visible !important; /* DRC - 1/May/2015 5:24 - try to get IE to stop truncating text at right margin. */ } .main-content .content{ padding: 20px; /* see https://github.com/h5bp/html5-boilerplate/issues/724 */ /* font-size: 1em; */ /* could also be 100% */ line-height: 125%; /* 1.25em also works */ border: 0px solid #000; /* 31/Jul/2015 16:19 - if not included then vertical line drawn on LHS; doesn't lateral affect position of content. */ } .content-wrapper { width: auto !important; /* 3/May/2015 6:17 - forces IE & Chrome to wrap text at right margin; otherwise, text is clipped. Not needed for Firefox. "width: 100%" also works. 27/Jul/2015 5:54 - IE: if not used then table not properly contained within content margins. Firefox: if not used then long page may be truncated. For both see: E:\websites\usr\test_pages\card\classic_horn_comparisons.html See: http://www.codingforums.com/html-and-css/209709-printing-cuts-off-right-side-page.html http://stackoverflow.com/questions/27529170/internet-explorer-11-printing-cuts-text-on-the-right Must be implemented at this level - not effective if implemented for .content, .main-content, or body */ border: 0px solid #222; } .content { height: auto !important; /* 3/May/2015 6:17 - to print long docs; otherwise, incomplete printing or complete omission on some of the final pages. For example see titanium_1a.html. */ /* Must be implemented at this level - not effective if implemented for .content-wrapper, .main-content, or body */ } /* 4/May/2015 15:09 - hr denotes a major division (e.g., before an appendix). See titanium1.html */ hr {page-break-after: always;} /* 17/Apr/2015 15:07 - see https://css-tricks.com/almanac/properties/p/page-break/ */ h1, h2, h3, h4, h5, h6 { page-break-after: avoid !important; /* 1/May/2015 16:15 - bug: doesn't work in FF. See https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after */ color: black !important; } /* 1/May/2015 6:05 - for IE & chrome if .content-wrapper width = auto or 100% */ h1 { font-size: 13pt; margin-top: 5pt;} h2 { font-size: 12pt; margin-top: 5pt;} h3 { font-size: 11pt; margin-top: 5pt;} h4 { font-size: 10pt; margin-top: 5pt;} /* h1, h2, h3, h4 {margin-top: 100%; } */ /* 1/May/2015 5:59 - use this if .content-wrapper width not specified h1 {font-size: 20.5pt} h2 {font-size: 19.5pt} h2 {font-size: 18.5pt} */ /* 1/May/2015 3:59 - detects FF (Gecko). see http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css */ /* For FF, using +2pt gives ~ same print size as defaults above for IE & Chrome */ /* 1/May/2015 6:21 - FF doesn't need special treatment if .content-wrapper width = auto or 100% @media print and (-moz-images-in-menus:0) { body {font-size: 11pt; } h1 {font-size: 14pt} h2 {font-size: 13pt} h2 {font-size: 12pt} } */ /* 1/May/2015 5:59 - use this if .content-wrapper width not specified @media print and (-moz-images-in-menus:0) { body {font-size: 18.5pt; } h1 {font-size: 22.5pt} h2 {font-size: 21.5pt} h2 {font-size: 20.5pt} } */ /* 1/May/2015 6:58 */ /* no effect? table, td, th { table-layout: auto; } */ li { margin-top: 2pt; } li:nth-child(1) { /* 1st list item - space closer to preceeding paragraph */ margin-top: -5pt; /* the default is 0 */ /* background-color: yellow; */ /* debug */ /* color: red; */ /* debug */ } /* reset spacing for 1st sub-list item & all subsequent - anything here that might be inherited from li:nth-child(1) must be set to !important */ ol li li, ul li li { margin-top: 2pt !important; /* the default is 0 */ color: black !important; /* border: 5px solid black; *//* debug */ /* color: blue !important; *//* debug */ } /* format actual link text; applies to all links */ a:link { color: black; text-decoration: none; /* removes underline */ } /* 19/Apr/2015 10:23 -for the actual url link . See http://24ways.org/2007/back-to-the-future-of-print */ a:link:after, a:visited:after, a:hover:after, a:active:after { color: grey; font-style: italic; font-weight: normal; } /* 19/Apr/2015 8:56 - shows the actual url link; applies to all links - see http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ */ /* ************* 28/Jan/2016 6:55 - disabled since makes some tables with long link names too wide to print a:link:after {content: " (" attr(href) ") "; } */ /* 19/Apr/2015 10:15 - only show url links to external sites. See: - http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/ - McFarland, "CSS3: The Missing Manual" https://books.google.com/books?id=y5KiqOzB6EMC&pg=PA528&lpg=PA528&dq=css+print+stylesheet+Display+the+Destination+of+relative+Links&source=bl&ots=02jYXVbNO6&sig=TL4GmhLo7UPZ9TIqA849aH_FUFY&hl=en&sa=X&ei=uKozVcivAYHDggT82IGIDw&ved=0CDsQ6AEwBA#v=onepage&q=css%20print%20stylesheet%20Display%20the%20Destination%20of%20relative%20Links&f=false */ /* a[href^="http://"]:after {content: " (" attr(href) ") " !important; } */ /* a[href^="http://"] selects all links with the attribute href that BEGIN with "http://" and creates content :after it. attr(href) tells the browser to use this attribute as content. */ /* 19/Apr/2015 13:02 - don't show relative links (begin with "..") */ za[href^=".."]:after {content: ""; } za[href^=".."]:after {content: " (http://ultrasonic-resonators.com/" attr(href) ") ";} /* To actually display the link */ /* ************* 28/Jan/2016 6:55 - disabled since makes some tables with long link names too wide to print a[href^=".."]:after {content: " (" attr(href) ") ";} */ /* div[name] { string-set: base attr(name); } a[href]:after { content: " (" string(base) attr(href) ")"; } */ /* 19/Apr/2015 13:02 - don't show anchored links within pages (link begins with "#") */ a[href^="#"]:after {content: ""; } /* 16/May/2015 22:25 - don't show glossary links. */ /* a[href$="_dict.html"] selects all links with the attribute href that END with "_dict.html". See http://www.css3.info/preview/attribute-selectors/ */ a[href$="_dict.html"]:after { content: ""; } /* creates content "" (no url content) :after link. */ /* format actual link text */ a[href$="_dict.html"] { color: black; font-style: normal; font-weight: normal; text-decoration: none; /* removes underline */ } /* to allow very long links to word wrap - see McFarland, "CSS3: The Missing Manual" https://books.google.com/books?id=y5KiqOzB6EMC&pg=PA528&lpg=PA528&dq=css+print+stylesheet+Display+the+Destination+of+relative+Links&source=bl&ots=02jYXVbNO6&sig=TL4GmhLo7UPZ9TIqA849aH_FUFY&hl=en&sa=X&ei=uKozVcivAYHDggT82IGIDw&ved=0CDsQ6AEwBA#v=onepage&q=css%20print%20stylesheet%20Display%20the%20Destination%20of%20relative%20Links&f=false */ a {word-wrap: break-word;}; /* only print the href if it isn't a local link - see http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/ - doesn't seem to work; doesn't print any href */ /* a:not(:local-link):after { content:" (" attr(href) ") " !important; } */ /* @media print { } */ /* detects ie10, ie11, chrome, both of which print somewhat too large compared to firefox. see http://www.limecanvas.com/css-hacks-targeting-ie-10/ */ /* 1/May/2015 3:21 - for some reason this doesn't work unless the above null @media is included */ /* @media print and (-ms-high-contrast: active), (-ms-high-contrast: none) { h1 {font-size: 50pt} h2 {font-size: 2pt} h3 {font-size: 19pt} } */