Search code examples
htmlcssvertical-alignmenttei

Align text in an ordered list

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:

enter image description here

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?

Solution

  • 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.