Xara DTP - Text Area Line Numbering

[Acorn]

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):

<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

[gwpriester]

Useful for legal documents where each line in numbered.