Hola
virla :
Como dice el tango : "
el que no llora no mama".
No eres el primero al que se le ocurre hacer columnas. Y si hasta ahora nadie pudo, no nos vas a apurar repitiendo la pregunta todos los días.
Con una vez por semana debe ser suficiente
.
Los problemas son algunos más de los que enumeraste arriba. Trata de encolumnar en cualquier procesador de texto, y una vez que tengas listo el documento empieza a cambiar la fuente, el tamaño de los caracteres, el espaciado, el formato de hoja. Y tendrás que ajustar a mano todo de nuevo.
Eso es justamente lo que pasa en cada navegador, que puede estar configurado distinto. Pero no puedes ir a ajustarlo a mano por todo el mundo.
En realidad, los navegadores saben donde cortar las palabras y donde termina el area disponible para texto. Alos fabricantes no les sería imposible hacer una etiqueta, una propiedad o un estilo para mostrar columnas.
Cuando el texto supera la capacidad de la primer columna solamente tendría que desbordar en la segunda. Lo de crear "contenedores" de columna dinamicamente ya es más complicado ( en el caso de que el texto no quepa en las dos primeras y haya que generar una tercera ), y lo de igualar las alturas, también.
El contenido del documento en los navegadores... ¿occidentales? ...fluye hacia abajo sin superar el ancho del panel. La lógica de las columnas es diferente, y por ahora sólo tenemos a los escripts para simular el efecto. Y no va a ser fácil.
Habrá que resignarse a sus muchas limitaciones.
El único que conozco capaz de leer la cantidad de líneas o "renglones" de un texto es para ( ¡y cuándo no! ) el Internet Explorer.
Dejo un ejemplo para que veas cómo trabaja. Tengo hecho otro que me parece más eficiente; pero si encima de que uso código propietario, pongo un ejemplo con tablas; seguro que va a aparecer alguno que no se aguante y me lo defenestre.
Igual vas a ver un método poco ortodoxo para alinear el contenido de los
divs
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>NUMERA LÍNEAS. </title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<style>
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; text-align:right; vertical-align:botton; }
.laLinea{display: inline; z-index: -1; position: absolute; background-color: #cccccc; text-align:right; vertical-align:bottom; font-weight:bold; font-size:75%; font-family:monospace; width:30px; }
.laLinea img{width:0; height:90%; vertical-align:bottom; }
#contTex{margin-left:30px; }
</style>
<script>
var grisBlanco = "#cccccc";
function numerar() {
if(document.all){
contLin.innerHTML = "";
grisBlanco = "#cccccc";
var lineas = "";
var leeLin = contTex.getClientRects();
var totLin= leeLin.length;
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 += "<DIV class='laLinea' style='top:" +arriba+ "; height:" +(abajo-arriba)+ "; background:" +grisBlanco+ "; '><img src='0.0'>" +L+ "</DIV>";
}
contLin.innerHTML = lineas;
}
}
</script>
</head>
<body id="cuerpo" onload="numerar()" onresize="numerar()">
<h2>Numera líneas de texto.</h2>
Números en <tt>div</tt>.
<br /><br />
<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>
<br><br><br>
</body>
<!--
obj.getBoundingClientRect().right;//left top
-->
</html>
Dejo otros dos códigos que pueden aportar ideas que sirven para usar en otros navegadores también
Presentacion "por paginas" Calculadora de palabras
Como recomendación final, te diría que vas a tener que bajar las pretensiones. Un escript capaz de mostrar columnas "pèrfectas" puede ser demasiado grande y complejo.
Una tentación es usar fuente de paso fijo. Todos sabemos que en las fuentes de ancho variable es practicamente imposible calcular el tamaño de un texto por la cantidad de caracteres; pero con una monospace es más fácil
serif
preterintencionalidad |
socialdemocratización | monospace
preterintencionalidad |
socialdemocratización |
El texto tampoco deberá tener formato; sería dificil cortar
Código:
<span id="mi_id">QWERTYUIOP QWERTYUIOP</span>
para meter un
QWERTYUIOP en cada columna.
Como ideas para empezar, me parece que ya está bien.
Mucha suerte con el proyecto
furoya