¿Otro desubicado más?
¿Qué nos ven, cara de radiador de camión?
Bueno, volvamos al asunto, ... y promediemos en "
terquedad para seguir estudiando las cosas", como dijo
Dalvenjha (Así me sigues escribiendo mensajes)
Iba a editar el código anterior, porque al final mandé el borrador, que tiene alguna variable de más para la versión sin
span y alguna clase de más por desprolijo que soy. Pero aprovecho a corregir acá
Creo que en vez de seguir experimentando hay que esperar a que metan esto en los navegadores, si es que alguna vez lo hacen. Pongo las dos versiones que tengo ya hechas porque
están, y para darle un cierre digno y menos chapucero al asunto.
Con <span> Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CON ETIQUETA SPAN.</title>
<script type="text/javascript">
function versea(){
var versos = document.getElementById("estrofa");
var totVersos = versos.getElementsByTagName("span").length;
//alert(totVersos)
for(i=0; i<totVersos; i++){
var esteVerso = versos.getElementsByTagName("span")[i];
var ancho = esteVerso.offsetWidth;
//alert(ancho)
esteVerso.style.width = ancho +"px";
//alert(versos.innerHTML)
}
var ajustaVersos = versos.innerHTML.replace(/span/gi,"div").replace(/<BR>/gi,"");
versos.innerHTML = ajustaVersos;
//alert(versos.innerHTML)
}
</script>
<style type="text/css">
body {
color: white;
background-color: black;
}
#estrofa {
color: black;
background-color: yellow;
width: 19em;
font-size: 16px;
}
.verso {
background-color: silver;
text-align: right;
}
.cebra {
background-color: white;
}
</style>
</head>
<body>
<h2>Simula un formato de poesía.</h2>
<div id=estrofa>
<span class="verso cebra">Existe un recurso usado para escribir poesía</span><br>
<span class=verso>que corta el ancho de una línea si no cabe el verso.</span><br>
<span class="verso cebra">Pregunté en el Foro porque de veras no sabía</span><br>
<span class=verso>si en CSS hay alguna forma para hacerlo.</span>
</div>
<input type=button value="formato verso" onclick="versea(); this.disabled='disabled';">
</body>
</html> Sin <span> Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SIN ETIQUETA SPAN.</title>
<script type="text/javascript">
var estrofa;
var versos;
var totVersos = [];
var contEstrofa = "";
function versea(){
estrofa = document.getElementById("estrofa");
var versos = estrofa.innerHTML.replace(/<BR>/gi, "</span><br>\r\n<span>");
estrofa.innerHTML = "<span>" +versos+ "</span>";
versea2();
}
function versea2(){
for(i=0; i<estrofa.getElementsByTagName("span").length; i++){
totVersos[i] = estrofa.getElementsByTagName("span")[i].offsetWidth;
}
for(i=0; i<totVersos.length; i++){
estrofa.getElementsByTagName("span")[i].style.width = totVersos[i] + "px";
}
contEstrofa = estrofa.innerHTML;
contEstrofa = contEstrofa.replace(/span/gi,"div").replace(/<br>/gi,"");
estrofa.innerHTML = contEstrofa;
}
</script>
<style type="text/css">
body {
color: white;
background-color: black;
}
#estrofa {
color: black;
background-color: white;
width: 19em;
font-size: 16px;
}
#estrofa div {
text-align: right;
}
</style>
</head>
<body>
<h2>Simula un formato de poesía.</h2>
<div id=estrofa>
Existe un recurso usado para escribir poesía<br>
que corta el ancho de una línea si no cabe el verso.<br>
Pregunté en el Foro porque de veras no sabía<br>
si en CSS hay alguna forma para hacerlo.<br>
</div>
<input type=button value="formato verso" onclick="versea(); this.disabled='disabled';">
</body>
</html> (Hasta que se me ocurra ajustar otro engendro!)
