Éste es un método propietario para medir líneas que usa
MSIE. En los último enlaces hay una versión previa.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>NUMERA LÍNEAS. </title>
<style type="text/css">
body{font-size:100%; font-family:'times new roman' times serif;}
h3{text-align:center}
#contLin{position:absolute; top:0; left:5px; z-index:-1; }
.laLinea{text-align:right; vertical-align:bottom; font-weight:bold; font-size:75%; font-family:monospace; width:30px; }
#contTex{margin-left:30px; }
</style>
<script type="text/javascript">
var grisBlanco = "#cccccc";
function numerar() {
if(document.all){
contLin.innerHTML = "";
grisBlanco = "#cccccc";
var lineas = "";
var leeLin = contTex.getClientRects();
var totLin= leeLin.length;
var arriba = leeLin[0].top + cuerpo.scrollTop;
lineas += "<table title='Click para destacar n\xfamero de l\xednea.' cellpadding=0 style='position:absolute; border-collapse:collapse; cursor:default; top:" +arriba+ "px; '>";
for(L=0; L<totLin; L++){
derecha = leeLin[L].right + cuerpo.scrollLeft;
izquierda = leeLin[L].left + cuerpo.scrollLeft;
arriba = leeLin[L].top + cuerpo.scrollTop;
abajo = leeLin[L].bottom + cuerpo.scrollTop;
grisBlanco = (grisBlanco == "#cccccc") ? "#eeeeee" : "#cccccc";
lineas += "<tr><td class='laLinea' onclick='destaca(this)' style='height:" +(abajo-arriba)+ "; background:" +grisBlanco+ "; '>" +L+ "</td></tr>";
}
lineas += "</table>";
contLin.innerHTML = lineas;
}
}
function destaca(T){
if(T.style.color == "#ff0000"){
T.style.color = "#000000";
T.removeAttribute("title");
}
else {
T.style.color = "#ff0000";
var rec = prompt("Escriba un recordatorio.", T.innerText);
T.title = (rec != null)? rec : T.innerText;
}
}
</script>
</head>
<body id="cuerpo" onload="numerar()" onresize="numerar()">
<h2>Numera líneas de texto.</h2>
<p>Números en <tt>td</tt>. Destaca con <i>click</i>.
</p>
<div id="contTex">
<h3>Título.</h3>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
<h4>Subtítulo.</h4>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.<br />
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.<br />
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.<br />
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
</div>
<div id="contLin"></div>
<p><br /><br /><br /></p>
</body></html>
Acá está el de la lupa.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>LUPA DE TEXTO.</title>
<script type="text/javascript">
<!--
var zoom = false;
function Agranda(){
if(window.event.shiftKey){
var MiTexto= document.body.createTextRange();
var TextoBoton= Boton.createTextRange();
document.body.style.cursor='hand';
TextoBoton.text="";
posX = window.event.x;
posY = window.event.y;
MiTexto.moveToPoint(posX,posY);
MiTexto.expand("word",1);
TextoBoton.text=MiTexto.text;
if (posX > document.body.clientWidth*0.50){
posX=posX-Boton.offsetWidth;}
if (posY > document.body.clientHeight*0.50){
posY=posY-Boton.offsetHeight;}
Boton.style.left=(posX+document.body.scrollLeft)*1;
Boton.style.top=(posY+document.body.scrollTop)*1;
Boton.style.visibility='visible';
return true;
}
else{
document.body.style.cursor='';
Boton.style.visibility='hidden';
}
}
//-->
</script>
<style type="text/css">
#Boton{font-size: 48px; background: cyan; visibility: hidden; font-family: arial; position: absolute}
i{font:16pt/26pt cursive}
.der{text-align:right; margin-right:10%; font-weight:600; text-decoration:underline}
</style>
</head>
<body onmousemove=Agranda()>
<h2>"Lupa " que sigue al puntero y muestra texto ampliado mientras se presiona [<font face="sans-serif" >SHIFT</font>].</h2>
<blockquote><i>
<b>La Casa Del Hombre.</b> <br><br>
Negros nubarrones <br>
enturbian mi camino <br>
a la casa del Hombre.<br>
¿Acaso no estuvieron siempre?. <br><br>
¿O es que mis defensas febriles <br>
han dejado pasar <br>
al saboteador de las sombras? <br><br>
Mira hermano<br>
a través de tus ojos<br>
y dime si el saboteador ha llegado ya.
<p class=der>RAYUELA.</p>
</i></blockquote>
<button id=Boton></button>
</body></html>
P.D. : Cuando me calmé un poco se me ocurrió que podemos ir rellenando con cada comprobación hasta el
span que contamos, seguido de un bloque vacío. Y lo que medimos hasta arriba es el bloque, que siempre va a estar abajo porque por definición no es
inline. Lo de
Chrome es porque los espacios siempre los manda abajo en vez de seguir en la misma línea como los otros (¿
Safari hace lo mismo?). Quizá si contamos del fin hacia el principio ... qué sé yo _