Interactive Page View
Introduction
The 12.1.2.0 release of Arbortext Layout Developer provided a new Pages tab in the Resources panel giving the user the ability to view information about pages within the current document and, for the currently active page, more in-depth information about the page, its layers, frames and their contents. The 12.2.0.0 release takes the view of the current page further and provides an interactive graphical view of the current page. The graphic of the page is supplied by ALD as SVG with custom attributes added to particular nodes. This custom information is used to provide information to populate information boxes for each of the different guide types. Users can turn on different guides to view the areas ALD generates when formatting the page.
The page information for the current page is opened using the context menu in the Pages tab of the Resources panel in the Debugger. Right clicking on any page provides the context menu:
Selecting ‘Open current page’ will open the ‘Current Page’ tab in the edit area. In addition to the Current Page tree structure, a new panel contains a graphic of the current page plus a toolbar at the top to turn on and off the guides.
Refresh button!
Using the Interactive Guides
The guides are grouped by type with a checkbox to turn the guides on:
• Frame and column guides — this option turns on frame and frame column guides. Frame and frame column guides are green boxes and when the mouse is over one of the boxes it will become a solid colour and a floating information box will provide information about the frame or frame column:
◦ Height and width
◦ x and y position
Be aware that if there are no text margins on the frame and the frame only has a single column, the information box will show the frame column information as this is the front-most box generated. If you look at the following image, you can see the frame column highlighted with its information box, and the frame guide as a faint green box around it.
• Block and region guides — this option turns on the display of block and block region guides which are shown as blue boxes. The background of the block and block region guides become a solid colour when the mouse is over those guides and an information box will be shown giving details about the block or block region. Information provided is:
◦ Height and width
◦ x and y position
As with frames, be aware that the block region may obscure the block guides. In the following image, you can see the block highlighted along with its information box. The block region guide can also be seeing as a faint blue box inside the block guide.
Block guides will be output on top of frame guides.
• Table and cell guides — this option turns on table and table cell guides. These guides are shown as red boxes and, when the mouse is over one of the boxes, it will become a solid colour and a floating information box will provide information about the table or the table cell. Information provided is:
◦ Height and width
◦ x and y position
Consistent with other guides, table cell guides will obscure table guides if there is no padding or other space inside the table or between columns. In the following image, the table guide and information box can be seen with table cell guides visible as red boxes.
• Line guides — each line on the page will be shown as a red box. When the mouse is over the line box, it will be shown with a solid red background and a green line indicating the baseline position for the line. Lines will overprint tables, blocks and frames. The line information box will show:
◦ Height and width
◦ x and y position
◦ Baseline position
◦ Start and end paragraph flags — if startpara = 1 then the line starts a paragraph, and if endpara = 1 then the line ends a paragraph
• Style guides — At the start of each line and whenever style changes inline, a red triangle is shown when style guides are turned on. When the mouse is over this triangle, the information box will appear with style information at that point:
◦ Paragraph margins
◦ Text height
◦ Font (the typeface being used)
◦ vshift — the vertical shift of the text (super- and subscript)
◦ Text colour
The following image shows a style guide for the beginning of the line:
Customising the Information Presented Using The SVG Raw Output
The information boxes for the different guide types feature hard-coded properties. These may change in the future, but there is a very good chance that a developer would want to see other information in those boxes. The 12.2.0.0 release provides a new SVG Raw output method of the current page (see the SVG Raw chapter) and part of this enhancement is the ability to pass custom information to the generated SVG,
The page SVG carries the information box content using ‘data-’ prefixed attribute values. The suffix of the attribute name (the bit after ‘data-’) is the label of the information line and the attribute value is the data shown. The passthrough option allows the creation of these attributes and values such that the pop-up generating code can use them.
To do this, a new method is provided:
formatting.svgDisplayPassthrough(guideNumber, name, value)
Where:
• guideNumber is one of:
◦ fFormatting.GUIDE_PAGE — Add the data attribute to the most recent page guide.
◦ fFormatting.GUIDE_FRAME — Add the data attribute to the most recent frame guide.
◦ fFormatting.GUIDE_FRAME_COLUMN — Add the data attribute to the most recent frame column guide.
◦ fFormatting.GUIDE_TABLE — Add the data attribute to the most recent table guide.
◦ fFormatting.GUIDE_TABLE_CELL — Add the data attribute to the most recent table cell guide.
◦ fFormatting.GUIDE_BLOCK — Add the data attribute to the most recent block guide.
◦ fFormatting.GUIDE_BLOCK_REGION — Add the data attribute to the most recent block region guide.
◦ fFormatting.GUIDE_LINE — Add the data attribute to the most recent line guide.
◦ fFormatting.GUIDE_STYLE — Add the data attribute to the most recent style guide.
These values are listed on the fFormatting.SVGPassthroughGuides constant.
• name is the data- attribute suffix and therefore the label in the information box
• value is the desired value of the attribute and therefore the value shown in the information box
Using the passthrough method tells ALD to add the attribute and value to the last guide of the type specified.
For example:
var tag = "Para_Start";
formatting.svgDisplayPassthrough(fFormatting.GUIDE_BLOCK,"tag", tag);
formatting.svgDisplayPassthrough(fFormatting.GUIDE_BLOCK_REGION,"tag", tag);
var path = formatting.currentXMLNode.getNodePath(1);
formatting.svgDisplayPassthrough(fFormatting.GUIDE_BLOCK,"XPath", path);
formatting.svgDisplayPassthrough(fFormatting.GUIDE_BLOCK_REGION,"XPath", path);
In this code, we create two information box lines: one for the tag used and one showing the location path of the XML node which executed that code. The passthrough is being applied to both block and block region guides because of the overprinting which may occur when there are no padding values on the block to make the block guides selectable. This code generates the following in the information box:
There is no limit to the number of attributes added, but you will want to be sensible about it. If an attribute is already added to a guide, adding the same attribute with a different value will overwrite it. The labels are output lowercase due to browser DOM node copying when the SVG is embedded in the debugger panel.
