在有序列表中对齐文本

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?

Answer 1

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.