HTML Standard: <i>, <em>, <cite> tags

HTML Standard

HTML Extended

<i>, <em>, <cite> tags

Inserts an italic text.

These tags can be replaced by a CSS style.

Attributes

Attribute	Description
class	One or more classes.
id	Id.
style	Inline styles. Styles can also be applied using style tags.

Styles

Style	Description
background-color	hexadecimal color HSL color HSLA color (alpha value is ignored) predefined/cross-browser color RGB color RGBA color (alpha value is ignored)
color	initial hexadecimal color HSL color HSLA color (alpha value is ignored) predefined/cross-browser color RGB color RGBA color (alpha value is ignored)
direction	ltr rtl
display	none
font-family	Arial, Helvetica, "Times New Roman", Verdana... Any font can be applied, but it must be available in the DOCX or in the OS.
font-size	initial large larger length: cm, em, ex, in, mm, pt, pc, px, percentage, rem (as em) medium small smaller x-large x-small xx-large xx-small
font-stretch	condensed expanded extra-condensed extra-expanded semi-condensed semi-expanded ultra-condensed ultra-expanded
font-style	italic normal oblique
font-variant	small-caps
font-weight	bold bolder normal 700, 800, 900
letter-spacing	length: cm, in, mm, pt, pc, px normal
text-decoration	line-through double-line-through none underline
text-decoration-color	hexadecimal color
text-decoration-style	dashed dotted double solid wavy
text-transform	uppercase
vertical-align	sub super

Custom MS Word styles

Using createCharacterStyle and HTML, custom character styles can be applied to use more styles.

HTML Extended (Premium licenses)

Attribute	Description
data-lang	Sets a custom language: language-region (en-US).
data-rpr	Applies a custom rPr style.

CSS Extended (Premium licenses)

Style	Description
data-em	Emphasis mark type: none dot circle comma underDot
data-font-size	Sets to "initial" to avoid applying a font size.
data-highlight	Highlight style: black, blue, cyan, green, magenta, red, yellow, white, darkBlue, darkCyan, darkGreen, darkMagenta, darkRed, darkYellow, darkGray, lightGray.

Code samples

Example #1

<style>
    #mystyle {
      background-color: coral;
      text-decoration: underline;
    }
</style>
<i id="mystyle">This i text has a background color with a predefined value and an underline text decoration.</i>

The resulting Word document looks like:

Example #2

<style>
    #mystyle {
      color: initial;
      font-size: x-large;
    }
    #mystyle2 {
      font-weight: bolder;
      font-variant: small-caps;
      letter-spacing: 20px;
    }
    #mystyle3 {
      font-stretch: condensed;
      font-style: oblique;
      text-transform: uppercase;
    }
</style>
<i id="mystyle">This i text has a color with an initial value and an x-large font size.</i>
<br>
<i id="mystyle2">This i text has a bolder font weight, a font variant of small caps and 20px of letter spacing.</i>
<br>
<i id="mystyle3">This i text has a condensed font stretch, an oblique font style and the text transformed to uppercase.</i>

The resulting Word document looks like: