Personalizar la tipografía

El texto base

El propio texto base con SPIP, ese que se teclea en los formularios del espacio privado, genera ciertas etiquetas HTML. El texto es separado en párrafos; a cada párrafo le corresponde una etiqueta <p class="spip">. Por lo tanto, podremos asociar a estos párrafos un estilo claramente definido, que no se aplicará al resto de texto en la página.

Empecemos por elegir un estilo de caracteres. Para ello se usa la propiedad font-family, que toma como valor uno o más nombres de fuentes a emplear. Para un cuerpo de texto como el de un artículo, va mejor una fuente serif; supongamos que se elige «Bookman Old Style». Hay que añadir al archivo mes_styles.css la siguiente regla:

p.spip {
    font-family: "Bookman Old Style";
}

(los nombres de fuente que tienen varias palabras deben ir entre comillas...) Un posible problema es que la fuente «Bookman Old Style» no esté instalada en el ordenador de nuestros visitantes: cada ordenador está configurado de forma diferente, y no hay que olvidar que las fuentes «gratuitas» de Microsoft pueden no estar instaladas en Linux o Macintosh... Es preferible prevenir esta posibilidad y especificar una o más fuente alternativas:

p.spip {
    font-family: "Bookman Old Style", "Times New Roman", serif;
}

Aquí especificamos como alternativas sucesivas de Bookman, la clásica « Times New Roman », y como último recurso «serif». «serif» no es una fuente en sí, es un código genérico que indica al navegador que use la fuente serif por defecto del ordenador ; de la misma manera «sans-serif» especifica la fuente sans-serif por defecto (en general Arial o Helvetica).

Hay que recordar esta importante regla: en la propiedad font-family, siempre conviene proponer varias alternativas sucesivas para adaptarse a las fuentes instaladas en el ordenador del visitante. Esta regla también es válida para la etiqueta <font face="..."> del HTML tradicional.

Naturalmente, hay más propiedades disponibles. Se puede, por ejemplo regular el tamaño del texto con la propiedad font-size. Hay que tener en cuenta, no obstante, que los navegadores disponen de opciones para configurar el tamaño predeterminado del texto, y el texto principal de la página no debería sobrepasar ese ajuste por motivos de confort visual: quien elige el tamaño base del texto es el usuario, no el webmaster.

Se debe tener en cuenta que los estilos que se apliquen a las etiquetas <p> se aplican a cada párrafo como objeto autónomo. Esto permite algunos efectos interesantes, como por ejemplo, sangrar la primera línea de los párrafos usando la propiedad text-indent. Por defecto, esta propiedad tiene un valor cero; es decir, que no hay sangría. Se puede modificar para obtener, en cada primer línea de párrafo, una sangría de 1em (más o menos 3 espacios [1]):

p.spip {
    text-indent: 1em;
}

Aplicar un tratamiento diferenciado

Mejor que extendernos sobre la multitud de estilos generados automáticamente por los atajos tipográficos de SPIP, que pueden ser modificados al gusto (se los presenta en los artículos siguientes de esta misma sección), estudiaremos el caso en el que se desea aplicar un aspecto distinto a un mismo estilo, según su posición en el esqueleto. Esto puede ser deseable cuando se quiere, por ejemplo, publicar el cuerpo del texto con una fuente serif e indentación al principio del párrafo; pero el post-scriptum con una fuente más «lisa» (sin los resaltes de las letras serif) y más pequeña, sin indentación.

La operación es realmente muy sencilla. Hay que modificar el esqueleto para introducir los elementos que permitan discriminar el texto y el post-scriptum. Se pondrá, por ejemplo, dentro del bucle ARTICLES principal, el siguiente código:

<div class="texte">#TEXTE</div>
<div class="ps">#PS</div>

Aquí es necesario recalcular la página (ya que se ha modificado el HTML...). Pero el aspecto en el navegador sigue siendo el mismo : normal, los nuevos estilos no son objeto de ninguna regla en la hoja de estilo, y son omitidos por el navegador. Vamos a remediarlo:

.texte p.spip {
    font-family: "Times New Roman", serif;
    text-indent: 50px;
}
.ps p.spip {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 90%;
}

La gran novedad no está en las propiedades gráficas, sino en la forma en que se aplican al código HTML. En efcto, «.texte p.spip» significa : «esta regla se aplica a todas las etiquetas <p class="spip"> contenidas en una etiqueta que tenga un atributo class igual a “texte”». Se podría restringir algo esta regla especificando que la etiqueta padre debe ser, además una etiqueta <div> (el principio de la regla sería entonces «div.texte p.spip»); pero como controlamos la estructura de nuestros propios esqueletos, no es útil hacer la hoja de estilo tan restrictiva.

Así pues, esta hoja de estilo da el resultado deseado: los párrafos del cuerpo de texto se muestran con indentación, los del post-scriptum con una fuente más pequeña y sin indentación. Para verificar que las reglas se aplican bien a cada párrafo <p class="spip"> y no a los <div class="..."> que les incluyen, vamos a divertirnos poniendo un marco negro:

.texte p.spip {
    border: 1px solid black;
}

Comprobamos que cada párrafo del cuerpo de texto (pero no el post-scriptum) está rodeado por su propio cuadro negro. Si se hubiese escrito «.texte» en lugar de «.texte p.spip», sería el texto completo el que estaría rodeado por un único cuadro negro. Señalemos, de paso, la aparición de la propiedad border...

Nota: este truco, que consiste en trazar un marco de color para saber exactamente a qué elementos se aplica una regla, puede ser muy útil cuando una hoja de estilo se hace complicada. No dudes en usarla si te pierdes...

Este método es muy poderoso y su uso general es provechoso para estructurar la composición de la página.

Después de la tipografía de las balizas SPIP, sigamos aprendiendo los CSS y los trucos de SPIP con los formularios.