Une typographie personnalisée

Le texte de base

Même le texte de base sous SPIP, celui que vous entrez dans un des formulaires de l’espace privé, en tapant au kilomètre, génère des tags HTML particuliers. En effet, il est découpé en paragraphes ; à chaque paragraphe correspond un tag <p class="spip">. Nous pouvons donc associer à ces paragraphes un style bien précis, qui ne sera pas appliqué au reste du texte de la page.

Commençons par choisir une police de caractères. Pour cela on utilise la propriété font-family, qui prend pour valeur un ou plusieurs noms de polices de caractères à utiliser. Pour un corps de texte comme celui d’un article il vaut mieux une fonte à empattements ; mettons que vous vous décidiez pour « Bookman Old Style ». Ajoutez donc à votre fichier mes_styles.css la règle suivante :

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

(notez qu’un nom de fonte en plusieurs mots doit être entouré de guillemets...) Un problème peut survenir si la police « Bookman Old Style » n’est pas installée sur l’ordinateur de vos visiteurs : chaque ordinateur a une configuration différente, et n’oubliez pas que les fontes « gratuites » de Microsoft sont rarement installées sur Linux et Macintosh... Il est préférable de prévoir ce cas et spécifier une ou plusieurs polices de remplacement successives :

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

On spécifie ici comme remplaçantes successives de Bookman, la classique « Times New Roman », et en dernier recours « serif ». « serif » n’est pas une police en soi, c’est un code générique qui indique au navigateur de prendre la police à empattements par défaut de l’ordinateur ; de même « sans-serif » spécifie la police sans empattements par défaut (en général Arial ou Helvetica).

On retiendra cette règle importante : dans la propriété font-family, il convient toujours de proposer plusieurs choix successifs pour s’adapter aux polices de caractères installées sur l’ordinateur du visiteur. Notons que cette règle est aussi valable pour le tag <font face="..."> du HTML traditionnel.

Bien évidemment d’autres propriétés sont à votre disposition. Vous pouvez par exemple régler la taille du texte avec la propriété font-size. Notez cependant que les navigateurs disposent d’un réglage pour configurer la taille du texte par défaut, et le texte principal de vos pages ne devrait pas outrepasser ce réglage, pour des raisons de confort visuel : c’est l’utilisateur qui choisit la taille de base, non le webmestre.

Notez bien que les styles que vous appliquez aux tags <p> s’appliquent à chaque paragraphe en tant qu’objet autonome. Cela autorise certains effets intéressants, comme par exemple d’indenter la première ligne des paragraphes en utilisant la propriété text-indent. Par défaut, cette propriété prend pour valeur zéro, c’est-à-dire qu’il n’y a pas d’indentation. On peut la modifier pour obtenir, sur chaque première ligne, un décalage de soixante pixels à droite :

p.spip {
    text-indent: 60px;
}

Appliquer un traitement différencié

Plutôt que de nous étendre sur la panoplie de styles générés automatiquement par les raccourcis typographiques de SPIP, et que vous pourrez habiller à votre guise (ils sont passés en revue dans les articles suivants de cette même rubrique), étudions ici le cas où vous voulez appliquer un habillage différent à un même style, selon sa position dans ce squelette. Ce besoin est légitime : on veut par exemple afficher le corps de texte dans une police à empattements avec indentation en début de paragraphe, mais le post-scriptum dans une police plus « lisse » (sans empattements) et plus petite, sans indentation.

Cette opération est en réalité très simple. Il faut d’abord modifier votre squelette afin d’introduire les éléments qui permettront de discriminer le texte et le post-scriptum. Cela prendra par exemple, à l’intérieur de la boucle ARTICLES principale, la forme suivante :

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

Il faut ici recalculer la page (car on a modifié le HTML...). L’affichage du navigateur est toujours le même : normal, nos nouveaux styles ne faisant l’objet d’aucune règle dans la feuille de style, ils sont ignorés par le navigateur. Remédions-y :

.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 grande nouveauté ici ne réside pas dans les propriétés graphiques mais dans la façon dont on les applique au code HTML. En effet, « .texte p.spip » signifie : « cette règle s’applique à tous les tags <p class="spip"> qui sont contenus dans un tag ayant un attribut class égal à “texte” ». On pourrait restreindre un peu cette règle en spécifiant que le tag parent doit en plus être un tag <div> (le début de la règle s’écrirait alors « div.texte p.spip ») ; mais comme nous maîtrisons la structure de nos propres squelettes, il n’est pas utile de rendre la feuille de style très restrictive.

Toujours est-il que cette feuille de style a le résultat voulu : les paragraphes du corps de texte s’affichent avec une indentation, ceux du post-scriptum dans une fonte plus petite et sans indentation. Pour vérifier que ces règles s’appliquent bien à chacun des paragraphes <p class="spip"> et non au <div class="..."> englobant, on peut s’amuser à définir un cadre noir :

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

On note que chaque paragraphe du corps de texte (mais pas du post-scriptum) est entouré de son propre cadre noir. Si on avait simplement écrit « .texte » au lieu de « .texte p.spip », c’est le texte tout entier qui serait entouré d’un unique cadre noir englobant. Remarquons en passant l’apparition de la propriété border...

Note : cette astuce, consistant à tracer un cadre de couleur pour savoir à quels éléments s’applique précisément une règle, peut être très utile quand votre feuille de style s’enrichit. N’hésitez pas à l’utiliser si vous commencez à perdre pied...

Cette méthode est très puissante et se généralise avec profit pour la structuration de votre mise en page.