HTML-Hajen

Skrift med gennemstregning med HTML









Fremhævelse af skrift med gennemstregning

På samme måde som man kan lave en understregning, kan man lave en gennemstregning, hvor der kommer en linje gennem teksten.

Gennemstregningen kan kun laves på én måde: STYLE="text-decoration: line-through". 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 gennemstregning vil som kode se således ud:

Her er der normal tekst, <SPAN STYLE="text-decoration:line-through">her bliver teksten gennemstreget,</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 gennemstreget, 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:

Her er der normal tekst, <SPAN STYLE="text-decoration:line-through; font-weight:bold">her bliver teksten med fed skrift og får en gennemstregning,</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 gennemstregning, og her bliver den normal igen.



Linjens tykkelse og placering påvirkes også af størrelsen på skriften, f.eks. ved højtstillet og lavtstillet skrift, 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:line-through">her får teksten en gennemstregning,</SPAN> <SPAN STYLE="text-decoration:line-through; font-size:16pt;">her skifter teksten til gennemstregning og 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 gennemstregning, her skifter teksten til gennemstregning og 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:line-through">her får teksten en gennemstregning, <SPAN STYLE="font-size:16pt;">her skifter teksten med gennemstregning 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 gennemstregning, her skifter teksten med gennemstregning til 16.0 pt, og her bliver den normal igen.


Ved nogle browsere vil man se én ubrudt linje, mens man ved andre browsere vil se at linjen skifter niveau ved overgangen til en anden fontstørrelse.