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 This mode is useful for seeing how the topic will look online, usually on a laptop or a large monitor.
- Web Layout (Tablet) Mode This mode is useful for seeing how the topic will look on a tablet device.
- Web Layout (Mobile) Mode This mode is useful for seeing how the topic will look on a mobile device.
- Print Layout Mode This 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.
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
Let's say 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.
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:
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. For more information, see Selecting a Page Layout to View Content in the XML Editor.
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 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 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 allows you to 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.
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.
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.
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.