espacios en blanco al justificar texto

v1ctor · #1 (**permalink**) 12/08/2012, 06:22

Hola, me gustaría saber por qué cuando tengo esto:

Código:

<div class="box"><p>(texto)</p></div>

<div class="box"><p>(texto)</p></div>

con el css

Código:

.box{
float:left;
text-align:justify;
margin-left: 50px;
width:250px;
height:250px;
}

al intentar justificar el texto dentro de los divs me crea mucho espacio entre algunas palabras, quería saber si hay alguna forma de dejarlo con espacios normales.

Gracias.

furoya · #2 (**permalink**) 12/08/2012, 07:22

¿Estás preguntando en serio?

¡Al final me hiciste reir!

Estás justificando el texto, v1ctor. La manera de estirar cada línea es agrandar el espacio entre ellas. ¿Qué pensabas hacer? ¿"Estirar" el ancho de las letras?

Hay en verdad otras opciones, pero no estoy seguro de cómo y dónde funcionan. Una sería estirar proporcionalmete la distancia entre caracteres (tomando al espacio como un caracter más). Y hay una que no contempla directamente el CSS, que es muy interesante visualmente para carteles; consiste en aumentar el tamaño de la fuente hasta que la línea ocupa todo el ancho de su contenedor.
Hay que trabajar un poco el diseño, y sobre todo la redacción, pero yo lo vi y queda lindo.

furoya · #3 (**permalink**) 23/09/2012, 13:39

Cita:

Iniciado por furoya

Y hay una que no contempla directamente el CSS ... consiste en aumentar el tamaño de la fuente hasta que la línea ocupa todo el ancho de su contenedor.

Este efecto se hacía con javascript, pero resulta que ahora sí está contemplado en CSS...3.

Código:

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>TEXTO AJUSTA SU TAMAÑO AL DE LA CAPA.</title>
</head>
<body>
<div style="background: red; width: 70%; font-size: 7vw; resize: horizontal; 
overflow: hidden; font-family: sans-serif; white-space: nowrap; text-align: center; ">
<div style="font-size: 9vw; width: 100%; background: yellow;">Foros del Web.</div>
<div style="font-size: 30vw; width: 100%; background: lime;">CSS</div>
<div style="font-size: 14vw; width: 100%; background: silver;">Unidad <code>vw</code></div>
</div>
</body>
</html>

No funciona con el resize de la propia caja, pero si redimensionan la ventana, verán como el texto se ajusta solo, siempre y cuando le den un reload al documento. Una desventaja de este método es justamente que no sigue "en tiempo real" el tamaño de los contenedores del texto, y nada más ve los valores de referencia cuando se carga la página.
Con javascript, por supuesto, no existe ese problema.

Es más, podemos hacer una pequeña trampa, y agregar una "recarga automática JS" al redimensionar, que no cambia el tamaño por programa sino que solamente hace el reload. De las medidas se sigue ocupando el CSS.

Código:

...
<body onresize="history.go(0)">
...

Un último detalle, a la fecha solamente anda en Chrome.

http://www.w3.org/TR/css3-values/#vi...lative-lengths

Ajustar texto

pzin · #4 (**permalink**) 23/09/2012, 13:57

Cita:

Iniciado por furoya

Un último detalle, a la fecha solamente anda en Chrome.

En Safari también. Aunque son casi sinónimos.

noruas · #5 (**permalink**) 23/09/2012, 23:32

Una pregunta, hay una magnitud en el tamaño de las fuentes que no conozco, "vw" ¿qué tipo de medida es?

furoya · #6 (**permalink**) 24/09/2012, 08:09

Cita:

Iniciado por Bonez

En Safari también. Aunque son casi sinónimos.

Sí, es cierto. Se me pasó. Gracias.

Cita:

Iniciado por noruas

Una pregunta, hay una magnitud en el tamaño de las fuentes que no conozco, "vw" ¿qué tipo de medida es?

Hay un nuevo invento que descubrí hace poco. Se llama Google; te recomiendo probarlo.
Para que no pierdas tiempo ahora, aprovecha que en mis post suelo poner enlaces relacionados, y mira el que dejé 2 post más arriba.

Saludos
furoya

noruas · #7 (**permalink**) 24/09/2012, 08:55

Te puede la soberbia Furoya, podrias ser un poco mas cortes a la hora de escribir.

Al margen de los modos, no he entendido bien la funcionalidad de las medidas "Viewport-percentage lengths" dice que el tamaño cambia proporcionalmente al tamaño original del contenedor, pero, ¿eso no es lo que hacen las medidas en % tambien? ¿Cual es la diferencia entre ambas? ¿Cuando es mas correcto usar uno que otro?

Por otro lado muy buen enlace, ha leido muchas cosas que desconocia sobre las unidades y funciones en css.

furoya · #8 (**permalink**) 24/09/2012, 11:54

En este sitio parecen tener un criterio muy particular para juzgar las faltas de respeto.
Agradecé que tengo más sentido del humor que soberbia; porque venir a preguntar por una medida sobre la que dejé toda la información oficial después de mostrar su uso, no es algo que te festejen en cualquier otro lado.
Pero no te preocupés, que yo no me ofendo.

La diferencia con los porcentajes es evidente : no le podés poner a una fuente su tamaño relacionado al ancho, alto, o medida calculada entre ambos, de su contenedor. Está perfectamente explicado.
(Aunque hay formas de ponerle al contenedor sus medidas relacionadas con la de la fuente.)

Quizá nuestro problema es el inglés, la documentación oficial está en ese idioma y la mayoría de nosotros no nos manejamos cómodos con la lengua de Shakespeare.

Igual ese Google está muy bueno, veo que todavía no empezaste a usarlo. Y esta vez no te voy a dejar un enlace relacionado.

noruas · #9 (**permalink**) 24/09/2012, 23:34

A la soberbibia se unen el desconocimiento del significado de la palabra y el cinismo, yo no hable de tus faltas de respeto en momento alguno ;), aun asi gracias por la sesgada nueva info que dejastes, ya consegui informacion sobre esas medidas.

furoya · #10 (**permalink**) 25/09/2012, 14:22

Cita:

Iniciado por noruas

...ya consegui informacion sobre esas medidas.

Aaah! ¿Viste qué bueno que está ese Google?

Con respecto a hablar de mis faltas de respeto ... sí, por supuesto; el día que lo haga podrás hablar, mientras tanto, no.
Lo del cinismo es cierto, tiene que ver con ese (retorcido) sentido del humor que profeso. No sorprende a nadie, lo exhibo desde que llegué. Y todavía que en este Foro soy demasiado medido, tendrías que ver lo que era en otros donde cabía más el offtopic y la opinión personal. Hace poco una administradora me confesó (a medias) que "cree" que habían considerado la idea de banearme por eso.

Sobre la soberbia (o "soberbibia", es lo mismo), siempre me lo han dicho, y lo comprendo perfectamente ¿'soberbio' no es lo mismo que 'genial', 'magnífico', 'imponente',...?

Y lo de "sesgada información", es totalmente cierto. Por lo general vengo a los temas a hacer aportes; si divago, al menos pongo un dato, una idea que sirva al asunto en cuestión.
En el post anterior recordé (más que nada para algún novato) que se puede ajustar una caja según la medida del texto que contiene. Ahora aprovecho para aclarar que es con las unidades em, ex, rem, pero ya no voy a escribir ejemplos porque el sitio está lleno.
Y por más sesgada, parcial, escueta información que ponga, viene siendo más de lo que estás poniendo vos. Gente que se queja de mi estilo hay un montón, pero que además colaboren ... pocos.

Igual, sí quiero agregar algo (ahora más en serio): cuando hablé de tu falta de respeto preguntando en mi cara por lo que ya había posteado, sabía que no lo habías hecho a propósito. Es más, creí que estabas tratando de forzar algún debate sobre fuentes y unidades relacionadas con las cajas. Y eso podía haber sido un aporte.
Pero como dije antes, ya hay miles de ejemplos y desarrollos en la web sobre el tópico. No estamos discutiendo sobre una nueva idea, un truco, un hack que sabemos no va a estar en los tutoriales sino de un uso "de manual". Es CSS, nada más. Algo que todos deben saber antes de meterse en un foro especializado en CSS. O sería otra de esas "faltas de respeto" de las que aquí no toman demasiada conciencia.
Sabemos que eso tiene que ver con la educación ... pero traten de venir a cualquier foro ya "pre-educados", los que tenemos la suerte de haber recibido una formación tampoco podemos estar todo el tiempo explicando lo que debería ser obvio. Yo me tomo ese trabajo, pero no es mi obligación. Quiero volver a debatir sobre tecnología alguna vez en este sitio.

(Antes de que me echen definitivamente.

)