CODEWITHSUNDEEP
htmlcss
Gil
Gil

Reputation: 33

Add Line Number to existing HTML

I'm trying to add line numbers to existing html with unequal line height - many types of font size and also images. each line look like -

<div id="1"><right><span>line 1</span></right></div>
<div id="2"><right><span>line 2</span></right></div>
<div id="3"><right><span>line 3</span></right></div>

is there simple way to add line numbers that will be vertically align? thanks

Upvotes: 3

Views: 4439

Answers (4)

Nitheesh
Nitheesh

Reputation: 19986

By inspiring from this question, I have developed a solution for your question. You can use the counter-reset and counter-increment property to achieve this

<html>
    <head>
        <style>
            .container {
              counter-reset: line;
            }
            .container .lineNum {
                display: block;
                line-height: 1.5rem;
            }

            .container .lineNum:before {
                counter-increment: line;
                content: counter(line);
                display: inline-block;
                margin-right: .5em;
            }
        </style>
    </head>
<body>
    <div class="container">
        <div id="1" class="lineNum"><right><span>line 1</span></right></div>
        <div id="2" class="lineNum"><right><span>line 2</span></right></div>
        <div id="3" class="lineNum"><right><span>line 3</span></right></div>
    </div>
</body>

</html>

Upvotes: 5

Adam K.
Adam K.

Reputation: 912

Maybe a little automated paragraph counter.

$(document).ready(function() {
  var maxNum = 0;//how many lines should be prepared (Takin in considersation, there would be more wrappers) 
  $(".NumeredTextBlock").each(function() {//create counter for each .NumeredTextBlock wrapper
    var line = 1;//start with number 1
    $("p", this).each(function() {//look for paragraph elements inside wrapper
      $(this).addClass("line" + line);//add class with line number
      line++;
      if (maxNum < line) maxNum = line;//set the maximum number of lines used in HTML DOM for wrapper
    });
  });
  var prepStyle = "";//prepare css style with line numbering
  while (maxNum--) {//prepare as many styles as the max number in document
    prepStyle += ".line" + maxNum + ":before{content:'" + maxNum + "'}";
  }
  $("#numbers").html(prepStyle);//add prepared styles to the HTML DOM
  console.log("resulting generated <style id='numbers'>"+prepStyle+"</style>")
});
.NumeredTextBlock p {
  padding-left: 50px;
  position: relative;
}

.NumeredTextBlock p:before {
  display: block;
  position: absolute;
  left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="NumeredTextBlock">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
  <p>Lorem ipsum dol</p>
  <p>Lorem</p>
</div>
<style id="numbers"></style>

Upvotes: 2

lalit bhakuni
lalit bhakuni

Reputation: 627

if you have requirement listing automatically use <OL> tag other way is no add deffrent tag like this

div span {
    float: right;
}
    <ol>
    <li> list </li>
    <li> list </li>
    <li> list </li>
    <li> list </li>
    </ol>
    
    
    
 <div id="1"><right>line <span>1</span></right></div>
<div id="2"><right>line <span>2</span></right></div>
<div id="3"><right>line <span>3</span></right></div>

Upvotes: 1

Adam K.
Adam K.

Reputation: 912

div {
  position: relative;
}

div>span:first-of-type {
  width: 120px;
  display: inline-block;
}

div>span:nth-of-type(2) {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
}

td,
div {
  border-bottom: 1px solid;
}

td {
  vertical-align: middle;
}
<table>
  <tr>
    <td>Some str length<br/>Some str length</td>
    <td>105</td>
  </tr>
  <tr>
    <td>shorter</td>
    <td>102</td>
  </tr>
</table>

<br/>
<br/>

<div>
  <span>Some str length<br/>Some str length</span>
  <span>105</span>
</div>
<div>
  <span>shorter</span>
  <span>102</span>
</div>

Upvotes: 0

Related Questions