Style Sheet getting added but not the style

Question

I am trying to add some styling to my print page(unfortunately i am a beginner so far so bear with me if i am doing something dumb). Here is the style sheet

@font-face {
    font-family: 'Cloister';
    src: url('../fonts/fonts/CloisterBlack.ttf');
    font-weight: normal;
    font-style: normal;
}
.navbar {
    display: none;
}
.main-navigation{
    display: none;
}
.hidden-print {
    display: none;
}
.breadcrumb {
    display: none;
}
.page-header {
    display: none;
}
.footer {
    display: none;
}
.main-container {
    /*margin: 0 ;
    padding: 0 !important;*/
}
.main-content .container{
    min-height: auto;
    border: none;
    background: #0000ff;
}
@page {
    margin: 1cm;
}

h1.page-title {
    font-family: 'Cloister';
    font-size: 40pt!important;
    text-align: center  ;
}

and this is my print method.

$('#printButton').click( function () {
    var divContents = $("#printPage").html();
    //console.log(divContents);
    var printWindow = window.open();
    printWindow.document.write('<html>' +
                               '<head>' +
                               '<link rel="stylesheet" href="<?= base_url() ?>assets/css/print.css" type="text/css" media="print"/>'+
                               '<title>Student Report Card</title>');
    printWindow.document.title = '';
    printWindow.document.write('<h1 class="page-title"> BeaconHouse Potohar Campus</h1>');
    printWindow.document.write('</head><body >');
    printWindow.document.write(divContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
});

Everything is seems to be working fine until i inspect my print page, there i can also see my style sheet getting added but when i go to the h1 tag, my style sheet doesn't appear and instead there is user agent stylesheet(added by browser as last resort when no style is present on stackoverflow).

Finally i am adding this image just to consolidate what i am trying to convey.

You have set `media = print`, so, when you print do you see the correct styling? — StudioTime, Jul 17 '16 at 09:30
This image is of the print preview inspect element. i cancelled the preview and then inspected the blank page. — umair.ashfr, Jul 17 '16 at 09:43
Yeah all good @T.J.Crowder - good catches from you on your answer — StudioTime, Jul 17 '16 at 09:59
@DarrenSweeney: I think yours was the key observation. I was misremembering btw, you can't directly inspect the print preview, but there's a mode in devtools. It'd been a while since I'd had to do any heavy print debugging, could have *sworn*, but if you do that it just inspects the `embed` it uses for the preview PDF. :-) — T.J. Crowder, Jul 17 '16 at 10:10

score 3 · Accepted Answer · edited May 23 '17 at 11:51

3

~~Two~~ Three issues jump out:

In your style, you have font-family: 'Cloister'. Those quotes shouldn't be there, it should just be font-family: Cloister.
You're outputting your h1 within your head element. (The browser is then relocating it for you.) It should be after the start of body. I think you just have two of your document.write lines reversed.
As Darren Sweeney pointed out in a comment, you've identified the style sheet as being for print only (media="print"). When using dev tools, if you cancelled the print and inspected the window you opened without telling Chrome to show you the "print" media state, you're not going to see that style because it doesn't apply.

Here's how to tell Chrome to show you the "print" media state:

Open devtools (right-click the h1 and choose Inspect, for instance)
From the devtools menu box on the upper right-hand side...

...choose More Tools > Rendering Settings:
Tick the "Emulate media" checkbox and choose Print from the list:

edited May 23 '17 at 11:51

Community

1
1

answered Jul 17 '16 at 09:29

T.J. Crowder

1,031,962
187
1,923
1,875

Thanks Crowder, A dumb mistake at my end i know.. but please guide me as to how should i inspect the print preview, there is so much stuff there that i can't find mine :/ – umair.ashfr Jul 17 '16 at 09:56
@umair.ashfr: I've updated the answer with instructions for doing it. I'll add some screenshots in a moment. – T.J. Crowder Jul 17 '16 at 10:04
Thank you.. A question again, why does the styling on h1 disappear if i cancel the print preview first time(styling is fine), and then press the print button again(styling is gone) – umair.ashfr Jul 17 '16 at 10:20
@umair.ashfr: No idea I'm afraid, you'll just have to debug it. – T.J. Crowder Jul 17 '16 at 10:21

Style Sheet getting added but not the style

1 Answers1