Foros del Web » Creando para Internet » CSS »

Poesía y responsive

Estas en el tema de Poesía y responsive en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/09/2013, 11:58
 
Fecha de Ingreso: septiembre-2013
Mensajes: 1
Antigüedad: 10 años, 6 meses
Puntos: 1
Poesía y responsive

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
  #2 (permalink)  
Antiguo 25/09/2013, 21:35
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 1 mes
Puntos: 1826
Respuesta: Poesía y responsive

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?

  #3 (permalink)  
Antiguo 26/09/2013, 02:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Poesía y responsive

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.
  #4 (permalink)  
Antiguo 26/09/2013, 09:26
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 1 mes
Puntos: 1826
Respuesta: Poesía y responsive

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...
  #5 (permalink)  
Antiguo 26/09/2013, 11:02
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Poesía y responsive

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

Última edición por PHPeros; 26/09/2013 a las 11:49
  #6 (permalink)  
Antiguo 26/09/2013, 13:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Poesía y responsive

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 original
  1. p {
  2.   white-space: nowrap;
  3. }
Cita:
Iniciado por PHPeros Ver Mensaje
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.
  #7 (permalink)  
Antiguo 26/09/2013, 15:29
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: Poesía y responsive

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
  1. <!DOCTYPE html>
  2.     <head>
  3.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4.         <title>Document...</title>
  5.         <style type="text/css">
  6.         body {
  7.             color: white;
  8.             background-color: black;
  9.         }
  10.         #estrofa {
  11.             color: black;
  12.             background-color: white;
  13.             width: 19em;
  14.             font-size: 16px;
  15.         }
  16.         #estrofa div {
  17.             text-align: right;
  18.             line-height:20px;
  19.             min-height:20px;
  20.         }
  21.         </style>
  22.         <script type="text/javascript">
  23.         var estrofa;
  24.         var versos;
  25.         var totVersos = [];
  26.         var contEstrofa = "";
  27.  
  28.         function versea(){
  29.             estrofa = document.getElementById("estrofa");
  30.             var versos = estrofa.innerHTML.replace(/<BR>/gi, "</span><br>\r\n<span>");
  31.             estrofa.innerHTML = "<span>" +versos+ "</span>";
  32.             versea2();
  33.         }
  34.  
  35.         function versea2(){
  36.             for(i=0; i<estrofa.getElementsByTagName("span").length; i++){
  37.                 totVersos[i] = estrofa.getElementsByTagName("span")[i].offsetWidth;
  38.             }
  39.  
  40.             for(i=0; i<totVersos.length; i++){
  41.                 estrofa.getElementsByTagName("span")[i].style.width = totVersos[i] + "px";
  42.             }
  43.  
  44.             contEstrofa = estrofa.innerHTML;
  45.             contEstrofa = contEstrofa.replace(/span/gi,"div").replace(/<br>/gi,"");
  46.             estrofa.innerHTML = contEstrofa;
  47.            
  48.             for(i=0; i<estrofa.getElementsByTagName("div").length; i++){
  49.                 var versoHeight = estrofa.getElementsByTagName("div")[i].offsetHeight;
  50.                 //alert(versoHeight);
  51.                 if(versoHeight > 20){
  52.                     estrofa.getElementsByTagName("div")[i].innerHTML += ']';
  53.                 }
  54.             }
  55.         }
  56.         </script>
  57.     </head>
  58.     <body>
  59.         <h2>Simula un formato de poesía.</h2>
  60.         <div id="estrofa">
  61.             Existe un recurso usado para escribir poesía<br>
  62.             que corta el ancho de una línea si no cabe el verso.<br>
  63.             Pregunté en el Foro porque de veras no sabía<br>
  64.             si en CSS hay alguna forma para hacerlo.<br>
  65.         </div>
  66.         <input type="button" value="formato verso" onclick="versea(); this.disabled='disabled';" />
  67.     </body>
  68. </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
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.

Etiquetas: html, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:19.