Can I remove the URL from my print css, so the web address doesn't print?

Question

I have written some stylesheets - including a print.css - and it's working fine.

I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?

The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.

Thanks for the replies - I'll stop wasting my time! will also try to make the URLs a bit more meaningful too - rather than long strings and lots of version numbers! - Best regards, Mark — Mark, Feb 05 '10 at 11:17
really there needs to be styles that browsers can inspect/respect and determine if the header or footer should be present and possibly what content each should display. in the modern world of evergreen browsers I'm not certain how the industry can go this long (5-10 years depending on where you look) without this being addressed by W3 (to the point people simply give up) — Shaun Wilson, Aug 18 '14 at 19:50
possible duplicate of [Disabling browser print options (headers, footers, margins) from page?](http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page) — user2428118, Sep 11 '14 at 09:05
Does this answer your question? [How to remove the URL from the printing page?](https://stackoverflow.com/questions/585254/how-to-remove-the-url-from-the-printing-page) — Flimm, Feb 14 '22 at 15:30

score 41 · Answer 1 · edited Jul 29 '14 at 02:54

41

In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).

In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.

In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/

edited Jul 29 '14 at 02:54

Arman H

5,488
10
51
76

answered Jul 29 '14 at 02:26

Daniel Gross

519
5
5

1

It's worth it to mention that the ` ` must be specified. It works on Chrome as well. But you have to use "system dialog" for it to work. – Peter Nov 05 '14 at 12:43
This (much newer) answer is exactly true and correct, and is completely what is desired. – Skotte Apr 17 '15 at 20:53
Yes this works for `firefox` and `microsoft edge`. How to remove header from `IE`? – Half Blood Prince Aug 29 '16 at 09:29
1

Firefox removed support for moznomarginboxes with https://bugzilla.mozilla.org/show_bug.cgi?id=1260480 css @page margin: 0 is now the official way – textshell Sep 24 '16 at 17:20
This didn't work for me in Firefox 96.0 – Flimm Feb 14 '22 at 15:24

Pekka · Answer 2 · 2010-02-03T15:08:32.120

30

Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.

The only alternative I know of is generating PDFs, with which you have full control over the printed output.

edited Feb 03 '10 at 15:08

answered Feb 03 '10 at 15:00

Pekka

442,112
142
972
1,088

Thanks for the reply - I'll stop wasting my time! will also try to make the URLs a bit more meaningful too - rather than long strings and lots of version numbers! - Best regards, Mark – Mark Feb 03 '10 at 15:08
I guess nothing has happened to this during the past two years? – Kimble May 22 '12 at 07:27
4

@Kimble I don't think so, no. – Pekka May 22 '12 at 08:07
1

this is and has always been the "open, portability" problem with the web, even with a nice rich set of standards there are still things millions of people want which no "open working group" is really addressing, and so every browser is doing something nobody much wants. if every browser does this (1. prints 2. optionally includes browser-specific header/footer), why is there no standard/spec for controlling the behavior? – Shaun Wilson Aug 18 '14 at 19:43
After six years of the original post, we still have no control over the printed URL. – Ruggi Feb 16 '16 at 18:59
3

To all the people reading this, do not give up too quickly here! Firefox and Chrome both allowed me to create full paper print forms by simply using print style commands: `` I am not sure this will solve it on all browsers, but it did what I needed. – fgwaller Sep 05 '17 at 12:11

Muhammad Fahad · Answer 3 · 2016-07-26T07:13:06.967

17

Use that code.that will help to solve your problem

@media print 
{
  @page { margin: 0; }
  body  { margin: 1.6cm; }
}

edited Jul 26 '16 at 07:13

answered Feb 24 '16 at 07:02

Muhammad Fahad

1,352
15
15

6

not bad but doesnt correctly deal with top and bottom margin when there are multiple pages – rdans Nov 22 '17 at 13:31
It didn't work for me on Chrome and on Firefox. – Flimm Feb 14 '22 at 15:35

score 15 · Answer 4 · edited Apr 12 '18 at 16:40

15

@media print 
{
  a[href]:after { content: none !important; }
  img[src]:after { content: none !important; }
}

edited Apr 12 '18 at 16:40

Ashraf Sada

4,527
2
44
48

answered May 05 '16 at 05:50

Darshan Kathiriya

181
1
4

4

It'd be good to add some explanation of this code. I don't know what this is supposed to accomplish or how. Certainly doesn't hide the url or page numbers on the latest version of Chrome. – V. Rubinetti Jan 18 '19 at 18:53
1

Thanks, hides link URLs in Safari. – Space Jul 23 '19 at 11:27

score 8 · Answer 5 · edited Jun 02 '15 at 09:46

8

you can try this in the stylesheet:

@page{size:auto; margin-bottom:5mm;}

But this also removes the page number

edited Jun 02 '15 at 09:46

Robert

5,278
43
65
115

answered Jun 02 '15 at 09:26

mtchuente

334
5
9

It didn't work for me on Chrome and on Firefox. – Flimm Feb 14 '22 at 15:35

score 5 · Answer 6 · edited May 23 '17 at 12:25

5

This solution will do the trick in Chrome and Opera by setting margin to 0 in a css @page directive. It will not (currently) work for other browsers though...

edited May 23 '17 at 12:25

Community

1
1

answered Jul 31 '13 at 12:38

awe

21,938
6
78
91

score 4 · Answer 7 · answered Feb 03 '10 at 15:03

4

It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.

answered Feb 03 '10 at 15:03

Simon Whitaker

20,506
4
62
79

2

He means doing it from the CSS via a print stylesheet. He would have to include your steps to all visitors. – Anthony Feb 03 '10 at 15:06
2

Yeah, I realise that. The answer is no, you can't do it via CSS, it's specific to the browser. – Simon Whitaker Feb 04 '10 at 23:32
In newer versions of Firefox, in the print preview dialog, there's a checkbox "Print headers and footers" that does this. – Flimm Feb 14 '22 at 15:28

score 3 · Answer 8 · answered Feb 03 '10 at 15:00

If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.

Show your users how to disable headers and footers in the «Page setup...» dialog.

score 3 · Answer 9 · edited May 23 '17 at 11:54

3

The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.

edited May 23 '17 at 11:54

Community

1
1

answered Feb 03 '10 at 15:05

Anthony

36,459
25
97
163

score 3 · Answer 10 · answered Oct 06 '17 at 11:04

Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.

http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins

However, as of 2017, the @page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:

@page { size: auto; margin: 0mm; }

Credit to Vigneswaran S for this tip.

This is not supported in all browsers: https://caniuse.com/css-paged-media — Flimm, Feb 14 '22 at 15:29

score 3 · Answer 11 · answered Oct 26 '18 at 13:28

3

Remove the url from header and footer using below method

 @page { size: letter;  margin-top: 4mm;margin-bottom: 4mm }

answered Oct 26 '18 at 13:28

Syed Shibli

992
1
12
15

This is not supported in all browsers: https://caniuse.com/css-paged-media – Flimm Feb 14 '22 at 15:29

score 1 · Answer 12 · answered Dec 15 '17 at 06:07

I've also tried everything but finally I'm writing below code to make URL shorter:

var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);

But you need to make a custom PRINT button for user to click.

score 1 · Answer 13 · answered Sep 26 '19 at 23:25

1

Now we can do this with:

<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>

Source: https://stackoverflow.com/a/14975912/1760939

answered Sep 26 '19 at 23:25

Syakur Rahman

2,056
32
40

This is not supported in all browsers: https://caniuse.com/css-paged-media – Flimm Feb 14 '22 at 15:29

score 0 · Answer 14 · answered Feb 03 '10 at 15:01

0

I assume that you are talking about the URL that shows in the footer of the page.

If so, this is set by the browser and it is not something that you can do from your code.

answered Feb 03 '10 at 15:01

Mitchel Sellers

62,228
14
110
173

score 0 · Answer 15 · answered Feb 03 '10 at 15:01

0

I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.

answered Feb 03 '10 at 15:01

Rusty Horse

2,388
7
26
38

score 0 · Answer 16 · answered Jan 28 '20 at 14:12

i found something in the browser side itself.

Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.

Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.

Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.

Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.

score -1 · Answer 17 · edited Jan 25 '18 at 10:12

-1

This is a browser issue. But you can handle this problem by these line of codes:

<style type="text/css" media="print">
@media print
{
    @page {
        margin-top: 0;
        margin-bottom: 0;
    }
    body  {
        padding-top: 72px;
        padding-bottom: 72px ;
    }
}
</style>

edited Jan 25 '18 at 10:12

dferenc

7,918
12
41
49

answered Jan 25 '18 at 09:34

Md. Hasibul Huq

159
1
3

score -3 · Answer 18 · answered Nov 14 '13 at 18:56

-3

For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.

I hope this helps.

answered Nov 14 '13 at 18:56

Jeanne Wise

1

Can I remove the URL from my print css, so the web address doesn't print?

18 Answers18

Linked

Related