Ver Mensaje Individual
  #10 (permalink)  
Antiguo 28/10/2010, 04:57
catalineitor
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 13 años, 6 meses
Puntos: 0
Pregunta Respuesta: Problema de alineado de texto con CSS

Ante todo gracias a los tres, "hdennison", "HackmanC" y "cristian_cena".

Tengo el problema a medio resolver, me funciona a medias, mejor empiezo desde el principio aportando más información al respecto por si puede ayudar.

Mis conocimientos de CSS y XHTML, se remontan a leer manuales y hacer algunas pruebas, o sea que tengo la mente un poco embotada ultimamente por ello.

Digo XHTML en lugar de HTML porque lo que estoy haciendo es un libro electrónico, en formato .epub que internamente consta de hojas de estilo en cascada CSS y de documentos XHTML (simplificando un poco el tema).

A modo informativo, en cuanto a las convenciones de como hay que realizar un .epub, no teneis que preocuparos, las tengo claras e incluso chequeo los .epub con una utilidad llamada "epubcheck" y están perfectos.

Internamente cada capítulo del libro es un documento XHTML al que le cargo una CSS de siguiente manera:

Código HTML:
<link rel="stylesheet" type="text/css" href="../Styles/libro.css"/> 
La cuestión es que en cada capítulo tengo lógicamente textos diferentes, entre los que se encuentra el bloque que me da tantos quebraderos de cabeza, dicho bloque es una especie de comentario de 2, 3 o 4 líneas de texto que va firmado. Lo que pretendo, como comenté en el primer mensaje, es centrar con respecto al ancho total de la página la línea más larga de entre esas 2, 3 o 4 que pertenecen al comentario, que el resto de líneas se alineen a la izquierda con respecto a la más larga y que además la firma, que pongo al final de dicho comentario siempre se coloque a la derecha utilizando de tope la línea larga.

El código CSS que utilizo lo saqué de la aportación de "HackmanC" adaptándolo un poco a la cuestión (puede que la aplicación que le he dado no sea la correcta):

Código CSS:
Ver original
  1. body{/*Estilo general del libro*/
  2.     margin: 0px 10px;
  3.     color: black;
  4.     font-family: Georgia, "Times New Roman", Times, serif;
  5.     font-style: normal;
  6.     font-weight: normal;
  7.     font-size: 100%;
  8.     line-height: 140%;
  9.     text-decoration: none;
  10. }
  11. #contenedor{/*Contenedor del Comentario*/
  12.     width: 100%;
  13.     text-align: center;
  14. }
  15. .parrafo{/*Efecto para el Comentario*/
  16.     display: -moz-inline-stack;
  17.     display: inline-block;
  18.     text-align: left;
  19. }
  20. .entradilla{/*Estilo del Comentario*/
  21.     font-size:105%;
  22.     font-style: italic;
  23. }
  24. .firma-entradilla{/*Estilo de la Firma del Comentario*/
  25.     font-size:90%;
  26.     font-style: normal;
  27.     font-variant: small-caps;
  28. }
  29. p{/*Párrafos de texto mas separados y sangrados en la primera linea*/
  30.     margin: 1ex 0px;
  31.     text-indent: 1.2em;
  32. }

Y el código XHTML que utilizo es el siguiente:

Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <div class="parrafo" style="margin-bottom: 40px">
  3.         <span class="entradilla">Tus ovejas, que tan mansas acostumbraban a ser…</span>
  4.         <br />
  5.         <span class="entradilla">devoran a los mismos hombres.</span>
  6.         <br />
  7.         <p class="firma-entradilla" style="text-align: right">
  8.         – Thomas More, <i>Utopia</i> (1516)</p>
  9.     </div>
  10. </div>

Ojo a la "firma-entradilla" que si la coloco en un <span class="firma-entradilla" style="text-align: right"> no me alinea el texto a la derecha, por eso lo he puesto en un <p class="firma-entradilla".......

Como entiendo que es complicado de comprender a simple vista (yo porque ya estoy con ello varios días) os pongo una captura de como queda (el recuadro representa el ancho total de la pantalla):




Y ahora es cuando me dareis todos en la cabeza cuando os diga que:

1.- Utilizo un Macintosh para realizar todo ésto con un editor llamado "Coda" (a mi entender muy bueno).

2.- Que siempre chequeo el código con dicho programa para que no se salga de las convenciones: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


3.- Que en pantalla funciona todo, tanto en el visualizador que incorpora dicho programa como si lo visualizo con "Mozilla Firefox" o "Safari".

4.- Que el .epub una vez generado lo cargo en un "iPad" de Apple que lee perfectamente libros electrónicos en formato .epub.


Y por fin, el comportamiento al leer el libro en el "iPad" es el siguiente:

1. Cuando el capítulo que visualizo tiene más texto después del citado comentario (tanto texto como para que salte a una segunda página) todo funciona de muerte.

2. Pero si en cualquier capítulo después del citado comentario no hay texto suficiente para volver una página (o si es el único elemento de la página) entonces no funciona del todo, y la última línea (la de la firma) no me la alinea a la derecha, se queda a la izquierda y con el sangrado de "text-indent: 1.2em;" que tiene el elemento <p>.

No tengo ningún otro lector de libros electrónicos para poder probar que pasa en éste caso concreto, si no ya lo habría probado.

Ya sé que lo tengo complicado, pero si se os ocurre qué es lo que puede estar pasando os agradeceré cualquier aportación al respecto, los "Ibuprofeno" diarios con el tema se están convirtiendo en algo habitual.

Saludos.