tea.mathoverflow.net - Discussion Feed (Print CSS)

Ilya Nikokoshev comments on "Print CSS" (1546)

2010-01-07T11:15:23-08:00

I don't see why the !important in the question-header is necessary ...

There could be another explanation: for a while today I saw the old css file which didn't contain anything mentioned here in @media print (improper caching?); that could make me think the problem was in missing !important. It should be unnecessary indeed.

Now all of my complaints are solved :)

Anton Geraschenko comments on "Print CSS" (1538)

2010-01-07T09:35:14-08:00

Weird. I don't know what happened to those plus signs. I copied and pasted (and removed some of the !important s that I didn't think were necessary). In any case #answers > h2 is clearly better. I don't see why the !important in the question-header is necessary ... it's the last file loaded, and question-header doesn't have an !important in any of the other css files (as far as I could see). But I've added it anyway.

Ilya Nikokoshev comments on "Print CSS" (1529)

2010-01-07T01:45:39-08:00

Things don't change for you because

/* Override some print options in stack-exchange.css */
@media print {
  ...
  #question-header {width: 730px;}     <----- Here should be !important; it's overridden otherwise 

  /* Kill the bottom of the page */  
  #post-form   div, #post-form   div   script   div, #post-form   div   script   div   script   script   script   h2
  {    ^^^^^^^^^^^^^^^^ Here should be +, this will make it select things near #post-form, rather then inside 
    display: none !important; 
  }
}

Actually, I took a look into the bottom of the page again. It can look different depending on the contents of the page you're on. This should be much better (sorry for the confusion):

 #show-editor-button /* Kill "Add another answer" button */ ,
 #answers > h2 /* Kill the text "Browse other questions tagged ..." */
 { 
      display: none !important; 
 }

The > character after #answers is crucial: it's child selector; without it the line would also kill all headers of level 2 inside the questions themselves.

Ilya Nikokoshev comments on "Print CSS" (1528)

2010-01-07T01:01:26-08:00

Selectors that match second element after first

Anton Geraschenko comments on "Print CSS" (1521)

2010-01-06T19:33:41-08:00

I've added your changes. I can't reproduce in Chrome on linux, and the stuff that's supposed to kill the bottom of the page doesn't do anything for me. The form tag was already display:none so the "post your answer" form didn't appear. What do the plus signs mean?

Ilya Nikokoshev comments on "Print CSS" (1511)

2010-01-06T14:32:29-08:00

zoom: It looks like Safari is unique among browsers in that it respects the current zoom on the page when printing rather then trying to fit to page by default (it's a checkbox in Firefox).

question header: Yes, this breaks printing in Safari and Chrome, but not Firefox. I'll send you PDF if you can't reproduce

question header a: This is indeed not necessary (I had preview with mouse hovering over it and thought there's a bug).

bottom: This should kill button "Post an answer" and some text below it; this should work similarly for browsers that understand CSS selectors. I don't remember from my mind, but this should work for all of the major browsers. Look closely to the bottom :)

Browsers:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.49 Safari/532.5

Anton Geraschenko comments on "Print CSS" (1507)

2010-01-06T09:10:01-08:00

I've added the part that kills the system message, but as far as I can tell, the other things don't make a difference (using chrome or firefox on linux). If I understand your comments correctly, you're saying that if you zoom out with your browser and then tell it to print, you get a different output? Am I looking for the wrong changes?

Ilya Nikokoshev comments on "Print CSS" (1498)

2010-01-06T04:27:18-08:00

This is the final spam on the matter of CSS :)

I made this print style and it's useful to me when I feel like printing the question. Perhaps it deserves to be included into our CSS file:

@media print {

  /* Zooming to fit A4 or legal page. Not all browsers support zoom style,
     so you might have to do it manually. */
  body {
    zoom: 150%;
  }

   /* Kill the orange system message */
  #system-message {
    display:none !important;
  }

  /* Otherwise the whole page shrinks on WebKit-based browsers */
  #question-header {
    width: 730px !important;
  }

  /* Deleted -- not a bug. */ /* Otherwise the header is underlined */

  /* Kill the bottom of the page */
  #post-form + div, #post-form + div + script + div,
  #post-form + div + script + div + script + script + script + h2
  {
    display: none !important;
  }
}

Tested on Safari 4 only though.