1

I've seen many questions regarding line numbers, like: Create line numbers on pre with CSS only

or this: Display line number in textarea

My problem is that I need line count also 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.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.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>

As you can see, Line #1 is wrapped on more than one physical line and the current counting does not consider it.

another approch I found while looking for an answer is to add hard coded list of line number with the same height of the textarea but since I need to support multiple font-size this method will not work and will show the line numbers un-aligned.

Example (Thanks 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>

Please notice that my the HTML is generated in a different tool (etherpad) and I need to add the line numbers after I get the HTML from the different tool so I dont know the length of the text or the size of the font in it.

My question is: how can I add line numbers to dynamic HTML with consideration of text-wrapping and font-size?

Community
  • 1
  • 1
yossico
  • 3,421
  • 5
  • 41
  • 76

1 Answers1

1

Base on you answer, I found is the font-size of textarea that result in line numbers un-aligned.So you can make the font-size to 14px then would aligned the line number.

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;
font-size: 14px;//add the style
}
<textarea rows="10" cols="40"></textarea>
alan9uo
  • 1,011
  • 1
  • 11
  • 17