A useful feature some product have is the ability to add in Line Numbering across the document.
This can be for specific referencing or editorial reviews.
Xara allows for a large number of Text areas to be placed on a page and the layout you need may required something different to Left-to-Right and Top-to-Bottom.
This following CSS Counters code allows both.
Place in your Website Code (Head):
Code:
<style>
:root {
counter-reset: line flow;
}
.panel {
counter-set: line;
}
.xr_txt:before {
counter-increment: flow;
content: counter(flow, upper-latin);
color: blue;
border: 2px red solid;
padding: 2px;
margin: 1px;
}
.xr_txt > span:first-child {
font-weight: 900;
border-top: 2px solid red;
}
.xr_txt > span:before {
counter-increment: line;
content: counter(line, decimal-leading-zero)". ";
font-size: 8pt;
color: green;
}
</style>
The 'flow' counter displays an uppercase letter at the start of each text area in the order each is stacking on the page.
I also threw in the top red border and the red box around the incrementing letter. It increases A to Z, then AA, AB, through to ZZ, AAA and beyond.
The 'line' counter ignores blank lines (see lines 67/68) and Heading 1, 2 or 3 Text Styles (see the red text after Line 72).
You can reset a Text Area by adding a Name, htmlclass="panel". Text Areas after this reset, continue the numbering in order as before.
You can change the code '.panel {' to '.xr_txt {' to force each panel to restart its numbering.
If you change the stacking order the Panel Letter and the Line Numbers automatically update.
CSS - Line Numbering.xar
These changes are extending the text areas so you may get overlaps (see Panel AD).
Acorn
Bookmarks