Many queries have been raised about line numbers, such as: Create line numbers on pre with CSS only
or this: Display line number in textarea
The issue I am facing is the need for line count for lines that are wrapped with multiple lines.
section {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
border-top: 4px solid #00aeef;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line;
}
section div {
display: block;
line-height: 1.5rem;
}
section div:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888
}<section>
<div>lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum...</div>
<div>lorem ipsum. <span style="font-size: 54px;">big text</span></div>
<div>lorem ipsum.</div>
</section>Line #1 is wrapped on more than one physical line and the current counting does not consider it.
While searching for a solution, another approach I came across is to hard code a list of line numbers with the same height as the textarea. However, this method will not work when supporting multiple font sizes, resulting in unaligned line numbers.
For example (Credits to: Aakash Chakravarthy, https://jsfiddle.net/vaakash/5TF5h/):
textarea{
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color:#ccc;
}<textarea rows="10" cols="40"></textarea>I generate my HTML using a different tool (etherpad) and need to add line numbers to it afterwards. Therefore, I do not know the length of the text or the size of the font within it.
My question is: How can I add line numbers to dynamic HTML while considering text-wrapping and font size?