Een aangepaste typografie

Na een algemene introductie tot stylesheets volgen nu enkele praktische en gangbare toepassingen in SPIP.

We gaan ons hier bezighouden met de stijlen die worden toegepast door de typografische snelkoppelingen in een getypte tekst in SPIP. Of we nu een artikel, een nieuwsbericht of een rubriek tonen, doet niet ter zake: de stijlen hebben altijd dezelfde namen. Toch zal dat ons er niet van weerhouden toch een unieke grafische styling toe te passen...

De basistekst

Zelfs gewone basistekst die je via een formulier in het privé gedeelte aan SPIP toevoegt, voegt HTML tags toe. Doordat je je tekst in paragrafen indeelt, zal SPIP rond die paragrafen een tag <p class="spip"> toevoegen. Je kunt hier dus een specifieke styling op toepassen die niet op de rest van de tekst van de pagina van toepassing is.

We beginnen met de keuze van het lettertype, de font-family, die één of meer lettertypes kan bevatten. Voor de tekst van een artikel kun je beter een wat "vetter" lettertype kiezen. Laten we kiezen voor «Bookman Old Style». Aan je bestand mijn_styles.css voeg je de volgende regel toe:

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

(merk op dat een lettertype dat uit meerdere woorden bestaat tussen dubbe aanhalingstekens moet worden geplaatst...) Er kan een probleem optreden wanneer het lettertype «Bookman Old Style» niet op de computer van je bezoeker is geïnstalleerd: elke computer heeft een andere configuratie en bedenk dat de «gratis» lettertypes van Microsoft maar zelden op Linux en Macintosh zijn geïnstallleerd... Daarom kun je beter meerdere alternatieve letterypes vermelden:

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

Worden de eerste twee niet gevonden, dan vallen we terug op «serif» wat geen lettertype is, maar een generieke code die de browser vertelt het standaard lettertype van de computer met een «schreef» [1] te gebruiken; net zoals «sans-serif» de schreefloze standaard aangeeft (meestal Arial of Helvetica).

Onthoud deze belangrijke regel: zet in font-family altijd meerdere lettertypes. Deze regel is ook van toepassing op <font face="..."> in traditionele HTML.

Diverse andere eigenschappen kunnen naar wens worden aangepast. Zo kun je de lettergrootte aanpassen met font-size. Denk er aan dat de moderne browsers zelf de grootte van de letter kunnen aanpassen. Laat deze keuze dus liever aan de gebruiker over.

De stijl die je toepast op de <p> tags heeft invloed op iedere paragraaf. Zo kun je bijvoorbeeld de eerste regel laten inspringen met de eigenschap text-indent. Standaard heeft deze eigenschap de waarde 0; er wordt dus niet ingesprongen. Dit voorbeeld zorgt voor het inspringen van de eerste regel met 60 pixels:

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

Een afwijkende styling toepassen

Hoe beter je de toewijzing van stijlattributen aan de opmaakcodes van SPIP begrijpt, zoveel gemakkelijker wordt de aanpassing ervan volgens jouw grafische ideeën (je vindt de meeste terug in deze rubriek). we gaan nu bekijken hoe je dat kunt doen, afhankelijk van de positie in een skelet. Je wilt bijvoorbeeld de tekst van een artikel onderscheiden van zijn post-scriptum door een afwijkend lettertype toe te passen, waarbij de PS geen inspringing heeft met een kleinere lettergrootte.

Dat gaat vrij eenvoudig. Om te beginnen pas je je skelet zodanig aan dat beide elementen zich van elkaar onderscheiden. Binnen de lus ARTICLES pas je de volgende syntax toe:

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

Je doet een herberekening van de pagina (omdat de HTML is gewijzigd) maar je ziet nog geen verschil, omdat je eerst deze elementen in je stylesheet zilt moeten definiëren. Dat doe je zo:

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

Speciaal hieraan zijn niet de grafische eigenschappen zelf, maar de manier waarop ze worden toegepast op de HTML. De regel «.tekst p.spip» betekent: «deze regel is van toepassing op alle tags <p class="spip"> die zich bevinden binnen een tag met attribuut class gelijk aan “tekst”». Je kunt dit nog verder beperken door aan te geven welke tag het moet zijn, bijvoorbeeld een tag <div> (en in je stylesheet schrijf je dan «div.tekst p.spip»); maarbij een goede structuur van je skelet is dit overbodig en gebruik je dit soort gedetailleerde definities alleen in uitzonderlijke gevallen.

We hebben nu het gewenste resultaat. Om te controleren dat de regel daadwerkelijk op iedere paragraaf <p class="spip"> en niet op de omhullende <div class="...">, kun je een zwart kader uitproberen met:

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

Als het goed is, krijgt iedere paragraaf nu een zwart kader, maar niet je post-scriptum). Hadden we de syntax «.tekst» gebruikt in plaats van «.tekst p.spip», dan was alleen een kader geplaatst om de gehele tekst en dit dankzij de eigenschap border...

Voetnoot

[1de dunne dwarsstreepjes aan het uiteinde van de verticale en horizontale balken van een letter

Auteur Hanjo Gepubliceerd op:

Vertalingen: عربي, català, Deutsch, English, Español, français, italiano, Nederlands