text-underline-position

  • Revision slug: Web/CSS/text-underline-position
  • Revision title: text-underline-position
  • Revision id: 448827
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}

Summary

The CSS text-underline-position property specifies the position of the underline which is set using the {{cssxref("text-decoration")}} property underline value.

This property inherits and is not reset by the {{cssxref("text-decoration")}} shorthand, allowing to easily set it globally for a given document:

:root { text-underline-position: under; } /* Better default for document with a lot of chemical formulas */

{{cssbox("text-underline-position")}}

Syntax

Formal syntax: {{csssyntax("text-underline-position")}}
text-underline-position: auto
text-underline-position: under
text-underline-position: left
text-underline-position: right
text-underline-position: under left
text-underline-position: right under

text-underline-position: inherit

Values

auto
This keyword allows the browser to use an algorithm to choose between under and alphabetic.
under
This keyword forces the line to be set below the alphabetic baseline, at a position where it won't cross any descender. This is useful to prevent chemical or mathematical formulas, which make a large use of subscripts, to be illegible.
left
In vertical writing-modes, this keyword forces the line to be placed on the left of the characters. In horizontal writing-modes, it is a synonym of under.
right
In vertical writing-modes, this keyword forces the line to be placed on the right of the characters. In horizontal writing-modes, it is a synonym of under.
auto-pos{{non-standard_inline}}
This keyword is a synonym of auto which must be used instead
above{{non-standard_inline}}
This keyword forces the line to be above the text. When used with East-Asian text, using the auto keyword will lead to a similar effect.
below{{non-standard_inline}}
This keyword forces the line to be under the text. When used with alphabetic text, using the auto keyword will lead to a similar effect.

Specifications

Specification Status Comment
{{SpecName('CSS3 Text-decoration', '#text-underline-position', 'text-underline-position')}} {{Spec2('CSS3 Text-decoration')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (auto) {{CompatNo}} {{CompatNo}} 6 [*] {{CompatNo}} {{CompatNo}}
under, left, right {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
above, below{{non-standard_inline}} {{CompatNo}} {{CompatNo}} 5 [*] {{CompatNo}} {{CompatNo}}
auto-pos{{non-standard_inline}} {{CompatNo}} {{CompatNo}} 6 [*] {{CompatNo}} {{CompatNo}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}}

[*] Internet Explorer implements different values, with somewhat different effects for this value. From IE 5 to IE 7, included, only a non-prefixed version existed. From IE 8 onwards, the prefix can be used.

See also

  • Text-decorations-related CSS properties: {{cssxref("text-decoration")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-color")}}.
  • Microsoft non-standard values documentation.

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>text-underline-position</code> property specifies the position of the underline which is set using the {{cssxref("text-decoration")}} property <code>underline</code> value.</p>
<p>This property inherits and is not reset by the {{cssxref("text-decoration")}} shorthand, allowing to easily set it globally for a given document:</p>
<pre class="brush: css">
:root { text-underline-position: under; } /* Better default for document with a lot of chemical formulas */</pre>
<p>{{cssbox("text-underline-position")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-underline-position")}}
</pre>
<pre>
text-underline-position: auto
text-underline-position: under
text-underline-position: left
text-underline-position: right
text-underline-position: under left
text-underline-position: right under

text-underline-position: inherit
</pre>
<h3 id="Specifications" name="Specifications">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    This keyword allows the browser to use an algorithm to choose between <code>under</code> and <code>alphabetic</code>.</dd>
  <dt>
    <code>under</code></dt>
  <dd>
    This keyword forces the line to be set below the <em>alphabetic baseline</em>, at a position where it won't cross any descender. This is useful to prevent chemical or mathematical formulas, which make a large use of subscripts, to be illegible.</dd>
  <dt>
    <code>left</code></dt>
  <dd>
    In vertical writing-modes, this keyword forces the line to be placed on the <em>left</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code></dd>
  <dt>
    <code>right</code></dt>
  <dd>
    In vertical writing-modes, this keyword forces the line to be placed on the <em>right</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code></dd>
  <dt>
    <code>auto-pos</code>{{non-standard_inline}}</dt>
  <dd>
    This keyword is a synonym of <code>auto</code> which must be used instead</dd>
  <dt>
    <code>above</code>{{non-standard_inline}}</dt>
  <dd>
    This keyword forces the line to be above the text. When used with East-Asian text, using the <code>auto</code> keyword will lead to a similar effect.</dd>
  <dt>
    <code>below</code>{{non-standard_inline}}</dt>
  <dd>
    This keyword forces the line to be under the text. When used with alphabetic text, using the <code>auto</code> keyword will lead to a similar effect.</dd>
</dl>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Text-decoration', '#text-underline-position', 'text-underline-position')}}</td>
      <td>{{Spec2('CSS3 Text-decoration')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support (<code>auto</code>)</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>6 [*]</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>under</code>, <code>left</code>, <code>right</code></td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>above</code>, <code>below</code>{{non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>5 [*]</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>auto-pos</code>{{non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>6 [*]</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] Internet Explorer implements different values, with somewhat different effects for this value. From IE 5 to IE 7, included, only a non-prefixed version existed. From IE 8 onwards, the prefix can be used.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>Text-decorations-related CSS properties: {{cssxref("text-decoration")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-color")}}.</li>
  <li>Microsoft <a href="http://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx">non-standard values documentation</a>.</li>
</ul>
Revert to this revision