Av og til hender det seg at man trenger å stille opp tekst under hverandre, uten å bruke tabeller, det være seg i ei overskrift som går over flere linjer, ei liste med priser, en oversikt som inkluderer små bilder (for eksempel ei liste over gotiske ligaturer) eller en drøss med andre situasjoner. En tabell er ikke løsninga på alt (slik det gjerne var på nettsider fra slutten av ’90-tallet og fram til i alle fall midten av 2000-tallet; tabeller (<table> bør brukes til å vise tabulert innhold som er best å vise fram som et skjema, vanligvis noe som egner seg i et regneark. Lister har vi i flere varianter: <ul>: usorterte lister; <ol>: sorterte lister; og <dl>: definisjonslister. I begge disse tilfellene kan man få bruk for en tabulator, men HTML har ingen knagg for slikt. Det er mange fikse løsninger å velge blant, så som å bruke CSS til å sette inn et bestemt antall mellomrom, men langt de fleste av disse greier ikke å løse problemet som ligger i bunnen: å få satt inn et mellomrom som varierer i størrelse, men er tilpasset i størrelse, slik at alt som følger er på linje med hverandre; de løsningene som fikser dette beror ofte på bruken av ulike måleenhter som kanskje ikke er velegnet til å forholde seg til tegn som den gjeldende måleenheten.
Løsninga jeg foreslår er besnærende enkel. Grunnen til at mange ikke tenker på den er at måleenheten ch er bortimot ukjent for de fleste. Dette er kanskje ikke så rart, for når vi fikk overgangen fra å tenke i piklser til å tenke i dynamiske størrelser, var måleenheten som de fleste først tok i bruk, prosenttegnet; deretter kom em og en, og med CSS3 fikk vi rem. Men skjult i verdensvevens irrganger finnes det altså også denne mystiske måleenheten ch. Hva gjør den og hvordan kan den brukes?
Definisjon
CSS tillater seks absolutte lengdeenheter og ni relative lengdeenheter.
De absolutte lengdeenhetene er
cm- centimeter
mm- millimeter
in- tommer, definert som 96 piksler, definert som 2,54 cm
px- piksler, definert som 1/96″
pt- punkt, definert som 1/72″
pc- pica, definert som 12 punkt
De relative lengdeenhetene
em- definert lik elementets skriftstørrelse (2 em = 2xskriftstørrelsen
ex- definert lik skriftstørrelsens x-høyde
ch- definert lik bredden på null (0)
rem- definert lik rotelementets skriftstørrelse
vw- definert lik 1 % av nettleservinduets størrelse
vh- definert lik 1 % av nettleservinduets høyde
vmin- definert lik 1 % av nettleservinduets minste dimensjon
vmax- definert lik 1 % av nettleservinduets største dimensjon
%- definert relativ til forelderelementet
Kodeeksempel
Som man ser i bildet, hadde jeg to tegn med ulik vidde som står i loddrett linje, mens teksten til høyre for dem står som om de hadde en venstrejustert tabulator. Så hvordan gjorde jeg det? Koden er nokså enkel; underoverskrifta ser slik ut:
<h4><span class="stor-tekst" style="display:inline-block; width: 4ch">Ⅰ</span> Kamp:<br>
<span class="stor-tekst" style="display: inline-block; width: 4ch">b</span> Nærkamp</h4>
Problemet med å sette bredde på det som står innenfor element som <hx> eller <p>, er at de (hvis annet ikke er angitt) behandles som løpende tekst; det betyr blant annet at de ikke kan ha egen vidde og at ekstra mellomrom (annet enn t.d. -er på rekke) slås sammen til ett. Faktisk er det i denne setninga satt inn ti mellomrom mellom setninga
og satt
, slik:
Faktisk er det i denne setninga satt inn ti mellomrom mellom <q>setninga</q> og <q>satt</q>, slik: Dersom nettleseren din behandler HTML riktig, skal du ikke kunne se de ekstra mellomrommene.
Her burde jeg kanskje kommentere at <q> strengt tatt ikke skal brukes slik jeg gjorde her, men helst kun til faktiske sitat.
Praktisk bruk
Det kan være nyttig å ha noen egne klasser definert til slikt. Til ordinært innrykk ved avsnittsstart, er ikke dette den rette måten å gjøre det på; da bruker man heller text-indent slik:
p {
text-indent: 2pc;
}
Hvor mye innrykk man har, varierer fra land til land, men som en tommelfingerregel regnes 2–4 pica som passende. 1 pica er lik skriftstørrelsen, ɔ: er 2 pica som i eksempelet over i 12-punkts skriftstørrelse lik 24 punkt. Rettelse, 11. mars 2022: 1 pica er definert som eksakt 1/6″. Siden 1 punkt er definert som 1/72″, betyr det at 1 pica er 12 punkt.
Hvis man deretter vet at man får bruk for å sette opp bestemte tabulatorblokker, kan man ganske enkelt lage noen hendige klasser som man kan hente fram etter behov. Det kan for eksempel se slik ut:
.tab2, .tab4, .tab6, .tab8, .tab10 {
display: inline-block;
}
.tab2 {
width: 2ch;
}
.tab4 {
width: 4ch;
}
.tab6 {
width: 6ch;
}
.tab8 {
width: 8ch;
}
.tab10 {
width: 10ch;
}
.hj {
text-align: right;
}
.vj {
text-align: left;
}
.sj {
text-align: center;
}
Dette teksteksempelet viser hvordan juksetabulatorene kan brukes. Tenk deg at du har ei liste med ting du ønsker å få justert riktig, kanskje ei handleliste:
<ul>
<li><span class="tab10">Epler</span> <span class="tab2 hj" >2</span></li>
<li><span class="tab10">Pærer</span> <span class="tab2 hj" >4</span></li>
<li><span class="tab10">Melk</span> <span class="tab2 hj" >1</span></li>
<li><span class="tab10">Sjokolade</span> <span class="tab2 hj">11</span></li>
<li><span class="tab10">Vaskeklut</span> <span class="tab2 hj" >1</span></li>
</ul>
Resultatet ut blir da slik:
- Epler 2
- Pærer 4
- Melk 1
- Sjokolade 11
- Vaskeklut 1
Avsluttende merknad
Du la kanskje merke til at det stod to klasser etter hverandre? Jepp, du kan sette flere klasser etter hverandre i HTML ved å skille dem med mellomrom. I CSS oppnår du det samme med komma. Grunnen til det er at i CSS har mellomrom mellom klasser en annen funksjon: Det er én av de fire kombinatørene man kan bruke for å angi slektskapsforhold. Disse fire er:
- avkomvelgeren
- mellomrom
- barnevelgeren
- mindre enn (<)
- nærmeste-søsken-velgeren
- pluss (+)
- generelt-søsken-velgeren
- tilde (~)
Jeg håper dette har vært til nytte for deg. For avanserte nettsidekodere er nok dette særdeles grunnleggende, men ikke alt man gjør trenger å være så avansert. Hvis du fant nytte i dette, håper jeg du har tid til å dele med meg hva du gjorde og hvordan; jeg har alltid lyst til å lære noe nytt.
Ingen kommentarer :
Legg inn en kommentar
Jeg har nå valgt å ta sjansen på å la alle som ønsker skrive en kommentar. For å forhindre uønskede robotkommentarer, har jeg valgt å slå på kommentarmoderering.
Ta hensyn, og les over det du har skrevet før du sender det.