Problema con letra capital (solucionado)

Jamlet · #1 (**permalink**) 10/06/2009, 02:20

Tengo que poner en un párrafo la primera letra bastante más grande que el resto. Lo he conseguido usando <span> y también lo logré usando :first-letter pero el problema es que la primera linea, la que tiene la letra capital, se monta encima de la linea inferior y por mucho que hago no soy capaz de que entre la primera y segunda linea quede un espaciado igual que entre el resto de lineas. ¿Cómo puedo arreglarlo?

Espero haberme explicado bien y que alguien sepa ayudarme.

Muchas gracias

Jamlet · #2 (**permalink**) 10/06/2009, 02:23

Joe, parece que tengo que publicar la pregunta para encontrar la solución. Casi siempre me pasa igual. Lo he solucionado usando :first-letter y line-height. Perdón por las molestias.

PatomaS · #3 (**permalink**) 10/06/2009, 02:28

Hola

Algo extraño ocurre en tu codigo, porque :first-letter aumenta la letra hacia arriba y la derecha.

Revisa que no hayas modificado alguna propiedad de alineamiento.

Para que estes seguro de su comportamiento, crea una pagina sin mas contenido que un parrafo de varias lineas y usa el :first-letter, veras que la modifica como te comento.

En cualquier caso, recuerda que tambien tienes a tu disposicion el line-height para ajustar la separacion entre lineas.

Felicidad

kseso? · #4 (**permalink**) 10/06/2009, 03:45

Hola Jamlet. Sí, suele pasar, pero no es tan malo

Mejor eso que lo contrario.

Buenos días, PatomaS, creía que con first-letter el crecimiento lo hacía dentro del párrafo al que pertenece, hacia la derecha y abajo. Pero mejor hago la prueba y ahora comento.

Un saludo

kseso? · #5 (**permalink**) 11/06/2009, 06:58

Me había olvidado del tema.

first-letter ocupa el espacio del párrafo al que pertenece.

Un saludo

PatomaS · #6 (**permalink**) 11/06/2009, 09:13

Hola

Bueno kseso?, no hay que ser tan tajante ya que, por ejemplo, en este caso, la investigación que hiciste no está completa.

;)

Empezamos con la documentación oficial sobre :first-letter en el W3C. Hay dos tipos de uso de letra capital, hacia arriba y hacia abajo, sin embargo, para que vaya hacia abajo, has de flotarlo, tal y como se aprecia en el ejemplo que pones, pero la mecánica por defecto, es hacia arriba.

Saliendo de la web y pasando al idioma en si, tenemos múltiples ejemplos en diferentes paises, idiomas y épocas, pero así rapidamente, te comento.

En castellano e inglés, hace tiempo era muy común que fuera hacia arriba, al igual que en francés y aleman, sin embargo, ambos modificaron sus estilos con el tiempo, empezando a usarlo hacia abajo, en la actualidad, es muy común encontrar letras capitales que sobresalen del párrafo hacia arriba y bajan una o dos líneas hacia dentro. En alemán el estilo hacia rriba ha sido generalmente predominante y en francés pasó pronto hacia abajo.

Puedes conseguir libros de diferentes épocas con ambos estilos. Por no mencionar los que acompañaban a las letras con ilustraciones o incluso disfrazaban la letra en la ilustración que ocupaba el espacio inicial del primer párrafo de cada capítulo en el libro. Generalmente estas ediciones se consideran muy valiosas y el estilo es con la letra hacia arriba o un poco arriba y un poco hacia adentro.

En la literatura infantil y juvenil, lo normal es que vaya hacia rriba, en literatura para adultos, depende del tipo de libro, en publicaciones como revistas y periódicos depende del diseño y la formalidad que le quieran dar, siendo hacia arriba más libre y aireado y hacia adentro más formal.

Finalmente, volviendo al mundo web, puedes revisar este ejemplillo, en el verás que si no se le aplica el float, va hacia arriba.

Código HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="es" lang="es">
<head>
	<title>Ejemplo del uso de :first-letter</title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<style type="text/css">
		p:first-letter { font-size: 300%; }
		#segundo:first-letter { font-size: 300%; float: left; }
	</style>
</head>
<body>
	<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
	<p id="segundo">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</body>
</html>

Felicidad

kseso? · #7 (**permalink**) 11/06/2009, 09:49

Hola Patomas.
Antes de nada, mis disculpas si te sonó tajante mi comentario. No era mi intención sonar así, por eso comenzaba con "Buenos días, PatomaS, creía que...".

Y efectivamente, tienes toda la razón al poner de manifiesto que el crecimiento de first-letter (en css) depende de si está flotado o no. Y como esa es una propiedad que hay que definirla expresamente, cabe decir que yo estaba errado en mi observación a tu comentario.

Al cesar lo que es del cesar. Y a ti, Patomas, el reconocimiento de estar en lo cierto en tu comentario (#3). Gracias por la aclaración.

Un saludo.

Mikmoro · #8 (**permalink**) 11/06/2009, 16:04

Interesante información, pardiez.