Export (0) Print
Expand All

-ms-text-underline-position property

Specifies the position of the underline decoration that is set through the text-decoration property of the object.

Internet Explorer 9

 

Syntax

-ms-text-underline-position: above | below | auto | auto-pos

Property values

above

Decoration appears above the text.

below

Decoration appears below the text.

auto

Default. Internet Explorer 6 and later. Decoration appears above the text if the LANG attribute is set to ja, which is the language code abbreviation for the Japanese language, and the -ms-writing-mode attribute is set to tb-rl, which causes vertical inline text progression. If not, the decoration appears below the text.

auto-pos

Internet Explorer 6 and later. Identical to auto.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Value

Remarks

Windows Internet Explorer 8. The -ms-text-underline-position attribute is an extension to CSS, and can be used as a synonym for text-underline-position in IE8 Standards mode.

This property specifies the position of the underline decoration. To turn the decoration on or off, use the text-decoration property.

The position of the underline decoration is relative to the layout of the text in the object. With vertical text, it is more accurate to say that the above value causes the underline decoration to be laid out before the text or that the decoration appears before the text. With the below value, then, the decoration appears after the text.

In Internet Explorer 6, The auto and auto-pos values apply to this property as of Internet Explorer 6. The default value of this property is auto as of Internet Explorer 6. With Microsoft Internet Explorer 5.5, the default value of this property is below.

Examples

The following example shows how all of the elements in a document inherit the -ms-text-underline-position style rule from the parent HTML element. Underline decorations throughout the document are positioned above the text, relative to the layout of the text.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/textUnderlinePosition.htm


<!DOCTYPE html>
<html>
<head>
  <title>textUnderlinePosition Property</title>
  <style>
    html {
      -ms-text-underline-position: above;
      text-underline-position: above; /* Always use the standard when available. */
    }
  </style>
</head>

<body>
  <h1>textUnderlinePosition Property</h1>
  <p>
    The following example shows how all of the elements in a document inherit the <strong>text-underline-position</strong> 
    style rule from the parent <strong>HTML</strong> element. Underline decorations throughout the document are positioned 
    above the text, relative to the layout of the text.</p>
  <p>
    <span>This horizontal <strong>SPAN</strong> element is not underlined.</span>
    <span style="text-decoration: underline">This horizontal <strong>SPAN</strong>
    element has an underline decoration positioned above the text.</span>
  </p>
  <p style="writing-mode: tb-rl">
    <span>This vertical <strong>SPAN</strong> element is not underlined.</span>
    <span style="text-decoration: underline">This vertical <strong>SPAN</strong>
      element has an underline decoration positioned above the text.</span>
  </p>
</body>
</html>

The following example demonstrates the effect of the auto value of the -ms-text-underline-position property when the LANG attribute of an object containing vertical inline text is set to ja.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/textUnderlinePositionAuto.htm


<div style="writing-mode: tb-rl; text-decoration: underline; text-underline-position: auto;">     
    <p>This element contains underlined vertical text.  
      The LANG attribute of this element is not explicitly set.
      The underline decoration appears below, or after, 
      the text when text-underline-position is set to auto.</p>
    
    <p lang="ja">This element also contains underlined vertical text.  
      The LANG attribute of this element is set to ja.
      The underline decoration in this element appears above, 
      or before the text.</p>
</div>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
CSS Text Level 3

 

 

Show:
© 2014 Microsoft