Vale aclarar que tal como lo dejé planteado el problema no tiene solución. Tiene que ser implementada por los navegadores, que todavía no lo hicieron. O ya la hubiésemos encontrado, ¿no?.
Tecnicamente no es imposible, pero es difícil asociar al efecto propiedades o atributos lo bastante flexibles y claros como para que nosotros los vayamos a usar. A menos que se haga "de una sola manera"; y es eso, o nada.
Pensaba ahora en
column, que dentro de un bloque genera dos o más que forman columnas de texto llenas por desborde. En el código fuente puede ser un simple
div con texto adentro, paro al darle la propiedad con 3 columnas quedaría así
Código:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| [‾‾‾‾‾‾‾‾‾‾‾‾‾][‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾][‾‾‾‾‾‾‾‾‾‾‾‾‾] |← DIV
| [ ][ ][ ] |
| [ ][ ][ ] |
| [ ↑ ][ ↑ ][ ↑ ] |
| [ ←COLUMNA 1→ ][ ←COLUMNA 2→ ][ ←COLUMNA 3→ ] |
| [ ↓ ][ ↓ ][ ↓ ] |
| [ ][ ][ ] |
| [ ][ ][ ] |
| [_____________][_______________][_____________] |
|_________________________________________________|
Al terminarse el espacio en la columna 1, el contenido se desborda continuando en la columna 2, y cuando ésta se llena, sigue en la columna 3. El problema para nuestro caso es que estos 3 bloques son 'virtuales', no tenemos control total sobre la posición y el tamaño, ni siquiera usando los selectores CSS (mmm... la verdad es que no lo probé).
En fin, si pudiésemos ubicar las columnas así
Código:
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
| [‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾] |
| [ ←COLUMNA 1→ ] |
| [_____________________________________________] |
| [‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾]:˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙: |
| [ ]: __ COL 3 : |
| [ ]: <(o )___ : |
| [ ←COLUMNA 2→ ]: ( ._> / ~~ : |
| [ ]: ~ `---' ~~ : |
| [____________________________]:...............: |
|_________________________________________________|
Donde en Columna 1 empieza el texto, sigue y termina en Columna 2; y en Col 3 va sólo la imagen, entonces tendríamos resuelto el problema.
Pero no, pensemos que la columna 3 tiene ancho y alto fijos (los de la imagen), la 2 tiene alto fijo (igual que la 3) pero su ancho se ajusta al
div restando la imagen, y la primera columna tiene el ancho del
div, pero el alto libre, para que entre lo que no cabe en la 2. Así que el "ajuste" se hace midiendo el flujo de texto de abajo hacia arriba. Sí, demasiado raro.
Como ya se habrán dado cuenta, la distribución de bloques es algo muy fácil de hacer con HTML + CSS (que fue la propuesta inicial de
loncho_rojas). Lo que es imposible es la distribución de texto, porque hay que hacerla en el navegador, no se puede 'adivinar' y meterla en el código fuente.
Lo que sí se puede hacer es crear un escript que la mida por nosotros.
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;
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(){
var bugIE = /*@cc_on!@*/false;
if(!bugIE) window.location = top.location;
}
onload = ajusta;
window.onresize = recarga;
</script>
<style type="text/css">
body {font-size: 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>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 no funciona en <b>IE</b>.</p>
</body>
</html>
Este ejemplo es un borrador. Y lo que hace es
- Capturar el contenido del div (texto e imagen).
- Crear los 3 bloques : 2 vacíos (arriba, y abajo a la izquierda) y 1 con la imagen (abajo a la derecha).
- Colocar todo el texto en la caja de la izquierda.
- Pasar las palabras una a una (comenzando desde la primera) al bloque de arriba.
- Cuando el segundo bloque se acerca a la misma altura de la imagen, pasar las palabras al primero sólo hasta completar su última línea.
- Si se pasa, retroceder una palabra.
Los colores están para identificar los bloques a simple vista, y le subí los tiempos para que se puedan seguir los pasos -obviamente, los
setTimeout deberían estar en 5 ó 10 milisegundos—. Además, dejé sin ocultar con
visibility: hidden toda la operación, que en una versión final debería estar oculta hasta completar el proceso.
Pero la versión final no va a existir, este invento no es más que un juego, que ya había usado antes.
Tiene enormes limitaciones, como que divide un texto
sin formato sólo por los espàcios, o que la función que recalcula el ajuste cuando se cambia el tamaño de la ventana no anda en
IExplorer. Este navegador tiene un bug que algunos dicen que parcharon con JS, pero a mí no me quedó bien, y lo saqué. Si lo ven con
IE, apreten [F5] (¡qué embromar!).
El código fuente no tiene comentarios, pero está lleno de alertas para seguir el progreso del escript; ahora están ocultos, pero si tienen una duda los habilitan.
Por último, espero que todo este trabajo les dé un sentimiento de culpa a los desarrolladores, y que en futuras versiones de navegadores pongan algún mecanismo para que el texto fluya entre capas. Así no nos hacen trabajar tanto.
Texto en dos columnas Presentacion "por paginas"
P.D. : ¡Tipeo esto y se me ocurre de dónde viene el bug de
onresize para
IE! Creo que ahora sé cómo arreglarlo, pero quedará para otro tema ( que no esté en el Foro de CSS).