HTML-Hajen

Skrift i kursiv med HTML









Grundliggende skrift med kursiv

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:

Her er der normal tekst, <I>her bliver teksten i kursiv med I-tag'en,</I> og her bliver den normal igen.

Her er der normal tekst, <EM>her bliver teksten i kursiv med EM-tag'en,</EM> og her bliver den normal igen.

Her er der normal tekst, <CITE>her bliver teksten i kursiv med CITE-tag'en,</CITE> og her bliver den normal igen.

Her er der normal tekst, <DFN>her bliver teksten i kursiv med DFN-tag'en,</DFN> og her bliver den normal igen.

Her er der normal tekst, <VAR>her bliver teksten i kursiv med VAR-tag'en,</VAR> 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 i kursiv med I-tag'en, og her bliver den normal igen.

Her er der normal tekst, her bliver teksten i kursiv med EM-tag'en, og her bliver den normal igen.

Her er der normal tekst, her bliver teksten i kursiv med CITE-tag'en, og her bliver den normal igen.

Her er der normal tekst, her bliver teksten i kursiv med DFN-tag'en, og her bliver den normal igen.

Her er der normal tekst, her bliver teksten i kursiv med VAR-tag'en, og her bliver den normal igen.


Styling med kursiv

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:

Her er der normal tekst, <SPAN STYLE="font-style:italic">her bliver teksten med kursiv,</SPAN> og her bliver den normal igen.

Resultatet bliver:

Her er der normal tekst, her bliver teksten med kursiv, og her bliver den normal igen.


Oblique, den anden type kursiv

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. kursiv og kursiv med Times New Roman, så tilter oblique blot fonten lidt til højre, uden ellers at ændre noget.
Så Times New Roman i stedet ser sådan 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:

.Oblique {
-moz-transform: skewX(-15deg); /* FF 3.5+ */
-o-transform: skewX(15deg); /* Opera 10.5 */
-webkit-transform: skewX(-15deg); /* Safari 3.1+, Chrome */
-ms-transform: skewX(-15deg); /* IE 9+ */
}


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:

Her er der normal tekst, <DIV CLASS="Oblique" STYLE="display:inline-block">her bliver teksten med oblique,</DIV> og her bliver den normal igen.

Resultatet bliver:

Her er der normal tekst,
her bliver teksten med oblique,
og her bliver den normal igen.


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:

.Oblique {
-moz-transform: skewX(-15deg); /* FF 3.5+ */
-o-transform: skewX(15deg); /* Opera 10.5 */
-webkit-transform: skewX(-15deg); /* Safari 3.1+, Chrome */
-ms-transform: skewX(-15deg); /* IE 9+ */
display:inline-block;
}