Align text in an ordered list

Question

I'm constructing HTML from XML (TEI) source and need to implement line numbering. the allignment of the text is not satisfactory as you may see:

Currently, it looks in HTML like this

<br label="#region_1641631166648_18l8">
9   liecht •Und got ſach das liecht ,
<br label="#region_1641631166648_18l9">
10  das es gut was vnd ſchid das 
<br label="#region_1641631166648_18l10">

The approaches with table or list would not be a good option because of how HTML is created with XSLT and how source data looks like. So maybe there are any other alternatives like using <span> and CSS?

Vertically. As you may see the 'd' in the second line starts a little bit later then the 'l' in the first line. — o-sapov, Sep 02 '22 at 09:22
Well, use the appropriate markup tags as I said. OL (ordered list) will do the trick. — Roko C. Buljan, Sep 02 '22 at 09:22
I have some complicated file structure. Also the numbering is calculated elsewhere, I don't need it to be automatically. I there a way using CSS? — o-sapov, Sep 02 '22 at 09:36

score 3 · Accepted Answer · edited Sep 14 '22 at 18:01

It seems you have control over the generated html. So you could enclose the numbers in a <span> tag and style it with css. Something like:

.lineNumber {
  display: inline-block;
  width: 3em;
  text-align: right;
  margin-right: 2em;
}

<br label="#region_1641631166648_18l8">
<span class="lineNumber">9</span>liecht •Und got ſach das liecht ,
<br label="#region_1641631166648_18l9">
<span class="lineNumber">10</span>das es gut was vnd ſchid das
<br label="#region_1641631166648_18l10">

With this you could also align the numbers correctly underneath.

Align text in an ordered list

1 Answers1