Una sangría francesa incluye un desplazamiento de todas las líneas de un párrafo excepto la primera. Las sangrías francesas son útiles cuando se quieren agregar gráficos al comienzo del párrafo. Añadiendo al listado de ejemplos que tenemos sobre CSS, en el artículo de hoy, veremos cómo hacer una sangría francesa en CSS.
Un ejemplo de párrafo con sangría francesa sería el siguiente:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
Podemos observar los desplazamientos de todas las líneas, menos de la priemra.
Mediante CSS podemos definir un estilo para poder tener párrafos con sangría francesa. Para ello tenemos que buscar las propiedades que cumplan las características de la sangría francesa. Estas propiedades buscan que el párrafo esté desplazado a la derecha, lo cual conseguimos mediante padding-left y que la primera línea esté adelantada hacía la izquierda, lo cual vamos a obtener utilizando text-indent.
El estilo CSS para poder aplicar nuestra sangría francesa nos quedará de la siguiente forma:
p.francesa {
text-indent: -30px;
position: absolute;
padding-left: 40px
}
En este código vemos que asignamos la propiedades al elemento p y en concreto a la clase «francesa». Así que tendremos que utilizar esta clase y el elemento p dentro de nuestra página HTML. La página nos quedará de la siguiente forma:
<p class="francesa">En un lugar de la Mancha, de...</p>
De esta manera tan sencilla y manejando las propiedades padding-left y text-indent, podemos crear una sangría en CSS. Espero que lo utilicéis mucho y así podáis mejorar las sangrías dentro del contenido de vuestras webs.
