text-underline-position css property

Description

W3C name
text-underline-position
JS name
textUnderlinePosition
summary
The "text-underline-position" property sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements.
applies to
all elements
media
visual
css3 module
Text
version
browser support
TESTING OF CSS PROPERTIES
Chrome v.25.0.1364.160Opera v.12.14Firefox v.19.0IE v.10.0Safari v.534.57.2
---------auto---
-webkit--o--moz--ms--webkit-(safari)
---------------
initial value
if the browser supports the property
---
if the browser doesn't support the property ( returns undefined )
empty
if the browser returns an empty value

Values

value
auto | alphabetic | [ under || [ left | right ] ] | initial | inherit
initial
auto
inherited
yes
percentages
n/a
negative value
n/a
computed value
as specified
auto
The user agent may use any algorithm to determine the underline's position; however in vertical typographic mode, if the language of the element is set to Japanese or Korean (matches :lang(ja) or :lang(ko)) the underline must be drawn on the right side of the text as described for ‘below right’.
alphabetic
The underline is aligned with the alphabetic baseline. In this case the underline is likely to cross some descenders.
below left
The underline is aligned with the under edge of the element's content box. In this case the underline usually does not cross the descenders. (This is sometimes called "accounting" underline.) If the underline affects descendants with a lower content edge, the user agent should shift the underline down further to the lowest underlined content box edge. The user agent may ignore elements with ‘vertical-align’ values given as lengths, percentages, ‘top’, or ‘bottom’ when making this adjustment. (Note that images that are not affected by the underline per ‘text-decoration-skip’ will not affect the position of the underline.)
below right
In horizontal typographic mode, this value is equivalent to ‘below left’. In vertical typographic mode, the underline is aligned as for ‘below left’, except it is aligned to the right edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side.
initial
Each property has an initial value which becomes the specified value when cascading and inheritance does not yield a value. Also, the initial value can be explicitly specified with the 'initial' keyword which all properties accept.
inherit
Inheritance is a way of propagating property values from parent elements to their children. Inheritance means that the specified value of a given element/property combination is copied from the computed value of the parent element. The root element, which has no parent element, inherits the initial value of the property.

Test

Example

set
computed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem ipsum, luctus eu imperdiet ac, luctus non velit. Donec dolor orci, semper vel iaculis a, tincidunt eget turpis. Sed non ullamcorper nibh. Nulla nisl purus, aliquet quis sagittis sed, dignissim sed est. Nam ligula nisi, mattis et scelerisque non, porttitor tempor ligula. Donec vestibulum interdum vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum a leo lorem, feugiat elementum justo. Nam ac leo est. Aliquam leo lacus, interdum ultrices iaculis non, adipiscing non massa.
  • #css666_example{
  • }
  • <div id="css666_example">
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Mauris sem ipsum, luctus eu imperdiet ac, luctus non velit.
    • Donec dolor orci, semper vel iaculis a, tincidunt eget turpis.
    • Sed non ullamcorper nibh. Nulla nisl purus, aliquet quis sagittis sed, dignissim sed est.
    • Nam ligula nisi, mattis et scelerisque non, porttitor tempor ligula.
    • Donec vestibulum interdum vehicula.
    • Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    • Vestibulum a leo lorem, feugiat elementum justo.
    • Nam ac leo est.
    • Aliquam leo lacus, interdum ultrices iaculis non, adipiscing non massa.
  • </div>

CSS3 Text module properties

This CSS3 module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.

Links