Poesía y responsive

charromoreno · #1 (**permalink**) 25/09/2013, 11:58

Es mi primera consulta en el foro, así que espero saber expresar correctamente mi problema.
Estoy maquetando una revista de poesía en un formato responsive y me encuentro con el problema del corte aleatorio de los versos en resoluciones de pantalla pequeñas. Cada verso está envuelto en una etiqueta <p> con la clase "verso". He aplicado una regla css para que los versos rotos tengan una sangría francesa que resuelve parte del problema, pero para ser exactos con la norma de edición de poesía debería añadir un corchete de apertura al comienzo de la segunda línea del verso.

¿Sería posible con css, html o javascript hacer que en la segunda línea de un <p class="verso"> arrancara con un corchete y un espacio en blanco de manera automatizada?

He rebuscado debajo de las piedras interneteras buscando documentación para maquetar poesía y no he hallado nada al respecto, pero no quería rendirme sin antes preguntar a la comunidad de la que tanto he aprendido.

Gracias a todos por anticipado,
Charro

Rafael · #2 (**permalink**) 25/09/2013, 21:35

Interesante problema. Bienvenído por cierto.

Edito. A ver según entiendo el problema es que debe aparecer un corchete como
[en este ejemplo,
¿Es correcto?

pzin · #3 (**permalink**) 26/09/2013, 02:28

Que yo sepa lo más parecido es hyphens, pero sirve para poner guiones cuando las palabras se cortan, en realidad no tiene nada que ver.

Supongo que no quedará otra que hacerlo mediante JavaScript.

Rafael · #4 (**permalink**) 26/09/2013, 09:26

O tal vez con un responsive algo...

Por ejemplo, si la ventana mide menos de tanto, entonces el corchete que está en un span, cambie de none a inline. Y utilizar No brake space en el resto de los espacios...

PHPeros · #5 (**permalink**) 26/09/2013, 11:02

Para que quieres eso? No tiene mucho sentido lo del corchete...

pzin · #6 (**permalink**) 26/09/2013, 13:48

charromoreno ¿te valdría forzar que cada verso se mantenga en su linea? Por lo pronto es la única cosa en CSS que se me ocurre.

Así podrías conseguirlo:

Código CSS:

Ver originalp {
  white-space: nowrap;
}

Cita:

Iniciado por PHPeros

Para que quieres eso? No tiene mucho sentido lo del corchete...

No tiene sentido si desconoces que en poesía se usa dicho corchete para indicar que la construcción indicada pertenece al verso anterior.

Y de nada vale aquí pre, nb2br ni nada por el estilo, ya que la cuestión es hacerlo dinámico según la resolución.

jonni09lo · #7 (**permalink**) 26/09/2013, 15:29

Hola, siguiendo el siguiente link y usando el código allí propuesto, he hecho lo que le faltaba: agregar el corchete.

Este seria el código:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Document...</title>
        <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;
            line-height:20px;
            min-height:20px;
        }
        </style>
        <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;
            
            for(i=0; i<estrofa.getElementsByTagName("div").length; i++){
                var versoHeight = estrofa.getElementsByTagName("div")[i].offsetHeight;
                //alert(versoHeight);
                if(versoHeight > 20){
                    estrofa.getElementsByTagName("div")[i].innerHTML += ']';
                }
            }
        }
        </script>
    </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>

El demo esta en el siguiente link.

Esta podría ser una base para lograr lo que deseas. A mi punto de vista el cabo suelto que quedaría por resolver es el asunto de el alto del div que contiene el verso, considerando de que tiene un min-height y un line-height de 20px dos lineas podrían ser 40px. pero como algunos navegadores el alto puede variar (el de una sola linea) habría que hacer mejores pruebas (poniendo un alto maximo de 25 30 pixeles)

Saludos