Højtstillet skrift med HTML
Grundliggende højtstillet skrift
Højtstillet skrift laves med tag'en <SUP>, og lægges på en tekststreng på samme måde om andre typer af tekstdekorationer. I sin simple form fungerer tag'en således:
På siden, når den vises, ser det således ud:
Her er der normal tekst, <SUP>her bliver teksten højtstillet,</SUP> og her bliver teksten normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her bliver teksten højtstillet, og her bliver teksten normal igen.
Styling og finjustering af højtstillet skrift
Normalt, når man laver højtstillet skrift, vil man gerne have typerne til at blive lidt mindre, så det bliver pænere og mere læsevenligt. Hvor meget teksten bliver mindre er afhængig af browseren, og læseligheden af det højtstillede er afhængig af fonten og hvor meget det bliver skaleret ned. Hvis man vil styre dette, hvilket absolut er en god idé, kræver det lidt styling. Dette er der mere eller mindre hensigtsmæssige måder at gøre på.
For nu at starte med den mest gængse og velfungerende metode, så er det at sætte font-size til en procentdel af tekststørrelsen, eller man kan vælge en af de faste settings: smaller, small, x-small eller xx-small. Dette gør stylingen uafhængig af den fontstørrelse teksten har. Det kan f.eks. se således ud:
På siden, når den vises, ser det således ud:
Skulle man af uransagelige årsager have lyst til at lave højtstillet skrift som er større end den almindelige tekst, kan dette også lade sig gøre.
Om man vælger den ene eller den anden løsning, er en smagssag. Ved visse fonttyper kan der være en fordel i at kunne finjustere størrelsesforholdene med procenter, for at øge læsevenligheden. Det er en af de ting man skal sørge for at teste på flere browsere, når man laver sine sider.
Man kan være fristet til at sætte en fast fontstørrelse, og dette er en af de knapt så velfungerende måder. Hvis man kører fast med en fontstørrelse på f.eks. 10.0pt kan man godt sætte højtstillet skrift til 8.0pt.
På siden, når den vises, ser det således ud:
Der hvor kan kommer i problemer er, at man typisk sætter størrelsesændringen globalt i et style sheet, så man kan nøjes med at skrive <SUP> når man skal bruge højtstillet skrift. Hvis man så skal bruge højtstillet skrift i en overskrift i fontstørrelse 16, kommer det til at se underligt ud:
Reduktionen til 75% giver i stedet:
For nu at starte med den mest gængse og velfungerende metode, så er det at sætte font-size til en procentdel af tekststørrelsen, eller man kan vælge en af de faste settings: smaller, small, x-small eller xx-small. Dette gør stylingen uafhængig af den fontstørrelse teksten har. Det kan f.eks. se således ud:
Her er teksten normal, <SUP STYLE="font-size:75%">her bliver den højtstillede skriftstørrelse reduceret til 75%,</SUP> og her bliver teksten normal igen.
Her er teksten normal, <SUP STYLE="font-size:xx-small">her bliver den højtstillede skriftstørrelse reduceret til xx-small,</SUP> og her bliver teksten normal igen.
På siden, når den vises, ser det således ud:
Her er teksten normal, her bliver den højtstillede skriftstørrelse reduceret til 75%, og her bliver teksten normal igen.
Her er teksten normal, her bliver den højtstillede skriftstørrelse reduceret til xx-small, og her bliver teksten normal igen.
Skulle man af uransagelige årsager have lyst til at lave højtstillet skrift som er større end den almindelige tekst, kan dette også lade sig gøre.
Her er teksten normal, her bliver den højtstillede skriftstørrelse forstørret til 150%, og her bliver teksten normal igen.
Om man vælger den ene eller den anden løsning, er en smagssag. Ved visse fonttyper kan der være en fordel i at kunne finjustere størrelsesforholdene med procenter, for at øge læsevenligheden. Det er en af de ting man skal sørge for at teste på flere browsere, når man laver sine sider.
Man kan være fristet til at sætte en fast fontstørrelse, og dette er en af de knapt så velfungerende måder. Hvis man kører fast med en fontstørrelse på f.eks. 10.0pt kan man godt sætte højtstillet skrift til 8.0pt.
Her er teksten 10.0pt, <SUP STYLE="font-size:8.0pt">her bliver den højtstillede skriftstørrelse reduceret til 8.0pt,</SUP> og her bliver teksten 10.0pt igen.
På siden, når den vises, ser det således ud:
Her er teksten 10.0pt, her bliver den højtstillede skriftstørrelse reduceret til 8.0pt, og her bliver teksten 10.0pt igen.
Der hvor kan kommer i problemer er, at man typisk sætter størrelsesændringen globalt i et style sheet, så man kan nøjes med at skrive <SUP> når man skal bruge højtstillet skrift. Hvis man så skal bruge højtstillet skrift i en overskrift i fontstørrelse 16, kommer det til at se underligt ud:
Her er teksten 16.0pt, her bliver den højtstillede skriftstørrelse reduceret til 8.0pt, og her bliver teksten 16.0pt igen.
Reduktionen til 75% giver i stedet:
Her er teksten 16.0pt, her bliver den højtstillede skriftstørrelse reduceret til 75% af 16.0pt, og her bliver teksten 16.0pt igen.