Available options include auto, under, left, and right, providing flexibility for various web design scenarios.
Introduction
The text-underline-position
CSS property lets you control exactly where the underline appears on your text. It works with the text-decoration
property’s underline
value. By using text-underline-position
, you can make your text more readable and visually appealing, which is great for complex layouts and designs.
Specification
The text-underline-position
property is defined in the CSS Text Decoration Module Level 3 specification. This module gives detailed guidelines on how text decorations, including underlines, should be handled in web browsers. The specification ensures consistency across different browsers, making it easier for you to create uniform and predictable text decorations.
Syntax
The text-underline-position
property is easy to use. Here’s the syntax for specifying the underline position relative to the text:
Values
The text-underline-position
property offers several values to fine-tune the underline’s position:
auto
The auto
value lets the browser decide the best position for the underline based on the font metrics.
from-font
If the font file includes a preferred underline position, the from-font
value uses that information. If not, it behaves like auto
.
under
The under
value puts the underline below the alphabetic baseline, ensuring it doesn’t cross any descenders. This is great for enhancing text readability.
left
In vertical writing modes, the left
value puts the underline on the left side of the text. In horizontal modes, it behaves like auto
.
right
Similar to left
, the right
value puts the underline on the right side of the text in vertical writing modes. In horizontal modes, it behaves like auto
.
Inheritance and Global Values
inherit
: Makes the element inherit thetext-underline-position
value from its parent.initial
: Resets the property to its initial value, which isauto
.revert
: Reverts the property to the browser’s default styling.revert-layer
: Similar torevert
, but it only reverts the property for the current cascade layer.unset
: Resets the property to its natural value, which means it acts asinherit
if the property is inherited, orinitial
if it is not.
Formal Definition
Here are the key aspects of the text-underline-position
property’s formal definition:
Attribute | Value |
---|---|
Initial Value | auto |
Applies to | All elements |
Inherited | Yes |
Computed Value | As specified |
Animation Type | Discrete |
Formal Syntax
The formal syntax for the text-underline-position
property is:
Examples
Let’s look at some practical examples to see how the text-underline-position
property works.
Example 1: Basic Usage
Here, we’ll use the text-underline-position: auto
and text-underline-position: under
properties to see the differences.
HTML:
Output:
![Example 1 Output]WebsiteUrl
In this example, text-underline-position: auto
uses the browser’s default positioning for the underline, while text-underline-position: under
ensures the underline is placed below the alphabetic baseline, avoiding any descenders.
Example 2: Vertical Writing Mode
Here, we’ll use the writing-mode: vertical-rl
property to write text vertically. We’ll then apply text-underline-position: left
and text-underline-position: right
to see their effects.
HTML:
Output:
![Example 2 Output]WebsiteUrl
In this example, text-underline-position: left
places the underline on the left side of the vertically written text, while text-underline-position: right
places it on the right side. This is useful for languages that are written vertically, like Japanese or Chinese.
Setting text-underline-position
Globally
You can set the text-underline-position
property globally to ensure consistent underlining styles throughout your website. This is great for documents with specific needs, like those with lots of chemical or mathematical formulas.
CSS:
By setting the text-underline-position
property at the root level, you apply a uniform underline position to all text elements on your page. This simplifies your CSS and ensures that all underlines are consistently styled, enhancing the overall readability and visual appeal of your content.
Browser Compatibility
The text-underline-position
property is widely supported by modern web browsers. However, it’s always a good idea to test your web pages across different browsers to ensure consistent behavior.
See Also
For more information on related CSS properties, you might want to check out:
text-decoration
text-decoration-line
text-decoration-style
text-decoration-color
These properties work together with text-underline-position
to give you full control over text decorations in your web projects.
Browser Compatibility
The text-underline-position
property is widely supported by modern browsers:
- Google Chrome: Yes
- Microsoft Edge: Yes
- Mozilla Firefox: Yes
- Opera: Yes
- Safari: Yes
For the latest info, check out the MDN Web Docs compatibility table.
Related Properties
To get the most out of CSS text decoration, you might also find these properties helpful:
text-decoration
: A shorthand for setting underline, overline, and line-through styles.text-decoration-line
: Sets the type of text decoration line.text-decoration-color
: Sets the color of the text decoration line.text-decoration-style
: Defines the style of the text decoration line (e.g., solid, double, dotted, dashed, wavy).
These properties give you more control over text decorations, helping you create visually appealing and readable web content.
By understanding and using the text-underline-position
property effectively, you can enhance the visual appeal and readability of your text in various web design scenarios.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.