 |
| 9.4. | Indhold | ||||
 |
9.4.1 | Tekstformatering | |||
|
9.4.2 | Indrykning | |||
|
9.4.3 | Justering af Teksten | |||
|
9.4.4 | Udsmykning | |||
|
9.4.5 | Skyggevirkning | |||
|
9.4.6 | Afstand Mellem Ord og Bogstaver | |||
|
9.4.6.1 | Afstand Mellem Ord | |||
|
9.4.6.2 | Afstand Mellem De Enkelte Bogstaver | |||
|
9.4.7 | Store og Små Bogstaver | |||
|
9.4.8 | Whitespace | |||
Efter at vi har fundet ud af, hvordan vi kan påvirke den skrift, der bruges på hjemmesiden, er det tid at se, hvordan man formaterer selve teksten.
Ligesom i det foregående kapitel har HTML elementer og attributter, der kan meget af det, men uanset om de er under afvikling eller ej, anbefaler [HTML40], at man anvender typografiark i stedet, og det vil vi så gøre.
I HTML adskilles de enkelte afsnit med tomme linier. Det er ikke noget, man behøver at gøre noget for, da det simpelt hen er måden, det bliver gjort på. Sådan!
I bøger ser man også tit, at teksten rykkes lidt ind på den første linie i et afsnit; især i skønlitterære værker, som det så smukt hedder. Den egenskab, som gør dette, hedder "text-indent".
"text-indent" gælder kun for blokelementer, og du kan bruge følgende typer værdier:
Værdien må gerne være negativ ifølge [CSS2] specifikationen, men det er ikke sikkert, browseren vil levere det, du ønsker, hvis den er det. Så lad som om, den kun må være positiv!
P { text-indent: 20pt }
Eksemplet viser, at den første linie rykkes ind som forventet, men at der stadig er en tom linie mellem hvert afsnit. Vil man også af med den, så man får en afsnitsopbygning som i f.eks. en roman, må man definere flere erklæringer i reglen, som fjerner de tomme linier.
I HTML har man hidtil brugt attributten "align" til at justere tekst, men den er under afvikling i [HTML40] til fordel for egenskaben "text-align". Egenskaben virker på alle blokelementer, og den nedarves. Den kan have følgende værdier:
.Centrer { text-align: center }
Dette eksempel viser noget af det, som "text-align" anvendes allermest til, nemlig centrering af tekst.
Jeg beklager meget, men dette afsnit har ikke noget med smukkesering af teksten at gøre, så kvindelige læsere behøver ikke bryde ud i vild jubel. Dette gælder også evt. arkitekter og kunstnere af begge køn. Men I må selvfølgelig gerne, hvis I har lyst.
I stedet drejer dette afsnit sig om egenskaben "text-decoration", der bestemmer aspekter som understreget eller blinkende (gys) tekst.
Egenskaben virker på alle elementer, og den nedarves ikke. Og dog. For sætter man "text-decoration" på et blokelement, påvirker den også alle inline-elementer i blokken. "text-decoration" kan have følgende værdier:
Hvad der blev sagt tidligere om understreget og gennemstreget tekst gælder stadigvæk: understregning frarådes, da det bruges til at indikere links, mens gennemstreget tekst er svært at læse.
Blinkende tekst har en næsten magisk tiltrækning på nye - og uerfarne - websmede. Men det eneste, de som regel opnår, er en forvirrende og uoverskuelig side. Derfor bør denne effekt også kun anvendes med stor forsigtighed.
Eksempler på "text-decoration" i praksis:
<H2 STYLE="text-decoration:underline;">Overskrift med Understregning</H2> <P STYLE="text-decoration:line-through;">Dette afsnit er svært at læse, fordi teksten er gennemstreget.</P> <P STYLE="text-decoration:overline;">Teksten i dette afsnit har en linie oven over teksten, <SPAN STYLE="font-weight:bold;">også denne sætning med fed skrift,</SPAN> <SPAN STYLE="text-decoration:none;">men ikke denne sætning</SPAN>, hvor den er fjernet.</P> <P STYLE="text-decoration:blink;">Endelig et afsnit med blinkende skrift.</P>
Først en overskrift, der er understreget. Det er et af de tilfælde, hvor man - måske - kan acceptere, at der bruges understregning, da det ikke er særligt tit, at overskrifter også er links.
I det efterfølgende afsnit er stregen flyttet en anelse op, idet teksten her er gennemstreget. Som der også står i afsnittet, er dette afsnit svært at læse af netop den årsag. Man kan så undre sig over, hvorfor man har valgt at lave en værdi til gennemstregning, og den eneste fornuftige anvendelse jeg sådan lige kan komme i tanke om er, at det bruges til at markere tekst, som egentlig er slettet, eller som man påtænker at slette.
Så følger et afsnit, hvor stregen er flyttet helt op. Afsnittet viser, hvordan "text-decoration" nedarves fra et blokelement til de inline-elementer (her SPAN), som findes i blokken.
Eksemplets sidste afsnit viser (gys) blinkende tekst.
Som noget helt nyt er det nu muligt at lægge skyggevirkninger på teksten. Det gøres med egenskaben "text-shadow", der har følgende værdisæt:
De to obligatoriske længdeangivelser angiver afstanden til teksten i henholdsvis vandret og lodret retning. Længder angives således:
Negative værdier er tilladt. En negativ værdi placerer skyggen til venstre for resp. over teksten, mens positive værdier placerer skyggen til højre for resp. under teksten. Angiver man to nullængder, kommer der en skygge hele vejen rundt.
Den tredje længdeangivelse er valgfri. Den bruges til at angive størrelsen på det område, hvor skyggen glider over i baggrunden. Denne værdi angives efter samme præmisser som de to første.
Undlader man at angive en farve, får skyggen samme farve som den gældende "color" egenskab.
Angiver man flere værdisæt, anvendes de i den angivne rækkefølge og kan overlappe hinanden. Skygger kan dog aldrig overlappe selve teksten. Et par eksempler:
H2 { text-shadow:Blue 0.3em 0.3em 0.5em, 0.7em 0.7em 0.2em silver; } H3 { text-shadow:2px 3px; }
Som det ses, anvender man som regel skyggeeffekter på overskrifter, mens resultatet gerne bliver gnidret, hvis man lægger skygge på en almindelig brødtekst.
I den første regel tildeles overskrift 2 en blå skygge som langsomt glider over i baggrunden. Skyggeeffekten er her forlænget med endnu en skygge, som giver den første en yderkant af sølv. Læg mærke til, at det er underordent, om farveangivelsen kommer før eller efter længdeangivelserne.
Regel nr. 2 giver overskrift 3 en lille skygge i skriftfarven.
I [CSS2] specifikationen er vist et spændende eksempel på, hvordan man kan skabe en "solformørkelseseffekt" ved at angive 0px i vandret og lodret afstand, sætte skriftfarven til den samme farve som baggrunden og lægge en skygge på, der har en kontrasterende farve:
SPAN.Glow { background: White; color: White; text-shadow: Black 0px 0px 5px; }
"text-shadow" findes ikke i CSS1, og de advarer om, at visse skyggeeffekter som f.eks. den ovennævnte kan gøre teksten helt usynlig i browsere, som kun understøtter CSS1.
Der findes to egenskaber, som kan ændre afstanden mellem henholdsvis ord og bogstaver. Disse egenskaber anvendes, hvis man f.eks. vil gøre en overskrift mere fyldig end normalt. Begge virker dog på alle elementer og nedarves.
Den første af disse egenskaber er "word-spacing", som bruges til at øge afstanden mellem de enkelte ord. Værdier angives som:
Negative værdier er sjovt nok tilladt, men det er et åbent spørgsmål, hvordan browseren håndterer dem, og generelt må de nok frarådes. Især hvis man vil være sikker på resultatet:
H2 { word-spacing: 0.2em; }
I dette eksempel er overskrift 2 blevet mere fyldig ved at øge afstanden mellem ordene med 0,2 gange det normale til 1,2 gange normal afstand. Egenskabens værdi er altså forøgelsen af ordafstanden og ikke den faktiske ordafstand.
Nært beslægtet med denne er naturligvis den anden egenskab "letter-spacing", som øger afstanden mellem de enkelte bogstaver. Ikke overraskende svarer dens værdisæt til "word-spacing", som blev gennemgået herover.
H2 { letter-spacing: 0.2em; }
Eksemplet her er med vilje lavet magen til det ovennævnte, så man kan sammenligne virkningen af de to egenskaber. Som det ses, er overskriften nu endnu bredere end før. Det er så op til ens design - eller måske mere smag og behag - hvilken en af de to egenskaber, man bruger.
Hør, har vi ikke allerede været inde på det i et tidligere kapitel? Nej, det var noget helt andet, og det vi skal se på nu må ikke forveksles med kapitæler, som det andet drejede sig om, selv om det da godt kan ligne ved første øjekast.
Her drejer det sig om "text-transform" egenskaben, som bruges til at skifte mellem store og små bogstaver. "text-transform" gælder for alle elementer, og den nedarves. Egenskaben kan have følgende værdier:
H2 { text-transform: capitalize; } P.Store { text-transform: uppercase; } P.Smaa { text-transform: lowercase; }
De tre regler i dette eksempel bestemmer, at alle ord i en overskrift 2 skal have stort begyndelsesbogstav, samt definerer to klasser, som ændrer et afsnits bogstaver til henholdsvis store og små bogstaver.
I typografien betegner udtrykket "whitespace" den luft, der er mellem de enkelte elementer i en tekst (overskrifter, billeder, brødtekst m.v.), og [CSS2] indeholder også en egenskab, som bestemmer, hvordan browseren skal styre dette.
Egenskaben hedder "white-space". Den nedarves og påvirker kun blokelementer. "white-space" kan have følgende værdier:
Vi ser på to regler, hvor den første giver afsnittet den samme formatering som i HTML-dokumentet, mens den anden ignorerer alle afsnittets linieskift, indtil der kommer et BR-element.
P.Pre { white-space: pre; } P.NoWrap { white-space: nowrap; }
Hvis du ser i kildekoden til dette eksempel, vil du lægge mærke til, at alle linier i de to afsnit med vilje er holdt meget korte, så hvert afsnit består af mange linier i HTML-dokumentet. Åbner du derimod selve siden i browseren, bliver virkningen åbenbar. Afsnittet, der styres den første regel, indeholder stadig mange, korte linier, mens det afsnit, som styres af anden regel, indeholder en meget lang og en ret kort linie. Endelig er der et normalt afsnit, der ikke styres af nogen regler, som browseren formaterer på den måde, der passer til vinduets størrelse.
 |
 |
 |
 |
 |
