Customising typography

The basic text

Even the basic text which you type under SPIP, say into a form, adding no style at all, creates particular HTML tags. The text, in fact, is cut into paragraphs, and a <p class="spip"> tag corresponds to each of them. So we can apply a particular style to them, which will not be applied to the rest of the text.

Let’s start by choosing a typeface. To achieve this, use the font-family property, and add one or several values to it, i.e. different font names. For a text body like that of an article, a serif font type is best, so let’s say you’ve decided on “Bookman Old Style”. Add the following property to your my_styles.css file:

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

(Mind the " " that must be added to font names consisting of more than one word, and no hyphen).
A problem may crop up if the Bookman Old Style font face isn’t installed on your visitors’ computers. In fact, every computer has their own configuration, and bear in mind that Microsoft’s so-called “free” fonts are very seldom installed on Linux or Macintosh. So you’d better consider such cases, and specify one or several successive replacement fonts:

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

As successive alternatives for Bookman Old Style, we’ve set the well-known Times New Roman font, and as a last resort “serif”. “serif” isn’t a particular font type but a “keyword”, a kind of generic code that tells the navigator to use the serif font set as default on a computer or a browser. In the same way, “sans-serif” specifies the default sans-serif font — usually Arial or Helvetica).

This important rule ought to be emphasised: in the font-family property, it’s always best to offer at least several successive selections to adapt your presentation layout to the font types installed on the visitor’s computer. Let’s note that this rule is just as valid for the rather obsolete HTML <font face="..."> tag.

Of course other properties are available to you. For example, you can set the text size using the font-size property. Note, however, that browsers are set to configure the default text size, and these settings should not be overriden by your main body text size, for reasons of visual comfort. The basic size is set by the user, not by the webmaster.

Be aware that the styles you’ll apply to <p> tags will affect every paragraph as an independent object. This gives scope to some interesting effects, such as, for instance, first-line indents for paragraphs (using the text-indent property). By default, this property has a zero value, i.e. no indent. It can be edited to get a right, 60-pixel indent:

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

Hypertext links

Those of you who’ve already tackled CSS know the appearance of links can be modified on the entire site in this way:

a {
    color: green;
    text-decoration: none;
}

This style rule specifies that all hypertext links, i.e. all <a ...> tags, whether with a class attribute or not, will be displayed in green without being underlined [1]

SPIP enables you to go further than this. When generated by typographical shortcuts, hypertext links are given several different styles:

-  when the link is an internal one (pointing to another page on your site), the tag is <a class="spip_in">;
-  when the link is external (pointing to a different Web site), the tag is <a class="spip_out"> [2]
-  finally, when the URL is typed without a title the tag is <a class="spip_url">.

All this makes it very easy to show the three types of link in a different way:

a {
    color: green;
    text-decoration: none;
}
a.spip_in {
    color: blue;
}
a.spip_out {
    color: red;
}

These style rules display internal links in blue, and external links in red. All other links, including those not generated by SPIP, will be displayed in green. Moreover, all the links will be displayed without underlining since the text-decoration property, defined in the first style rule, hasn’t been modified in the following ones; so it applies automatically to all the <a ...> type elements.

A fundamental feature of style sheets can be noted here: graphic rules apply from the more general to the more specific. This order enables a general behaviour for most elements to be set, while the same behaviour can be changed for a smaller sub-group of elements. This feature alone makes style sheets very powerful.

Applying a separate format

Rather than expounding on the gamut of styles automatically generated through SPIP’s typographical shortcuts on which you can apply the styles of your choice (see “SPIP and Style Sheets”), let’s examine the case in which you’d like to give a different style to the same element, according to its position on the page, which is nothing out of the ordinary. For example, you may want to display the body text in a serifed font with first-line indent but the post-scriptum in a smaller, sans-serifed font, with no indent.

This can be achieved very easily. First you need to edit your template in order to insert the elements that’ll make the text and the post-scriptum look different. So inside your main ARTICLES loop you can write the following:

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

Then the page must be refreshed because the HTML markup has been modified. However, the displayed page in the browser hasn’t changed — which is as it should be because our new styles aren’t recorded in the CSS file, so are ignored by the browser. Let’s put that right by adding the following style rules:

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

The big new thing here doesn’t lie in the graphic properties but in the way they’re applied to the HTML code. As a matter of fact, “.text p.spip” means “this rule applies to all the <p class="spip"> tags that are contained in a tag with a class attribute equal to ‘text’”. This rule could be somewhat restricted by specifying that the parent tag must be a <div> tag — the rule would then begin with “div.text p.spip” but having control over the structure of our own templates makes it unnecessary to have such a restrictive style sheet.

Anyhow, that style sheet has given us the right result — body text paragraphs are indented, the post-scriptum ones show no indent, and a smaller font. In order to check that these rules apply to every <p class="spip"> and not to the surrounding <div class="...">, you can make a black frame for fun:

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

Every paragraph of the text body (unlike the post-scriptum) has its own black borders. If you’d merely written “.text” instead of “.text p.spip” the whole text would have been set within one black frame. Note here, the use of the property border

Note: this trick of adding coloured borders to make sure which elements a rule really applies to can be very handy when your style sheet gets bigger. Feel free to use it if you feel you’re getting out of your depth...

So you can see now how powerful this CSS stuff is, and using it widely, how much it can help you in making your layout.