You can use mediums and media queries in Flare to produce various outputs with different appearances. These are similar concepts; in fact, you will see mediums and media queries side by side in different places in Flare's user interface. However, they are not the same.
A medium is an alternative group of settings in a stylesheet and can be very useful when you are generating multiple kinds of outputs.
One use for a medium is to have one group of style settings for online formats and a different group of settings for print-based formats; therefore, you could use one medium for your online targets and another medium for print-based targets. Another example is if you need to generate multiple PDFs in different color themes; most of the styles might be the same in each PDF, but you can use mediums to separate the color and other stylistic differences.
Let's say you want to build both online and print-based outputs from your project. In your stylesheet, the default style for a text hyperlink is blue with an underline. That may be fine for your online outputs, but maybe you want this style to appear in black font with no underline for print-based output.
Therefore, in your stylesheet you leave the default setting as it is, so that your online outputs can use it. But then you open the print medium in the stylesheet and change the text hyperlink style to black font with no underline.
Your online targets are set to use the default styles, and your print-based targets are set to use the print medium. Therefore, when you build the output for the print target, it will still use the default styles for many pieces of content, but the text hyperlinks will be black with no underline.
Flare provides you with a default and print medium. These are enough to satisfy the needs of many authors, but you can create additional mediums if necessary.
- default This is the standard medium. Any settings that you specify in the default medium will "trickle down" automatically to the other mediums. However, you can override any setting in a specific medium.
- print This medium is designed to be used for print-based output types (Adobe PDF, Microsoft Word). When you create a print-based target, this medium is automatically associated with it, although you can select a different medium for the target if necessary.
If you are working in the Advanced View of the Stylesheet Editor, you can open and edit multiple mediums at same time. You can do this by clicking the Medium drop-down field in the local toolbar and choosing the mediums you want to see so that they have a check mark next to them. Media queries are also listed in the drop-down and can be opened at the same time as well.
When choosing a medium/media query from the drop-down, you can click on the check mark or the name of the medium/media query. What happens next depends on how many mediums/media queries are currently open in the editor.
- If One Medium or Media Query is Open If only one medium/media query is open and you click a check box next to another medium/media query, that second medium/media query will open next to the first one. However, if you select the name of the medium/media query in the drop-down, it will open and the first medium/media query will close.
- If Multiple Mediums or Media Queries are Open If two or more mediums/media queries are open, the next medium/media query you select will open next to the others. This is true whether you select the check box or the name of the medium/media query.
When you expand a property group in one medium or media query, the same property group also expands in any others that are open.
If you make a change in default medium, you see it applied also to the other mediums and media queries, because they inherit whatever is added in the default medium.
Of course, you can override any inherited property value in a specific medium or media query.
If you make a change in a non-default medium or in a media query, you see it only in that place.
Suppose you are using four different mediums (default, print, CustomA, CustomB) in your project. Let's say you specify that the font color for the h1 style in the default medium should be dark red.
If you were to then open any of the other three mediums, you would see that the font color for the h1 style in each of those is also dark red.
If you were to change the font color for the h1 style to blue in the print medium, that color will be used for that medium. However, the h1 style will continue to be displayed in dark red for the default, CustomA, and CustomB mediums.
Note: To access the mediums and media queries provided by Flare (print, tablet, mobile), you might need to make sure the Hide Inherited option in the local toolbar of the Stylesheet Editor is not selected. However, this is not necessary once you make an explicit change in one of those mediums or media queries; after that, it will show up in the Medium drop-down whether you use the Hide Inherited option or not.
Page layouts render content using the print medium settings in the stylesheet.
Let's say you have a style class called "p.Section" and you apply it to the text you have in a header frame in a page layout. In the default style medium, the font color for this style is red, but in the print medium it is black. It makes more sense to display the font for a page layout based on the print medium, because that medium will most likely be used in the print-based output. Therefore, the text displays as black in the page layout.
Different mediums (and media queries) in a stylesheet are set apart by the @media rule and sets of curly brackets. This can be seen when you open the stylesheet source file; to do this, navigate to the CSS file in the Content Explorer, right-click on it, and select Open with > Internal Text Editor.
The placement of the medium section in the stylesheet affects which styles are used when you print topics. For example, if you are using the print medium and want those styles to be used when printing a topic from a web browser, the @media print section should be placed in the stylesheet after your default media section, because style properties lower in a CSS take precedence over properties placed above them. You can always move the medium sections around in the stylesheet (if you want them to be placed higher or lower in the file) by cutting and pasting them in the Internal Text Editor.
A media query is an alternative group of settings in a stylesheet. These settings are automatically used under certain conditions, such as when a screen of a certain size is displaying the output. Media queries are able to do this because they are configured with specific criteria (e.g., maximum width of the screen, orientation, resolution). When the criteria are met, the style settings in the media query are used to display the output. You do not tell a Flare target to use a media query; it just happens automatically.
A couple of media queries (tablet and mobile) are already provided in Flare,.
You can create additional media queries from the Stylesheet Editor if you want, but most authors will be able to do everything they need with just the tablet and mobile media queries. The tablet media query is designed to be used on medium-sized screens, such as iPads. The mobile media query is designed to be used on smaller screens, such as smart phones.
The tablet and mobile media queries are tied to the responsive output settings on the Skin tab of the Target Editor for HTML5 targets. The breakpoints provided in the target determine the point at which your media queries will become active in displaying its style settings.
You can place any valid CSS style settings in a media query, just as you can in a medium. For example, if you want paragraph text to suddenly turn blue when a topic is viewed on an iPhone, you can edit the mobile media query, telling it to use a blue font for all paragraph styles.
One of the most common reasons to use a media query is to account for how the structure of content needs to shift or change when viewed on screens of different sizes. You can use Flare's Responsive Layout window pane to do exactly that.
You do not need to choose between using a medium or a media query for a target. They can be used alongside one another when you generate output.
Let's say you have custom medium called "OnlineBlue," which you associate with one of your targets to show content with a blue theme on some styles. But in addition to that medium, you also make some edits to the tablet and mobile media queries in your stylesheet so that content is adjusted for smaller devices.
When you view the output on a large monitor, the content will look a certain way that makes sense on a big screen. When you view it on a tablet, the content might shift a bit so that it looks better on that smaller screen. And when you view it on an iPhone, the content might shift again to account for that device. But in all three cases, the content is still adhering to the blue theme from the OnlineBlue medium.
What if there is a conflict between your selected medium and a media query, or a conflict between media queries themselves? Media queries will always have precedence over your selected medium. As far as multiple media queries are concerned, the end result depends on the order of the media queries in your stylesheet (when viewing it in the Internal Text Editor). The general rule is that priority is given to whichever media query is listed last (i.e., the one that was added most recently) in the stylesheet. Then the next one above has the next highest priority, and so on. You can always open your stylesheet in the Internal Text Editor and change the order of the media queries.
Let's say you create a custom medium, naming it "Blue." You associate this medium with your HTML5 target. And when you open your stylesheet, you select this medium and tell Flare that the h1 style should be blue.
Next, you edit the factory tablet media query and you specify that the h1 style should be dark red.
After this, you edit the factory mobile media query and tell Flare to make the h1 style green.
If you open your HTML5 target and look at the Skin tab, you will see that the tablet maximum width is set to 1279 pixels, and the mobile maximum width is set to 767 pixels.
You decide that you want a different look when the screen is between 1279 and 767 pixels. Therefore, you create a new media query, setting it to a maximum width of 1000 pixels, like this:
In the stylesheet, you set the h1 style for this media query to purple.
If you open the Content Explorer, right-click on your stylesheet, and select Open with > Internal Text Editor, the stylesheet will open in that editor. When you scroll to the bottom, you will see the custom medium and media queries are in this order (with @media showing where each section of styles begins):
- @media tablet
- @media mobile
- @media print (not being used in our example)
- @media Blue
- @media only screen and (max-width: 1000px)
Now you generate the HTML5 target and view the output. When the browser is maximized, you will notice that the h1 headings are blue, because that's what you set on the Advanced tab of the "Blue" medium.
Then you reduce the width of the browser. Once it gets to 1279 pixels, the h1 headings turn from blue to dark red, because that's what you set in the tablet media query.
You reduce the width of the browser even more. When you get to 1000 pixels, the h1 headings turn from red to purple, because that's what you set in your custom media query.
You continue to reduce the width of the browser. You're expecting the h1 headings to display in green (the color in the mobile media query), but they never do. What happened?
Remember that you added your custom media query last, so it appears at the bottom of the stylesheet. The tablet color (dark red) showed up because its width is higher than the custom media query width. As soon as it hit 1279 pixels, your browser saw that there were instructions to change the color to red. Even though the custom media query appears at the bottom of the stylesheet (therefore with the highest priority), its lower width setting meant that it wasn't in conflict with the tablet setting at that point. It was only at the point when the browser got to 1000 pixels that there was a conflict, so at that moment, the browser chose the media query that is lower in the stylesheet and displayed the text in purple.
The problem with the mobile media query is that by the time the browser was reduced to 767 pixels, it was already using a color for a media query with a higher priority. So the mobile color for h1 never got an opportunity to display.
To fix this, you can cut the mobile media query in the Internal Text Editor and paste it last in the stylesheet, so that the order is like this:
- @media tablet
- @media print (not being used in our example)
- @media Blue
- @media only screen and (max-width: 1000px)
- @media mobile
Now when you generate and view the output, it will work as you expect when you reduce the browser width: from blue to dark red to purple to green.
Following are the primary tasks when working with mediums
Create You may be able to meet all of your style editing needs by using the mediums and media queries provided by Flare. However, you can add as many new custom mediums
and media queriesas you need. See Creating Mediums and Creating Media Queries.
Note: Although the application provides a medium called "print," some users might find it useful to create a custom medium for print output, rather than using the print medium provided. There are benefits to using the print medium provided by the application, and there are other benefits to creating a custom medium. For example, if you want page breaks before a particular heading for print output, but not when users send online topics to the printer, it is a good idea to create a custom print medium. The reason for this is that browsers respect the settings in the print medium provided by the application. Therefore, even though your online output style medium does not have page breaks set before that heading, the application will see that you do have a page break specified in the print medium. And when a user tries to print a topic from your online Help, the printer will start a new page at that heading. The solution is to create a custom print medium (perhaps calling it "PDF"), specifying page breaks in that medium, and using it for your print output (instead of using the print medium provided by the application).
- Select in Style Editor When you are modifying the properties of a style in the Stylesheet Editor or when you are working in the Table Style Editor, you need to let Flare know which medium
or media queryyour settings should be applied to. To do this, select the medium or media queryfrom the Medium drop-down list in the editor, then set the style properties as necessary. See Selecting Mediums and Media Queries.
- Select in XML Editor Flare provides multiple layout modes when working in the XML Editor: Web Layout, Web Layout (Tablet), Web Layout (Mobile), and Print Layout. This lets you see your content in the format that you are most likely concerned about at the moment. The default and print mediums are tied to the Web Layout and Print Layout modes, respectively. The tablet and mobile media queries are tied to the Web Layout (Tablet) and Web Layout (Mobile) modes, respectively. You are using the Web Layout mode, so the XML Editor displays the styles from the default medium. But if you switch to Print Layout mode, the XML Editor automatically displays the styles from the print medium. And if you choose the Web Layout (mobile) mode, the XML Editor adjusts to show the topic as if it were displayed on a mobile device. The key is to select the layout first. If you select the medium or media query, the layout will not automatically change as well.
See Selecting Mediums and Media Queries and About Layout Modes.
- Associate with Targets
(Mediums Only)After you decide on a medium to use for output, you need to associate it with the target. After you build the target, the medium will be used to display the correct style settings in the output. You do not need to associate media queries with targets. See Associating a Medium with a Target.
- Rename You can rename custom mediums and modify media queries without having to use the Internal Text Editor. However, you cannot rename factory mediums and media queries. See Renaming Mediums and Modifying Media Queries.
Note: If you used print table styles in past versions of Flare and want to remove them now in favor of the medium method, you can use an option in the Apply Table Style dialog in the Table Style Editor. When this option is enabled, print table styles will be removed from any tables updated by this dialog. See Applying Table Stylesheets to Tables.