Foros del Web » Creando para Internet » CSS »

Problema con letra capital (solucionado)

Estas en el tema de Problema con letra capital (solucionado) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/06/2009, 03:20
 
Fecha de Ingreso: mayo-2008
Mensajes: 163
Antigüedad: 9 años, 7 meses
Puntos: 1
Problema con letra capital (solucionado)

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
  #2 (permalink)  
Antiguo 10/06/2009, 03:23
 
Fecha de Ingreso: mayo-2008
Mensajes: 163
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Problema con letra capital

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.
  #3 (permalink)  
Antiguo 10/06/2009, 03:28
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: Problema con letra capital (solucionado)

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
__________________
¡ hey, hou, hou, hey !
  #4 (permalink)  
Antiguo 10/06/2009, 04:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con letra capital (solucionado)

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 11/06/2009, 07:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con letra capital (solucionado)

Me había olvidado del tema.


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

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 11/06/2009, 10:13
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: Problema con letra capital (solucionado)

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
__________________
¡ hey, hou, hou, hey !
  #7 (permalink)  
Antiguo 11/06/2009, 10:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con letra capital (solucionado)

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 11/06/2009, 17:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con letra capital (solucionado)

Interesante información, pardiez.
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




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