text-decoration-skip-ink
Quick Summary for text-decoration-skip-ink
text-decoration-skip-ink
CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
Code Usage for text-decoration-skip-ink
/* Single keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; /* Global keywords */ text-decoration-skip-ink: inherit; text-decoration-skip-ink: initial; text-decoration-skip-ink: revert; text-decoration-skip-ink: unset;
More Details for text-decoration-skip-ink
text-decoration-skip-ink
The text-decoration-skip-ink
CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
text-decoration-skip-ink
is not part of the text-decoration
shorthand.
Syntax
/* Single keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; /* Global keywords */ text-decoration-skip-ink: inherit; text-decoration-skip-ink: initial; text-decoration-skip-ink: revert; text-decoration-skip-ink: unset;
Values
none
Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
auto
The default — the browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.
all
The browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the auto
behavior might not create interruptions.
Formal definition
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
auto | all | none
Examples
HTML
<p>You should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">Or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
CSS
p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ } .no-skip-ink { text-decoration-skip-ink: none; } .skip-ink-all{ text-decoration-skip-ink: all; }
Result
Specifications
Specification |
---|
CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |
See also
text-decoration
text-decoration-skip
Last modified: Jan 19, 2022, by MDN contributors