Skrift med overliggende streg med HTML
Fremhævelse af skrift med overliggende streg
På samme måde som man kan lave en understregning, kan man lave en overliggende streg, hvor der kommer en linje over teksten.
Den overliggende streg kan kun laves på én måde: STYLE="text-decoration:overline". Style skal være lagt på en tag til tekstafsnit som f.eks. <P>, <DIV> og <SPAN>. Som man normalt bruger tekstdekorationer i en tekst vil <SPAN> sædvanligvis være en god løsning, fordi den ikke tilfører tekststrengen andre formateringer.
Et stykke tekst med overliggende streg vil som kode se således ud:
På siden, når den vises, ser det således ud:
Den overliggende streg kan kun laves på én måde: STYLE="text-decoration:overline". Style skal være lagt på en tag til tekstafsnit som f.eks. <P>, <DIV> og <SPAN>. Som man normalt bruger tekstdekorationer i en tekst vil <SPAN> sædvanligvis være en god løsning, fordi den ikke tilfører tekststrengen andre formateringer.
Et stykke tekst med overliggende streg vil som kode se således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:overline">her får teksten en overliggende streg,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her får teksten en overliggende streg, og her bliver den normal igen.
Kombinationseffekter med andre typer styling
Denne type styling er, ved kombination med andre effekter, yderst følsom over for både programmering og browser. Så her er det af største vigtighed at få testet både forskellige browsertyper og forskellige versioner af de enkelte typer.
Linjens tykkelse påvirkes for nogle browserer af at teksten bliver med fede typer, så her skal man være lidt opmærksom på sine kombinationer. Når man arbejder med en tekst-streng der alligevel er stylet af en tag som f.eks. <SPAN>, så plejer jeg at anbefale at man tilføjer sin styling på dette, hvis det er praktisk muligt. Det er en praktisk ting omkring overskueligheden af koderne. Koden for kombinationen ser i så fald således ud:
På siden, når den vises, ser det således ud:
Linjens tykkelse påvirkes også af størrelsen på skriften, men effekten varierer afhængigt af hvilken browser man anvender. Her skal man yderligere være opmærksom på kombinationseffekter, hvor variationer i programmeringen også kan give varierende effekter.
Hvis vi prøver at se på et midlertidigt skift til 16.0 pt, hvor hver sektion er styret af sin egen kode, så ser koden således ud:
På siden, når den vises, ser det således ud:
Hvis man derimod laver en sektion med ny størrelse inden i den sektion der har overliggende linje, ser koden således ud:
På siden ser det således ud.
Afhængig af browseren vil linjen enten dele sig i to forskellige højder efter fontstørrelserne, eller tilpasse sig den dominerende effekt, dvs. for en browser vil linjen flugte efter den største font og give en stor afstand mellem linje og tekst på de små bogstaver, for en anden browser vil linjen flugte med den lille font og gøre at stregen går gennem den øverste del af teksten, i stedet for at ligge oven på. Sørg for at kontrollere kombinationerne på flere browsere, så der ikke kommer sære overraskelser.
Linjens tykkelse påvirkes for nogle browserer af at teksten bliver med fede typer, så her skal man være lidt opmærksom på sine kombinationer. Når man arbejder med en tekst-streng der alligevel er stylet af en tag som f.eks. <SPAN>, så plejer jeg at anbefale at man tilføjer sin styling på dette, hvis det er praktisk muligt. Det er en praktisk ting omkring overskueligheden af koderne. Koden for kombinationen ser i så fald således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:overline; font-weight:bold">her bliver teksten med fed skrift og får en overliggende streg,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her bliver teksten med fed skrift og får en overliggende streg, og her bliver den normal igen.
Linjens tykkelse påvirkes også af størrelsen på skriften, men effekten varierer afhængigt af hvilken browser man anvender. Her skal man yderligere være opmærksom på kombinationseffekter, hvor variationer i programmeringen også kan give varierende effekter.
Hvis vi prøver at se på et midlertidigt skift til 16.0 pt, hvor hver sektion er styret af sin egen kode, så ser koden således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:overline">her får teksten en overliggende streg,</SPAN> <SPAN STYLE="text-decoration:overline; font-size:16pt;">her skifter teksten med overliggende streg til 16.0 pt,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her får teksten en overliggende streg, her skifter teksten med overliggende streg til 16.0 pt, og her bliver den normal igen.
Hvis man derimod laver en sektion med ny størrelse inden i den sektion der har overliggende linje, ser koden således ud:
Her er der normal tekst, <SPAN STYLE="text-decoration:overline">her får teksten en overliggende streg, <SPAN STYLE="font-size:16pt;">her skifter teksten størrelse til 16.0 pt,</SPAN></SPAN> og her bliver den normal igen.
På siden ser det således ud.
Her er der normal tekst, her får teksten en overliggende streg, her skifter teksten med overliggende streg til 16.0 pt, og her bliver den normal igen.
Afhængig af browseren vil linjen enten dele sig i to forskellige højder efter fontstørrelserne, eller tilpasse sig den dominerende effekt, dvs. for en browser vil linjen flugte efter den største font og give en stor afstand mellem linje og tekst på de små bogstaver, for en anden browser vil linjen flugte med den lille font og gøre at stregen går gennem den øverste del af teksten, i stedet for at ligge oven på. Sørg for at kontrollere kombinationerne på flere browsere, så der ikke kommer sære overraskelser.