No hay problema con las demoras. Ya sebemos que estas cosas llevan tiempo.
Empiezo esto con un offtopic : a mi mensaje anterior le faltaba el primer párrafo. No le cambia nada, pero como al copiar y pegar se quedó en el Notepad, lo quise poner de nuevo en su sitio. Y no encuentro el botón "Editar". Ahora lo pongo acá, pero voy a preguntar qué pasa. Comenzaba así :
Cita: O se olvidaron. O se aburrieron. O se ofendieron.
Bien, volvamos al asunto.
Me perdí un poco con tu análisis; pero al final entendí que que te referías justamente a lo que había empezado a comentar sobre las dificultades que tenemos en el código CSS para (por ejemplo) asignar valores a medir entre elementos. Aclaremos un poco, antes de que algún novato se pegue la frente contra el teclado.
No es que el CSS no mida y acomode el documento; lo hace a través de la información del navegador, pero las posibilidades que nos da de jugar con esos valores son muy cerradas. En el ejemplo que puse arriba el texto está justificado; y el estilo ubica cada línea de texto, mide el ancho disponible, pega la primer palabra de cada uno a la izquierda, la última a la derecha y distribuye equitativamente las del medio; así hasta la penúltima línea, porque la última no se justifica.
El punto es que nosotros solamente podemos meter un
text-align: justify. Todos los cáculos los hacen entre el CSS y el navegador; no podemos meter (p.e.) una fórmula para que el espaciado de las palabras "del medio" esté prorrateado con un incremento logarítmico.
(Lástima, porque se vería lindo; las palabras apretadas a la izquierda que se van espaciando hacia la derecha).
Tampoco podemos decirle —ni preguntarle— donde empieza y termina cada línea, ni cuánto mide cada palabra. Pero es evidente que el navegador lo sabe.
Un caso más cercano al código que puse, es el mencionado
column
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<body>
<div style="-moz-column-count:3; -moz-column-gap: 1em; -webkit-column-count:3; -webkit-column-gap: 1em;">
uyrxcqwieucryqoweiuct1 cwqei2 cwqeoteiutc3 rwqtucyweriuc4
qwtriu5 cvqrtuqpweoict6 qqituc7 eriqtucirt8
qewrpoictueproiyeu9 veqrycerupoicyt10 eqycitre11 qpct12
yc13 qeprcit14 uqerpicy15 qertcuq16 peori17 yc18
yqeruyqeoirucqeiorur19 cyc20 yqeircuqeoiruq21 c22
uyrxcqwieucryqoweiuct23 cwqei24 cwqeoteiutc25
rwqtucyweriuc26 qwtriu27 qqituc28 eriqtucirt29
qewrpoictueproiyeu30 veqrycerupoicyt31 eqycitre32
qpct33 ycqeprcit34 uqerpicy35 qertcuq36 peori37 yc38
yqeruyqeoirucqeiorur39 cyc40 yqeircuqeoiruq41 cuyrxc42
qwieucryqoweiuct43 cwqei44 cwqeoteiutc45 rwqtucyweriuc46
qwtriu47 cvqrtuqpweoict48 qqituc49 eriqtucirt50.
</div>
</body>
</html>
Como pueden ver, el texto está metido en un
div, y así se vería en cualquier navegador. Pero en los
Mozilla y
Safari / Chrome el CSS crea tres bloques y distribuye el texto formando tres columnas. Él solito calcula las alturas y cuánto texto pone en cada una. Nosotros no podemos cambiar a gusto todos los tamaños y posiciones.
Las "funciones CSS" son lo más cerca que estamos de lograrlo ... pero un
expression() ya es javascript. No nos engañemos.
En fin, si después de llorar porque no había columnas inventaron
column, y después de quejarnos porque no teníamos eventos
onDocZoom ni
onTextResize aparece este supuesto "bug" de
IE ... vamos a esperar un poco, porque a los desarrolladores siempre se les ocurre algo. Al menos aquí probamos que con JS se puede.
(Aunque a diferencia de CSS que es más que nada "de vista" —o "de oido"— el escript cambie todo el código presentado a lo bruto.)
https://developer.mozilla.org/es/Columnas_con_CSS-3
[edit]
Ya que estaba, "arreglé" ese asunto de la redimensión en
IE.
Iba a editar el código anterior, pero como ya dije, no me dejan.
En vez de poner sólo las correcciones, dejo una copia arreglada acá
Código:
<!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>AJUSTA IMAGEN ABAJO DERECHA.</title>
<script>
var texto0 = "";
var texto1 = "";
var texto2 = "";
var texto3 = "";
var parr1 = [];
var fino = 0;
var cortado0 , cortado1, anchoDisp, anchoImag, anchoCol, alto1Blq1, alto0Blq1, altoI, altoCuerpo, anchoCuerpo;
function ajusta() {
anchoDisp = document.getElementById("contenedor").offsetWidth;
anchoImag = document.getElementById("imag").offsetWidth;
anchoCol = (anchoDisp - anchoImag - 2);
//alert(anchoDisp +"-"+ anchoImag +"="+ anchoCol);
texto0 = document.getElementById("contenedor").innerHTML;
//alert(texto1);
texto1 = texto0.split("IMG").join("img"); //alert(texto1+ "SIN IMG");
texto2 = texto1.split("<img"); //alert(texto2);
texto1 = texto2[0]; //alert(texto1);
texto2 = "<img" + texto2[1]; //alert(texto2);
cortado0 = texto1.split(" "); //alert(cortado0);
cortado1 = cortado0;
document.getElementById("contenedor").innerHTML = "<div id='bloq1'></div> <div id='bloq2' style='width: "+(anchoCol)+"px;'></div>" + texto2;
//alert(document.getElementById("contenedor").innerHTML + "bloq2+imag");
document.getElementById("bloq2").innerHTML = cortado1.join(" ");
ajusta2();
}
function ajusta2(){
parr1 += " " + cortado1.shift(); //alert(parr1+"///"+cortado1);
document.getElementById("bloq1").innerHTML = parr1.split(" ").join(" ");
document.getElementById("bloq2").innerHTML = cortado1.join(" ");
//alert(document.getElementById('bloq2').innerHTML + "cont bloq2")
if(fino == 0) setTimeout("ajusta3()", 200);
else setTimeout("ajusta4()", 1000);
}
function ajusta3() {
//alert("ajusta3");
var altoF = document.getElementById("bloq2").offsetHeight;
var altoI = document.getElementById("imag").offsetHeight;
//alert(altoI+"imag");
//alert(altoF+"bloq2");
if(altoI > altoF) {
fino = 1;
alto1Blq1 = document.getElementById("bloq1").offsetHeight;
}
ajusta2();
}
function ajusta4(){
//alert("ajusta4");
alto0Blq1 = document.getElementById("bloq1").offsetHeight;
altoI = document.getElementById("imag").offsetHeight;
if(alto0Blq1 == alto1Blq1) {
ajusta2();
}
else {//alert("no es =");
//alert(parr1+ " char antes");
parr1 = parr1.split(" ");
//alert(parr1 +" parr1 split");
//document.getElementById("contenedor").style.height = (altoI + alto0Blq1) + "px";
var palabDev0 = parr1.pop();
//alert(parr1+ "char pop");
//alert("palabDev0 = " +palabDev0);
document.getElementById("bloq1").innerHTML = parr1.join(" ");
document.getElementById("bloq2").innerHTML = palabDev0+ " " +cortado1.join(" ");
}
}
function recarga(){
window.location = top.location;
}
onload = ajusta;
window.onresize = recarga;
</script>
<style type="text/css">
body , html{font-size: 100%; height: 100%;}
#contenedor {background-color: lime; font-size: 100%; width: 60%;
overflow: hidden; }
#imag {float: left; width:6em; height: 6em;
display: block; margin: 0; }
#bloq2 {background-color: yellow; float: left;
text-align: justify; margin: 0; }
#bloq1 {background-color: silver; text-align: justify;
margin: 0; }
</style>
</head>
<body>
<h2 onresize="recarga()">Flotar "bottom right".</h2>
<div id="contenedor">
uyrxcqwieucryqoweiuct1 cwqei2 cwqeoteiutc3 rwqtucyweriuc4
qwtriu5 cvqrtuqpweoict6 qqituc7 eriqtucirt8
qewrpoictueproiyeu9 veqrycerupoicyt10 eqycitre11 qpct12
yc13 qeprcit14 uqerpicy15 qertcuq16 peori17 yc18
yqeruyqeoirucqeiorur19 cyc20 yqeircuqeoiruq21 c22
uyrxcqwieucryqoweiuct23 cwqei24 cwqeoteiutc25
rwqtucyweriuc26 qwtriu27 qqituc28 eriqtucirt29
qewrpoictueproiyeu30 veqrycerupoicyt31 eqycitre32
qpct33 ycqeprcit34 uqerpicy35 qertcuq36 peori37 yc38
yqeruyqeoirucqeiorur39 cyc40 yqeircuqeoiruq41 cuyrxc42
qwieucryqoweiuct43 cwqei44 cwqeoteiutc45 rwqtucyweriuc46
qwtriu47 cvqrtuqpweoict48 qqituc49 eriqtucirt50.
<img src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" id="imag">
</div>
<p style="clear: both">El texto simula un ajuste rodeando
la imagen que queda abajo y a la derecha. <br>
La redimensión por cambio de tamaño de texto en <b>IE</b> usa un evento <tt>onresize</tt> en bloque con medida relativa.</p>
</body>
</html>
No sé si servirá para algo, pero a mí me molestaba que no anduviese por semejante nonada.
[/edit]