Text in italics in HTML




Basic text in italics

There is several ways of getting text in italics. The most simple way, and often also the best way, is the tag <I> (italic). The four other versions are <EM> (emphasized), <CITE> (citation), <DFN> (definition) and <VAR> (variable), and originally they were tags created for special purposes. The five tags give the same effect, text in italics. From a programming point of view, <I> is preferable as it takes up the least space in the programming, thus making them less intrusive when working with the source codes.

A piece of text in italics will look like this as code:

Here the text is normal, <I>here the text is in italics using the I tag,</I> and here the text returns to normal.

Here the text is normal, <EM>here the text is in italics using the EM tag,</EM> and here the text returns to normal.

Here the text is normal, <CITE>here the text is in italics using the CITE tag,</CITE> and here the text returns to normal.

Here the text is normal, <DFN>here the text is in italics using the DFN tag,</DFN> and here the text returns to normal.

Here the text is normal, <VAR>here the text is in italics using the VAR tag,</VAR> and here the text returns to normal.


On the page, it looks like this:

Here the text is normal, here the text is in italics using the I tag, and here the text returns to normal.

Here the text is normal, here the text is in italics using the EM tag, and here the text returns to normal.

Here the text is normal, here the text is in italics using the CITE tag, and here the text returns to normal.

Here the text is normal, here the text is in italics using the DFN tag, and here the text returns to normal.

Her er der normal tekst, here the text is in italics using the VAR tag, and here the text returns to normal.





Styling talics

A metod offering more options is STYLE="font-style:italic". Styles is a way of modulating tags, e.g. if you want a paragraph written in italics: <P STYLE="font-style:italic"> </P>. The method has two advantages:

  1. The more complex elements are easier to control, e.g. a row in a table can be done in italics by putting it on the <TR> tag, which is the tag for table rows.
  2. Font-style works for CSS, which offers some advantages when you get to the more advanced part of programming.
A piece of text in italics, here used on a SPAN tag, will look like this as code:

Here the text is normal, <SPAN STYLE="font-style:italic">here the text is in italics,</SPAN> and here it returns to normal.

The result is:

Here the text is normal, here the text is in italics, and here it returns to normal.





Oblique, the other type of italics

There is a variation of italics called oblique. Where italics for some font types changes details on the font e.g. italics and italics using Times New Roman, oblique just tilts the font to the right, without changing anything else.
This makes Times New Roman look like this instead!


Traditional word processing on computer can only do italics, and on web sites, only a few fonts display a difference between italics and oblique. In principle oblique exists as a style, where you use STYLE="font-style:oblique". It just isn't working. For a font like Times New Roman the command oblique will give italics, with changes in the font looking exactly like STYLE="font-style:italic".

Fortunately there is a workaround for this. The transform property, which is a part of CSS3 offers the possibility of skewing objects in various ways. The option skewX only skews along the x-axis, i.e. along the line, and you just handle it as a CLASS in your style sheet. If we make a class called Oblique, where we skew the object 15 degrees to the right, it looks like this in the style sheet:

.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+ */
}


We can now use it as any other class we use. The only thing to be aware of, is that some tags, e.g. SPAN, can't use transform, so here you have to use DIV instead. As DIV starts and ends with a new line, you have to have an additional STYLE="display:inline-block" to have the effect equivalent to SPAN. Then the code looks like this:

Here the text is normal, <DIV CLASS="Oblique" STYLE="display:inline-block">here the text becomes oblique,</DIV> and here it returns to normal.

The result is:

Here the text is normal,
here the text becomes oblique,
and here it returns to normal.


If you know that everything in oblique has to be inline as in the example, you can of course make it a part of the class, like this, so you don't have to write both class and 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;
}