Not referring to the URL at top of page.
When an <a> tag is printed in Chrome, it shows the URL after it.
Instead of just showing the anchor text (like this: StackOverflow)
It shows the anchor text w/ URL after it
(like this: StackOverflow (window.open('www.stackoverflow.com'))
This makes the printed page stretch off the printable area, and I'm trying to avoid this from happening. Can this setting be disabled somehow in printing mode or is there a #media print style that can be defined to remove this URL part from print screen?
Tell it not to print anything after the anchor tag.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
Simply use this,
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Related
It happens that I have an HTML page that will be printed. I wanted to add a page counter and was trying to use #page for that. But then, I noticed that #page was not working at all in Internet Explorer. It works in Chrome, though. Everything except the content property, that doesn't show.
Here's the code
#page {
size: auto; /* auto is the current printer page size */
margin: 10%; /* this affects the margin in the printer settings */
#bottom-center{
font-family: FlamaSemicond-Basic;
font-size: 10pt;
color: black;
content: "Hello!";
}
}
I have a similar issue: using Chrome 79. Here it says (I think?) that '#page' is (mostly) supported by Chrome - https://caniuse.com/#search=%40page
And this gives an example: https://drafts.csswg.org/css-page-3/
(their Example number 12 shown below).
The following style sheet establishes a page header containing the
title ("Hamlet") on the left side and the page number, preceded by
"Page ", on the right side:
#page { size: 8.5in 11in; margin: 10%;
#top-left {
content: "Hamlet"; } #top-right {
content: "Page " counter(page); } }
When I test it - Chrome obeys the page size, but doesnt show the page numbers.
I have to print the webpage with customized header in every page,
Below is my CSS code for print media
#media screen {
header.onlyprint, footer.onlyprint,.watermark{
display: none; /* Hide from screen */
}
}
#page {
size:A4;
}
#media print {
#page {
size:auto;
margin-top:2mm;
}
html{
margin-top: 20mm;
}
header.onlyprint {
position: fixed; /* Display only on print page (each) */
top: 0; /* Because it's header */
margin-top: 0;
}
}
And HTML code is:
<header class="onlyprint">
<img src="images/logo.png"/>
</header>
But the problem is only in first page the logo is printing properly and from second page the logo is getting overlapped with body content.the CSS of HTML is not working from second page.
It seems this task cannot be properly implemented with CSS only.
I found a workaround for IE and Firefox using tables here: http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/
Quick summary of that link's content: IE and Firefox will repeat the <thead> Element on every printed page, whereas the <tbody> will be printed continuously without repetition.
I'm researching existing html5 application.
Its html page contains style for print
<link href="receipt.css" rel="stylesheet" type="text/css" media="print" />
receipt.css file contains also #media and #page directives
.myreceipt {
#page {
visibility: hidden;
margin: 0 15px;
}
#page {
height: auto;
}
}
.myreceipt body {
margin: 0;
padding: 0;
width: 100%;
}
#media screen {
.myreceipt #receipt-header img {
width: 300px;
}
}
.myreceipt #receipt {
margin: 0;
width: 100%;
padding: 0;
background-color: #fff;
}
#media print {
.myreceipt #receipt {
color: #000;
}
}
Why css file contains media directives ? If html file contains media='print' is it used only for printing ?
Can #media screen elements deleted fully from css file and #media print directives removed safely ?
Or is there some reason for them, this css is created by proffessionals ?
Why visibility: hidden is specified in #page ?
According to doc, visibility: hidden is ignored for #page, can it safely removed ?
Can #page also removed since html file contains media=print and in this case #page is always used ?
Why css file contains media directives ?
Or is there some reason for them, this css is created by proffessionals ?
Because it could be used for different media (e.g. screen, print, etc)
If html file contains media='print' is it used only for printing ?
Yes.
Can #media screen elements deleted fully from css file and #media print directives removed safely ?
Only if the file is linked from link elements using media="print".
Why visibility: hidden is specified in #page ? According to doc, visibility: hidden is ignored for #page, can it safely removed ?
That's for CSS 2.1. It does/will matter for CSS 3 (http://dev.w3.org/csswg/css-page/#content-empty). However, as of now, in Firefox 25, both visibility and height are invalid, hence ignored.
Can #page also removed since html file contains media=print and in this case #page is always used ?
Yes, but also for a different (better) reason: at-rules (#page, #media) must be defined top level. As it is in your style sheet, with #page inside .myreceipt, they are simply ignored so you might as well delete them.
If they weren't ignored (ie. outside of .myreceipt) then you should be aware that #page refers to the actual print area on a page, not to the .myreceipt (https://developer.mozilla.org/en-US/docs/Web/CSS/#page). So if you want to remove them, you would have to apply some equivalent formatting to the body element.
I would like to close by pointing out that in this case "created by professionals" probably refers more to someone being paid, than someone being an expert in this stuff.
Andrei
For printing purposes, I removed the IMG element, but I wanted an H1 element to be displayed on another portion of the site when the IMG element is removed.
Is this possible?
You can use CSS media types for this.
Don't think of it as revealing one element when another is removed; instead think of it as selectively displaying elements depending on whether they are for print or screen.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
.screenonly { display: none; }
}
#media screen {
.printonly { display: none; }
}
</style>
</head>
<body>
<h1 class=printonly>Header for print</h1>
<h1 class=screenonly>Header for screen</h1>
</body>
</html>
Save this to a file and view it in a browser, and you will only see "Header for screen". Print the same page and you will instead see "Header for print".
This technique will work on any element and can be used to set any CSS style for print or screen.
What I need is for the footer to print at the bottom of each page (when it is printed on paper, not printed on screen, that's easy)...
I am using tables, I know tables are bad, I typically do not use them, but this is a special case: (I am using a C# webBrowser control, and just using HTML to format a document to print).
It works fine, except for the footer on the LAST page printed...the first pages it is sitting at the bottom, because the page content pushes it to the bottom, but on the last page, it is just at the bottom of the content still (and the content does not go to the bottom of the page)
Here is an image to show (this is when I go print preview of my webBrowser). dont mind the green text, just there for testing.
good and bad footer http://pdem.info/badfooter.png
As you can see, on the left, the footer is forced at the bottom by content, and on the right side, the footer is in the same position relative to content, but I want it at the bottom!
The snippet for my footer is just:
<tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>
Any ideas how to force the footer to be at the bottom? I have no objection to using div's if there is a way to make it work like that!
=========EDIT=========
Here is some of the code:
The css:
#media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
//I have tried doing position:absolute/fixed with values in pixes and percents
}
#media screen {
thead { display: none; }
tfoot { display: none; }
}
Code that populates the webBrowser Control:
web_display.DocumentText = "";
web_display.Document.Write("<body><table id='tblCont'><thead><tr><td>Your header goes here</td></tr></thead>" +
"<tbody><tr><td>");
web_display.Document.Write("<body><basefont size='2' face='verdana'>");
web_display.Document.Write("<ul " +
"style='list-style:none;"+
"padding-left:0px;"+
"margin-left:0px;"+
"'>");
foreach (TNode part in tn.Nodes) {
web_display.Document.Write("<li><strong>" + part.Text + "</strong>");
web_display.Document.Write("<ul style='list-style:none;'>");
foreach (TNode node in part.Nodes) {
web_display.Document.Write("<li><strong>" + node.Text + "</strong></li>");
web_display.Document.Write("<ol>");//this list will hold the textblock text
addTextBlk(web_display, node);
web_display.Document.Write("</ol>");//end textblock list
web_display.Document.Write("<br style='line-height:6px;'/>");
}
web_display.Document.Write("</ul>");//end lvl2 list
web_display.Document.Write("</li>");//end part item
}
web_display.Document.Write("</ul>");//end part list
//web_display.Document.Write("</li>");//end section item
web_display.Document.Write("<br />");
//web_display.Document.Write("</ul>");//end section list
web_display.Document.Write("</td></tr></tbody><tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>" +
"</table><div id='newFooter'>This is footer text</div></body>");
<style type="text/css">
#footer
{
position:absolute;
left:200px;
top:750px;
}
</style>
Change the left: and top: to suit your page.
that will position it absolutely in the exact place you want.
EDIT - Note: My solution was posted prior to what looks like it may have been an edit (no picture was displayed when I first read the question and less information) on the question that changed it, the answer is now irrelevant sorry. This may be able to help you anyway with something else.
For consistency through multiple pages I would personally use a div.
Next option, CSS like (off the top of my head I don't know if this will work)
#footer {
height:100%;
vertical-align:bottom;
}
EDIT ENDS HERE
I use the print and screen media types for this, in the of your page include a stylesheet like this:
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
Make sure your other 'screen' stylesheet is tagged with media="screen"
Now in your stylesheet put in the code for your footer as you would like to see it printed, in this example I'm using a div tag:
#print_footer { border:0 solid #333; font-family:arial; font-size:8px; color:#000; margin-bottom:0; }
Open your normal 'screen' stylesheet add the following class
.no_screen { display:none; }
This will stop the element from displaying on the screen.
In your page create your DIV
<div id="print_footer" class="no_screen">Copyright © 2011 Ryan. All rights reserved.</div>
I hope this helps.