Medium Inheritance

[Leon Descoteaux]

[First time working with PDF output, in addition to online]

I've inherited a style sheet that contains:

[default]
@media print
[some other default stuff]
@media non-print

From the posts I've read, it seems that best practice is to use default (base) first, and then @media print (no @media non-print), so I plan on restructuring the CSS accordingly.

However, I guess I've been misled by the term "print" as it applies to Flare CSS. That is, in testing @media print in an individual topic's <style> section, I've found that the "print" styles only apply to the "print"ed WebHelp page, not to a PDF output. That said, my questions are:

• Shall I create a "printPDF" medium and structure the media in descending order: 1) default; 2) @media print; 3) @media printPDF?
  Will the printPDF medium inherit from the default (base) or from the print medium?

For example, if "default" ol margin-left is -25px, and "print" ol margin-left is 0px, which style will the "printPDF" ol margin-left inherit?

Thx in advance.

[NorthEast]

Any medium can be used by any target, but you must set it on the target's Advanced tab.

The print medium is probably a special case, because it's also used when you print a page from a browser; i.e. the browser will use CSS in the print medium.

Anything you set in Flare's (default) medium (which is really no medium) will be inherited by all other mediums. Therefore, I would suggest that a sensible approach would be to only include common style properties in (default). Then for the medium used for each target, only include any different or additional properties to what you've set in (default).

I know some people on the forums set the help styles in the (default) medium and print/pdf styles in the print medium; but I don't favour that approach, because you may set help-specific styles in (default) that you don't actually want in print, and then have to add duplicate entries in print just to override them. In a simple two-medium/target setup, I'd suggest using non-print for help targets, and print for PDF.

I actually have several mediums in my projects, each used for different target types; e.g. non-print (webhelp), pdf (PDFs), mobile (webhelp mobile), print (for help printed from a browsers), word (Word).

[Leon Descoteaux]

Thx for chiming in, Dave.

By "common style properties" in the (default) medium, do you mean things like p {line-height: 10pt;} and so forth?

So, for everything else (with or without [default]), it seems like I would go with these three (in a single CSS):

• @media non-print
  @media print
  @media printPDF

But in that order? Is order unimportant when not using the (default) media? Or does the order determine inheritance?

For example, if:

• "non-print" ol margin-left is -15px
  "print" ol margin-left is 0px

which style will the "printPDF" ol margin-left inherit, that of "print" or that of "non-print"? Or should I replicate the selector I want in the "printPDF" medium anyway?


Thx

[ChoccieMuffin]

Mediums inherit from the default not from another medium, so it doesn't matter what order the mediums appear in the CSS.

Personally, my approach is to not include anything at all in the default medium, to prevent me from inadvertently changing stuff in one medium when I'm changing another.

Don't forget that even if you don't explicitly state something in the default, a default does exist. So if you don't set body in any of your mediums it'll use whatever the default for body happens to be. (Here's where I get confused though, as I can't remember where the defaults come from, whether it's the default from various browsers or something else - I'm sure someone expert will chime in.)

I also favour the approach of using mediums only because then you can use the correct units of measurement. Pixels don't make a lot of sense in print outputs, and points are not helpful in onscreen outputs.

[Leon Descoteaux]

My guess is that "defaults come from" the HTML standard, which is interpreted for good or ill by the browsers.

I also like the idea of not working in the default, so as not to inadvertently influence one or both of the "custom" media.

Thx to you and Dave.

[NorthEast]

In practice, my (default) has about 95% of my CSS code.

My mediums contain very few style properties, only those that are different to (default); e.g. setting the font sizes in pts in the print medium, and in px for non-print.

The trick is to keep the CSS simple.

[doc_guy]

I'm with Dave on this one. Almost all of my styling is in the "default"/no-media section of the style sheet.

I use the @media print section for what prints from the browser, as well as for PDF.

I never, ever, ever, like, ever use @media non-print. Ever. But that's what works for me. Your mileage, obviously, may vary.

I did have a case where I wanted my content that was printed from the browser to look different than the content that was in the PDF, due to margin issues. In that case, I created an @print and an @printPDF media type in the style sheet. That was such a maintenance headache I refacotred the help so it wasn't needed.

If you are having trouble remembering which media type is selected in your style sheet, you can always do this: Create 3 stylesheets: default.css, print.css, online.css.

The default CSS has:

Code: Select all

/*<meta />*/

@import url('online.css');
@import url('print.css');

Then the online.css has all your regular styles. The print.css has all your print styles wrapped in the print media type, like this:

Code: Select all

/*<meta />*/

@media print{

/* Your print-specific styles here */

}

[Leon Descoteaux]

Reopening this post because I'm having trouble with the whole "print" thing. We have a p.Note style with a left border, background shading, and background image. Print results are:

In HTML5:
Border, shading, and image appear in Web view (IE 11 and Chrome 38), but only the border appears when printed...no shading, no image.

In PDF:
Border, shading, and image all appear in Adobe Reader, and all appear when printed.

I even duplicated the p.Note styles in the @media print section of the CSS, with no difference. Any thoughts?

[NorthEast]

That will be due to the browser, rather than using mediums.
Most browsers don't print backgrounds by default, you have to choose to print the background.

A PDF will be exactly the same when printed (mediums don't apply to a built PDF).

[Leon Descoteaux]

Yeah, Dave, I discovered the Print Background Colors and Images option in the IE Print > Page Setup dialog just yesterday.

As to:

mediums don't apply to a built PDF

I've recently added a printPDF medium for specific image and list differences; the PDF targets call for that medium and it works great!

Thx

[NorthEast]

As to:

mediums don't apply to a built PDF

I've recently added a printPDF medium for specific image and list differences; the PDF targets call for that medium and it works great!

What I mean is that medium is applied by Flare to when the PDF is being built, but there are no mediums in the actual built PDF; e.g. you don't have different mediums for viewing and printing the PDF, like you can with the web outputs.

[Leon Descoteaux]

Oh, I get it.