Skrift i kursiv med HTML

Der er flere måder at lave kursiv på. Den simpleste og ofte bedste er tag'en <I> (italic). De fire andre versioner hedder <EM> (emphasized), <CITE> (citation), <DFN> (definition) og <VAR> (variable), og er tags der egentligt var tiltænkt specielle formål. De fem tags giver den samme effekt, nemlig skrift i kursiv. Ud fra et programmeringssynspunkt er <I> at foretrække, fordi den fylder lidt mindre i programlinjerne og dermed er mindre forstyrrende når man arbejder med kildekoderne.

Et stykke tekst med kursiv vil som kode se således ud:







På siden, når den vises, ser det således ud:

En metode der giver flere muligheder er STYLE="font-style:italic". Styles er en måde at modulere tags, f.eks. hvis man vil have et afsnit skrevet med kursiv: <P STYLE="font-style:italic"> </P>. Metoden har to fordele:

1. Ved mere komplekse elementer er det lettere at styre, f.eks. en række i en tabel kan man lave i kursiv ved at lægge det på <TR>, som er tag'en for en række i tabeller.
2. Font- style fungerer under CSS, hvilket giver nogle fordele når man kommer op i den mere avancerede programmering.

Et stykke tekst med kursiv, her sat på tag'en SPAN, vil som kode se således ud:


Resultatet bliver:

Der findes en variation over kursiv, kaldet oblique. Hvor kursiv for visse typer af fonte reelt laver om på fonten og ændrer detaljer, f.eks. bogstavet f, der ved Times New Roman går fra f til f, så tilter oblique blot fonten lidt til højre, uden ellers at ændre noget. Så kommer bogstavet f med Times New Roman i stedet til at se således ud: .

Traditionel tekstbehandling på computer kan ikke lave andet end kursiv, og på hjemmesider er det kun nogle få fonte hvor man kan se forskel på kursiv og oblique. Principielt eksisterer oblique som en style, hvor man anvender STYLE="font-style:oblique". Den fungerer bare ikke. For en font som Times New Roman vil kommandoen oblique give kursiv, med ændringerne i fonten nøjagtig som STYLE="font-style:italic".

Dette er der heldigvis en workaround til. Transform property, som er en del af CSS3 giver muligheden for at skævvride på forskellig vis. Den der hedder skewX forskyder kun i x-aksens retning, dvs. i retning af linjen, og man kører det blot som en CLASS i sit style sheet. Hvis vi laver en klasse ved navn Oblique, hvor vi trækker den 15 grader mod højre, ser det således ud i style sheetet:



Vi kan nu kalde det som en klasse, ganske som normalt. Det eneste man skal være opmærksom på er, at visse tags, f.eks. SPAN kan ikke processere transform, så her må man bruge DIV i stedet. Da DIV imidlertid starter og slutter med en ny linje, skal man lige have en STYLE="display:inline-block" på for at få en effekt der svarer til en SPAN. Så ser koden således ud:


Resultatet bliver:



Hvis man ved at alt med oblique skal være inline som i eksemplet, kan man selvfølgelig gøre det til en del af klassen på denne måde, så man slipper for at skulle skrive klasse og style: