Mijn standaard stylesheet (nu ja, een gedeelte)

Hier bespreek ik het grootste gedeelte van mijn standaard stylesheet. Deze bevat de meeste van mijn standaard stijlen, maar niet alles. Ik zal per stuk bespreken het hoe en waarom. Let wel, dit is mijn beleving. Wil je het anders, ga vooral je gang.

Als eerste de <html> en <body> tag. Hierin zet ik de marges en dergelijke allemaal op 0. Ik wil weliswaar een kleine marge, maar dat zet ik ergens anders. Ook zet ik mijn standaard font op een serif font. Ik vind dat prettiger lezen dan een niet serif font. Voorbeeld van een serif font is Times of Garamond. Een non-serif font is bijvoorbeeld Arial. Daarnaast zet ik de alignment standaard op uitvullen (‘justify’). Dit is standaard in de meeste boeken. Echter, sommige (veel?) readers kunnen hier nog niet mee omgaan en zullen dit automatisch veranderen in links uitvullen. Ik zet het er toch in voor de andere readers en voor de toekomst. Toekomstige readers zullen het wel aankunnen.


html, body {
margin: 0;
padding: 0;
border-width: 0;
height: 100%;
font-family: serif;
text-align: justify;
}

De volgende is interessant. Hierin zeg ik eigenlijk dat ik rondom mijn tekst een kleine marge wil van 5 pt. Deze zal niet meeschalen met het lettertype grootte. Deze kun je groter of kleiner maken. Ik doe het niet, want een van mijn readers heeft een oudere versie van ADE erop staan die heel hinderlijk een soort paginanummers aan de rechterkant zet. Als ik de marge daar weghaal, staat die in mijn tekst. Daarnaast vindt ik het rustiger voor de ogen om een kleine marge te hebben.
Ik zet het hier, omdat dan elke pagina de marge heeft.


@page {
margin: 5pt;
}

Je kunt hier een speciale klasse voor maken, maar in principe wil ik mijn standaard paragraaf gewoon simpel kunnen definiëren als <p> en niet als, bijvoorbeeld, <p class=”normaal”>. Scheelt tikwerk… Ik wil geen extra marges voor de paragrafen hebben en een normale regelhoogte. Ik wil wel inspringen en ik wil dat dit proportioneel gebeurd afhankelijk van mijn lettergrootte. Grote letters en een klein beetje inspringen ziet er niet uit. Daarom gebruik ik voor de inspring, net als voor de letter grootte de eenheid em.


p {
font-size: 1em;
text-indent: 1em;
line-height: normal;
margin: 0;
}

Ik wil dat de eerste paragraaf in een hoofdstuk en na een witte regel (scene overgang) niet inspringt. Dat is bij papieren boeken ook meestal zo. Dat kan ik op verschillende manieren doen, maar ik wil zoveel mogelijk automatisch laten doen. In principe zeg ik in de volgende code, dat als er een paragraaf volgt op een header, dat er geen inspring is. Voor de paragrafen na een sceneovergang moet ik de tag veranderen van <p> naar <p class=”initial”>. Dit kan vaak met een simpele zoek en vervang in een keer.


h1 + p {
text-indent: 0;
}

h2 + p {
text-indent: 0;
}

h3 + p {
text-indent: 0;
}

p.initial {
text-indent: 0;
}

Aangezien sommige opmaak van paragrafen vaker terugkomt, maak ik daar klassen voor aan. Die kan ik gewoon toevoegen naar gelang gebruik. De opmaak van stijl die ik aangeef, komt erbij. Zo zal <p class=”schuin”> de opmaak hebben van een gewone <p> tag, toegevoegd met schuinschrift. Als ik die tekst ook gecentreerd wil hebben, maak ik er <p class=”schuin midden”> van.


p.schuin {
font-style: italic;
}

p.midden {
text-align: center;
}

Mijn headers zijn mijn persoonlijke voorkeur en die pas ik aan per boek wat ik erbij vindt passen. Ik gebruik ze meestal als volgt. De <h1> is meestal de titel van het boek in het geval van een omnibus of titel van het verhaal in het geval van een verhalenbundel. De <h2> is dan vaak de naam van het hoofdstuk en <h3> de naam van de sectie. Secties zijn er natuurlijk niet altijd.


h1 {
padding-top: 100pt;
text-align: center;
}

h2 {
padding-top: 20pt;
padding-bottom: 30pt;
text-align: center;
}

h3 {
font-style: italic;
}

Soms wil je als scene overgang een klein streepje hebben. Je kunt natuurlijk eenvoudig een <hr /> gebruiken, maar dat geeft een streep over de volledige breedte. De stijl optie ‘size’ werkt echter niet. Dus passen we een truc toe. Ik heb er twee in mijn stylesheet. Een voor een sceneovergang (bijvoorbeeld) en een als tussenlaag tussen tekst en eindnoten. Gebruik is eenvoudig, <hr class=”small” /> voor de een en <hr class=”left” /> voor de ander.


hr.small {
margin-left: 40%;
margin-right: 40%;
}

hr.left {
margin-left: 40pt;
margin-right: 80%;
}

Het complete bestand: Icon of Standaard Stylesheet Standaard Stylesheet (652.0 B)

Toxaris © 2015 Frontier Theme