zaterdag 22 juni 2013

14. p versus br: tekst lijnt niet goed uit / witruimte tussen paragrafen

Een epub-bestand bestaat eigenlijk uit een hele hoop verschillende bestanden waaronder ook html- of xhtml-bestanden.

Een goede handleiding om html te leren vind je op http://www.w3schools.com/html/default.asp

Hieronder twee van de meest voorkomende html-tags:

paragraaf: <p> tekst </p>


break: <br />


Een p-tag dient om volledige paragraaf weer te geven.
Een br-tag zorgt voor een onderbreking tussen twee blokken tekst.

justify: p vs. br

Op het eerste zicht lijkt er geen verschil te zijn tussen een p-tag en een br-tag. Beide zorgen er voor dat het volgende stukje tekst verder gaat op de volgende lijn.
Dit is niet het geval. Een <br> tag mag enkel gebruikt worden voor een 'line-break' binnen een paragraaf.

Je kan het verschil tussen een p-tag en een br-tag vergelijken met het gebruik van een hard return (enter) en een soft return (ctrl+enter) in Word.

Als je je tekst wilt uitlijnen over de volledige breedte van de pagina, dan zal je zien dat er een verschil is tussen een hard return (<p></p> in een epub) en een soft return (<br> in een epub).
met <p>:








met <br>:


Gebruik je een soft return of de br-tag om een nieuwe lijn te beginnen, dan zal je zien dat je tekst foutief uitlijnt.

 De <p> </p> tags zijn de enige correcte tags om ja paragrafen in te delen.

Anderzijds kan het gebeuren dat er te veel wituimte zit tussen je paragrafen als de p-tag gebruikt.


 Dit heeft er mee te maken dat in je 'stijlen' niet staat gedefinieerd dat er geen spatie mag zitten tussen je paragrafen.
Om dit aan te passen ga je op zoek moeten gaan naar de 'stijl' die de vorm van je paragrafen definieert. Deze stijl kun je terugvinden in het xhtml-bestand zelf of in een externe stylesheet.

Externe stylesheet:

open je epub in Sigil

Klik links in het menu op 'styles':




Normaal gezien zit er in het mapje slechts één stylesheet (=css bestand). In sommige gevallen zitten er meerdere in. Je kan ze dan best allemaal bekijken.


Dubbelklik op het css-bestand zodat de nodige info in het rechterscherm verschijnt.
Ga vervolgens op zoek naar de p-tag:




Voeg daar de volgende tekst aan toe:

margin-bottom: 0em;
margin-top: 0em;

 

Zorg er voor dat de extra lijnen tussen de accolades {} staan.

In het html-bestand zelf:

In sommige gevallen heb je geen externe stylesheet. Je merkt dit in Sigil doordat het mapje 'styles' leeg is:



In dat geval worden de stijlen in de xhtml-bestanden zelf bepaald.

Dubbelklik op elk html-bestand apart.

Kijk of je bovenin het bestand de tag <style type="text/css"> kan terugvinden:


Tussen de style-tags vind je allerlei stijlen.
Deze hebben altijd de vorm:
   element (bv. body, a, p,...)
   accolade {
   definitie; (bv. margin-left:3%)
   accolade  }

Bijvoorbeeld:








Heb je een style-tag ga dan op zoek naar de p:







Tussen de accolades kan ook andere info staan.

Voeg hier de volgende tekst toe tussen de accolades:
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;

Indien er tussen je style-tags nergens een p kunt terugvinden, voeg deze dan zelf toe.



Heb je geen style-tags in je bestand, voeg dan de volgende tekst toe.
Zorg er voor dat je dit doet tussen de tag <head> en </head>.




Indien je geen externe stylesheets hebt zoals in dit geval, moet je dit bij elk xhtml-bestand apart doen.
Indien het bovenstaande het probleem niet oplost, dan kan het zijn dat je
   margin-top:0;
   margin-borrom:0;
ook moet toevoegen bij body {} (de body tussen de style-tags)





Geen opmerkingen:

Een reactie posten