Ask Your Question

css print stylesheet

asked 2012-03-16 12:44:12 -0500

G B gravatar image

What stylesheet is used when printing? It doesn't seem to be notebook.css.

Background: Originally I wanted the text size to scale depending on whether I was inside or outside a notebook cell (make the text big when I'm editing, small when I'm not) but I can't seem to make that work.

Now I'm taking a new tack-- make input cell text small relative to text cell text when printing. The problem is that the notebook seems to use a different stylesheet when printing, so @media selectors aren't working.


edit retag flag offensive close merge delete


I'd like to know the answer to this too. I've been using a trick from another question to hide all my input cells, with my html and chart outputs forming something that looks a bit like a discussion paper. But when I use print, all my input reappears! (It would also be cool to have a button or special mouseclick to be able to hide/unhide input cells one by one as you're working to produce the commentary and displayed equations/derivations etc)

PatrickSurry gravatar imagePatrickSurry ( 2012-12-05 16:44:30 -0500 )edit

1 answer

Sort by » oldest newest most voted

answered 2012-12-06 05:01:01 -0500

PatrickSurry gravatar image

Using Google Chrome, you can look at the document source for the window you get via the 'print' button, and it seems to use the same stylesheets as the editable worksheet. It's not clear to me in either case where the user-provided notebook.css gets included. Both interactive and print versions respect style commands embedded directly in the notebook with a %html directive, for example to make my aligned equations (output with 3-column html.table() calls), I include a cell with:

table.table_form * tr.row-a { background: #ffffff; }
table.table_form * tr.row-b { background: #ffffff; }
table.table_form * td { padding-top: 5px; padding-bottom: 5px; padding-left: 2px; padding-right: 2px; }
table.table_form tr td:first-child { text-align: right; }

One thing I have noticed though, is that many of the elements are displayed with different CSS classes in the printed version. For example an input cell is class .cell_input in the editable worksheet, but .cell_input_print in the printed one.

This is actually handy - as noted above I've been using the worksheet to write a technical note with various graphs and equations in it, so using lots of %html sections with embedded <sage> tags. I don't want to have to cut & paste stuff to another document, I just wanted to use all my output cells as the document itself, so was using a trick I saw somewhere else to hide input cells using a style like this:

textarea.cell_input {display : none}

which makes all your input cells disappear. But it's a bit painful to have to keep editing the source for the worksheet to make them display: inline again whenever I want to change something (not to mention it didn't effect the print view!). So now I'm instead just using the print view as the final document by using this style:

.cell_input_print {display : none}

I also get it to center images (like plots) in the print view by adding:

.cell_output_box {width : 100%}
.cell_output_print_wrap * img { display: block; margin-left: auto; margin-right: auto }

I can print to PDF and I'm all set - the quality is actually pretty impressive!

edit flag offensive delete link more

Your Answer


Add Answer

Question Tools


Asked: 2012-03-16 12:44:12 -0500

Seen: 222 times

Last updated: Dec 06 '12