Ésta es una segunda versión. Está toda en una sola función, pero hay otra que permite usar la numeración como botones para "hacer anotaciones al margen" en cada línea.
Por supuesto, se borran al recargar o redimensionar.
También ajusté la posición de los números, para que queden más cerca de la base del texto.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>NUMERA LÍNEAS 2.</title>
<script type="text/javascript">
var hoja, numerado, altura, numLinea, tamano;
var texto0 = "";
var texto1 = [];
var separador = "¥Ñ";
var muneco = "<span class=\"linea\" id=\"dummy\">0</span>";
function numera() {
hoja = document.getElementById("pagina");
numerado = document.getElementById("regla");
numerado.innerHTML = muneco;
tamano = document.getElementById("dummy").offsetHeight;
numLinea = 1;
altura = 0;
texto0 = hoja.innerHTML;
texto1 = texto0.replace(/</g,separador+"<").replace(/>/g,">"+separador);
texto1 = texto1.split(separador);
for(b=0; b<texto1.length; b++) {
if(texto1[b].match(/^</) == null && texto1[b].match(/>$/) == null){
texto1[b] = texto1[b].replace(/\x20/g,"<span> </span>");
}
}
hoja.innerHTML = texto1.join("");
var espacios = hoja.getElementsByTagName("span");
var totEspacios = espacios.length;
for(s=0; s<totEspacios; s++) {
if(espacios[s].offsetTop > altura){
altura = espacios[s].offsetTop;
var orden = document.createElement("div");
var nuevoNum = document.createTextNode(numLinea + ".");
orden.appendChild(nuevoNum);
orden.setAttribute("class", "linea");
orden.setAttribute("onclick", "senalador(this)");
orden.setAttribute("unselectable", "on");
orden.style.top = altura + espacios[s].offsetHeight - tamano +"px";
numerado.appendChild(orden);
numLinea++
}
}
hoja.innerHTML = texto0;
}
function senalador(T) {
T.style.backgroundColor = "blue";
var descripcion =
prompt("Escriba una descripción para esta línea.", T.title);
if(descripcion) {
T.title = descripcion;
T.style.backgroundColor = "red";
}
else {
T.title = "";
T.style.backgroundColor = "";
}
}
onload = numera;
</script>
<style type="text/css">
body {background-color: silver; color: black; font-size: 18px;
font-family: arial, helvetica, sans-serif; }
h1 {font-size: 1.6em; }
#parrafos {background-color: white; font-size: 1em; padding: 0.5em;
margin-left: 2em; position: relative; }
#regla {font-size: 1em; position: absolute; left: -2.1em; top: -0.2em;
width: 2em; }
h2 {font-size: 2.2em; }
.linea {position: absolute; font-size: 0.6em; width: 2em; left: 0;
top: 0; background-color: black; color: yellow; text-align: right;
user-select: none; cursor: pointer; }
acronym {text-decoration: underline; cursor: help;
text-underline-position: auto-pos; }
#dummy {visibility: hidden; }
.derecha {text-align: right; font: 0.6em cursive;}
</style>
</head>
<body onresize = "numera()">
<h1>Texto con líneas virtuales numeradas.</h1>
<div id="parrafos">
<div id="pagina">
<h2>El caracter "&". </h2>
<p>Fue —y aún es— una contracción estenográfica. Su nombre es "Et",
y su origen se remonta a la <b>Roma </b>precristiana. </p>
<p>Como escribir libros a mano da mucho trabajo, algunos copistas
usaban 'dibujos' que representaban palabras o sílabas de uso común.
"Et" en latín es una conjunción copulativa, como la "y" o la "e" en
nuestro idioma; al unir la "E" y la "T" en un sólo trazo, quedó como
un signo en sí mismo, pero con igual valor y pronunciación. </p>
<p>Cuando lo usamos fuera del latín se puede pronunciar según el
idioma local (<b>Tompson & Williams</b> : "tomson y uíliams") o
mantener la pronunciación del idioma original de las otras palabras
(<b>Bony & Clide </b>: "boni and claid"). </p>
<p>Tambien se la conoce como "i comercial", pero quien le puso ese
nombre no sólo estaba demostrando su escasa cultura general (la debe
haber visto nada más que en marcas comerciales) sino también sus
pocas ganas de investigar y <i>garrar </i>el mataburros. </p>
<p>El caracter se utiliza como operador lógico y matemático, además
de componer otras abreviaturas; como "etcétera", del latín "<i>et
cetera</i>" ("et quetera") que significa "y siguientes", y se abrevia
"&c.". </p>
<p>La grafía fue evolucionando con los siglos, pero todavía hay
algunas fuentes que usan su versión más arcáica, donde podemos
distinguir claramente las formas de la "E" y de la "T". </p>
<center><img src="http://img847.imageshack.us/img847/4136/ets.jpg"></center>
<p class="derecha">(Extraído de un tema publicado en <i>Foro-
Virtual</i>. <br>
Imagen en <a href="http://imageshack.us/photo/my-images/847/ets.jpg/">
http://imageshack.us/photo/my-images/847/ets.jpg/</a>. )
</p>
</div>
<div id="regla"></div>
</div>
</body>
</html>