juanjonavarro.com

secciones

Sangría francesa en CSS

Nunca se me había ocurrido como crear una sangría francesa en HTML+CSS, quizá porque no es un efecto muy usual en páginas web. Es muy sencillo. Pero antes una pequeña definición:

Una sangría francesa es un estilo de sangría de párrafo en la que la todas las líneas están indentadas excepto la primera. Es sobre todo útil para listados de elementos (donde no utilicemos topos) que se muestren en columnas estrechas (y hoy en día, con los móviles, cualquier texto puede mostrarse así) ya que si no es difícil diferenciar entre cuando es un elemento nuevo o cuando es la continuación del anterior. En inglés se le llama hanging indent.

Bueno, para lograrlo es facilísimo. Simplemente hay que utilizar el conocido text-indent con valor negativo:

p {
    margin-left: 2em;
    text-indent: -2em;
}

Aquí lo puedes ver en un codepen, donde se puede apreciar el efecto. Como se puede ver, en la lista con sangría francesa (a la izquierda) se diferencian perfectamente los distintos elementos, mientras que en la lista de la derecha se confunden unos con otros.

See the Pen PwVdmq by Juanjo Navarro (@juanjonavarro) on CodePen.


Artículos anteriores...

Emoticonos en una página web

Estuve buscando soluciones para poder añadir emoticonos a una página web, concretamente para este weblog, tanto en las entradas como en los comentarios. Quería que fuera una solución de cliente, en javascript, ya que no quiero que el html generado... seguir leyendo

Archivando un proyecto: Locos Bajitos

Locos Bajitos fue uno de los weblogs que monté hace tiempo y que también hace tiempo que estaba sin actividad. La última entrada es del 2007. Durante varios años no me decidía a cerrarlo porque odio el linkrot pero lo cierto... seguir leyendo

...leer el archivo completo