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.
- Web Layout Mode The Web Layout Mode is useful for seeing how the topic will look online, usually on a laptop or a large monitor.
- Web Layout (Tablet) Mode The Web Layout (Tablet) Mode is useful for seeing how the topic will look on a tablet device.
- Web Layout (Mobile) Mode The Web Layout (Mobile) Mode is useful for seeing how the topic will look on a mobile device.
-
Print Layout Mode The Print Layout mode lets you see how the pages will look with a page layout applied to it. In other words, it lets you see how the page will look when you generate print-based output. This means that you will be able to view the actual page size and orientation, as well as the margins and any header or footer content.
Note Although the Print Layout mode is a WYSIWYG (What You See Is What You Get) environment, you also need to consider any condition tags when you are viewing pages in this mode. For example, let's say you have applied a condition tag to an entire paragraph on a page. When you are viewing the topic in the XML Editor, you will see this paragraph, but if you generate a target where you have elected to exclude that condition tag, the paragraph will not be displayed in the output, and the other paragraphs will shift to compensate for its absence. Therefore, what you see in the Print Layout mode is what you get, except possibly for certain conditions that may be present on a page.
You can get an even more accurate look at how a topic will look in the output by associating conditions with it while you are editing. This is similar to the feature that you can use to preview a document with certain conditions set. The difference is that this associates the conditions to the document as you edit it in the XML Editor.
- Edit Page Layout Document This opens the page layout associated with the topic so that you can edit it in the Page Layout Editor.
-
Edit Primary Stylesheet This opens the stylesheet associated with the topic so that you can edit it in the Stylesheet Editor.
Note This option is available only if you have applied a primary stylesheet to the project or target.
[Menu Proxy — Headings — Online — Depth3 ]
Layout Modes, Mediums, and Media Queries
You can toggle between the various layout modes in the XML Editor by clicking the Layout Mode button.
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. However, you can choose any stylesheet medium or media query when you are in a particular layout mode to show the content with certain styles applied.
Keep in mind that the tablet and mobile media queries are associated with your responsive skin settings on the Skin tab of HTML5 targets
Note The Medium drop-down shows all the medium styles that are in effect in the editor. For example, if the mobile layout is displayed, both the mobile and tablet medium styles apply and are selected. If (multiple) is displayed in the Medium drop-down, that is an indication that multiple styles are applied. Content in the editor is rendered with all applicable styles (according to the width).
Note If you select from the Medium drop-down a medium other than the default, then the Medium (default) label changes to Reset to Default Medium. If you click to reset, the label goes back to Default Medium with a check mark to show it is selected.
Note You can view multiple mediums at once in the editor. If you switch the layout mode, the medium changes automatically. But, you can experiment in the editor to see how different mediums and media queries might look together by toggling those items on and off in the Medium drop-down.
Example
Example You are using the Web Layout mode. Therefore, the XML Editor displays the styles specified in the default medium. A topic might look like this:
But if you switch to Print Layout mode, the XML Editor automatically displays the styles specified in the print medium. It might look like this:
If you choose the Web Layout (Tablet) mode, you'll notice that the topic looks similar to the regular Web Layout mode, except the content is shown at the maximum width of your tablet settings.
And if you choose the Web Layout (Mobile) mode, the content will be narrower. The XML Editor adjusts to show the topic as if it were displayed on a mobile device. The Medium drop-down displays as (multiple) when multiple styles are applied. When the layout is in mobile mode, both the mobile and tablet mediums are applicable.
Suppose you want to reduce the width of the tablet and mobile media queries. In that case, you open your HTML5 target and change the breakpoints, perhaps to something like this:
Now when you go back to the XML Editor and view the topic in Web Layout (Tablet) mode, it will look like this:
And in Web Layout (Mobile) mode, it will look like this:
General Guidelines
The layout mode and the medium that you should use when editing in the XML Editor depends on what you are trying to accomplish. Do you have web output for a large monitor in mind while you are editing, are you trying to edit for smaller devices, or are you thinking more about print output? Following are some general guidelines, but they may vary depending on the mediums or media queries that you might have created and will be using for your different targets.
-
If Editing with Online Output in Mind For best results, in the local toolbar of the XML Editor, select the Web Layout mode and the default medium:
-
If Editing with Tablet Output in Mind For best results, in the local toolbar of the XML Editor, select the Web Layout (Tablet) mode and the tablet media query:
-
If Editing with Mobile Output in Mind For best results, in the local toolbar of the XML Editor, select the Web Layout (Mobile) mode and the mobile media query:
-
If Editing with Print Output in Mind For best results, in the local toolbar of the XML Editor, select the Print Layout mode and the print medium:
Also, if you are viewing content using the Print Layout in the XML Editor, you can use another drop-down in the local toolbar to choose a specific page layout.
For example, if you know you are looking at a topic that will end up being the first page of a new chapter, you can select the Page Layout drop-down, choose the appropriate page layout, and then select First Right. Or if you know it will be on a subsequent page of the chapter, you might select Left or Right.
So if the topic looks kind of unusual when you first open it, that may be due to the fact that the proper layout mode, page type, and/or medium is not selected in the local toolbar.
Is It WYSIWYG?
Is the XML Editor a WYSIWYG (What You See Is What You Get) environment? The answer to that depends to a certain extent on the layout mode.
When using one of the Web Layout modes and the corresponding medium or media query (default, tablet, mobile), the topics should look pretty close in the XML Editor to how they will be displayed in the online output. For the Print Layout mode and print medium, it's a bit of a different story. The main reason is that online output is designed to have many independent pages, whereas print output is intended to be read one page after the other in one long document. Flare has no way of knowing exactly where a particular topic will land in a PDF until you actually generate it. However, by selecting the appropriate layout mode, page layout, and page type, you can get relatively close.
Conditions While Editing
Conditions on content also affect whether you are seeing true WYSIWYG. If you have sections of content that are conditioned for one kind of output and other sections conditioned for a different output, that's not an accurate picture of what you will see when you view a generated target. However, there is something you can do about this.
While working in the XML Editor, you can show or hide different conditions in the topic. This lets you see only the content that is intended for a particular output that you want to produce.
To do this, in the local toolbar of the XML Editor click 
and in the Target Expressions drop-down field, choose one of your targets. The content in the XML Editor changes to include only the conditions for that target.
Doing this doesn't affect the output at all. It's simply a way to see how a particular topic will look in a specific output without building or previewing it. You can always repeat these steps to return the topic to its previous state in the XML Editor or to see how it looks with a different target selected.
See Associating Conditions to a File While Editing.
Opening Page Layouts
If you double-click on a topic page in Print Layout mode (outside the flow of the main body text), the associated page layout will open in the Page Layout Editor.
Pages
As you add more and more content to the topic, pages are added below. A navigation toolbar at the bottom of the editor lets you see how many pages are in the topic and quickly navigate to any of them as necessary.
If you are using the Print Layout view in the XML Editor and the topic contains more than one page of content, a label appears beside the scroll bar indicating the current page.
For more information see XML Editor and Page Layouts.
What’s Noteworthy?
Note If you are incorporating elements in a topic with absolute positioning, you should be aware of the layout mode as you are editing. This is due to the fact that online and print outputs react differently to absolute positioning. Also, the option to wrap text all around an element is supported only in print outputs.
Note Different operating systems render text differently in the XML Editor. Therefore, if you and another author are looking at the same topic from the same project, but you have different operating systems, the topic may look differently for you than it does for the other person.
Note If you set a table to a specific height, that height may not be represented accurately if you are viewing the topic in Print Layout mode.
Note If you have the layout resizer enabled and you select a layout mode from the top of the editor, a thumb marker moves to the selected layout width and content is resized to that width.
