{"id":198601,"date":"2015-03-31T06:26:09","date_gmt":"2015-03-31T13:26:09","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=198601"},"modified":"2021-08-02T11:00:34","modified_gmt":"2021-08-02T18:00:34","slug":"text-decoration-skip","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip\/","title":{"rendered":"text-decoration-skip"},"content":{"rendered":"\n<p>The <code>text-decoration-skip<\/code> property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages.<\/p>\n\n\n\n<p>Here&#8217;s one example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a {\n  text-decoration-skip: ink;\n}<\/code><\/pre>\n\n\n\n<p class=\"explanation\">Heads up! The <code>ink<\/code> value has been changed to an entirely new property, <code>text-decoration-skip-ink: auto;<\/code>.<\/p>\n\n\n\n<p>If your browser supports this property then you\u2019ll notice here that the descenders of each character (like \u201cy\u201d and \u201cp\u201d) have little white spaces around the border:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qjNRdy\" src=\"\/\/codepen.io\/anon\/embed\/qjNRdy?height=450&amp;theme-id=1&amp;slug-hash=qjNRdy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qjNRdy\" title=\"CodePen Embed qjNRdy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If your browser doesn\u2019t support this feature then this is what you ought to expect from the property in a supporting browser:<\/p>\n\n\n\n<figure class=\"wp-block-image align-right media-199292\" id=\"post-199292\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/03\/ink.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>This may not be what text-decoration-skip: ink; actually looks like when it gets implemented, but this descender-clearing style is part of Marcin Wichary&#8217;s vision for a perfect underline as he <a href=\"https:\/\/medium.com\/designing-medium\/crafting-link-underlines-on-medium-7c03a9274f9\" rel=\"noopener\">lays out here<\/a>.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>objects<\/code>: the default. Decoration line skips inline objects, like images or inline-block elements.<\/li><li><code>none<\/code>: decoration line crosses everything, including inline objects that would normally be skipped.<\/li><li><code>spaces<\/code>: decoration line skips spaces, word-separator characters, and any spaces set with <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/\">letter-spacing<\/a><\/code> or <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-spacing\/\">word-spacing<\/a><\/code>.<\/li><li><code>ink<\/code>: decoration line skip glyphs or descenders.<\/li><li><code>edges<\/code>: decoration line starts slightly after the content&#8217;s starting edge and ends slightly before the content&#8217;s ending edge. This property was designed to keep two side-by-side underlined elements from looking like they&#8217;re sharing a single underline. This is useful for text in the Chinese language, which uses underlining for punctuation.<\/li><li><code>box-decoration<\/code>: decoration line skips over inherited margin, border, and padding.<\/li><\/ul>\n\n\n\n<p><strong>Update:<\/strong> it looks like the <code>trailing-spaces<\/code> value has now been deprecated, since it can no longer be found in <a href=\"https:\/\/drafts.csswg.org\/css-text-decor-3\/#propdef-text-decoration-skip\" rel=\"noopener\">the spec<\/a>.<\/p>\n\n\n\n<p>Since this property is not supported by any browser yet there&#8217;s no demo, but here&#8217;s an example of how each of the values could look once <code>text-decoration-skip<\/code> is implemented.<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-199280\" id=\"post-199280\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/03\/t-d-s.png\" alt=\"text-decoration-skip illustration\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"textdecorationskip-in-osx-and-ios\"><code>text-decoration-skip<\/code> in OSX and iOS<\/h3>\n\n\n<p>In late 2014, Apple made a change to <code>text-decoration<\/code> in Safari and iOS browsers that mimics how <code>text-decoration-skip: ink;<\/code> should work. Though none of the <code>text-decoration-skip<\/code> values are officially implemented yet, you can disable this default behavior with <code>-webkit-text-decoration-skip: none;<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_8c2283b41b58782fd2b6d5f519da07c8\" src=\"\/\/codepen.io\/anon\/embed\/8c2283b41b58782fd2b6d5f519da07c8?height=450&amp;theme-id=1&amp;slug-hash=8c2283b41b58782fd2b6d5f519da07c8&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 8c2283b41b58782fd2b6d5f519da07c8\" title=\"CodePen Embed 8c2283b41b58782fd2b6d5f519da07c8\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-text-decor-4\/#text-decoration-skip-property\" rel=\"noopener\">CSS Text Decoration Module Level 4<br>Editor\u2019s Draft<\/a><\/li><li><a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/gg721763%28v=expression.40%29.aspx\" rel=\"noopener\"><code>text-decoration-skip<\/code> at MSDN.<\/a><\/li><li>Discussion of adding <a href=\"https:\/\/lists.w3.org\/Archives\/Public\/www-style\/2015Mar\/0195.html\" rel=\"noopener\"><code>trailing-spaces<\/code> as a value<\/a> from the W3C mailing list.<\/li><li><a href=\"https:\/\/medium.com\/@iamhiwelo\/improving-text-readability-for-dyslexic-users-with-skip-ink-underlines-bf52a2f3426b\" rel=\"noopener\">Improving text readability for dyslexic users with skip-ink underlines<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration-skip\" rel=\"noopener\">text-decoration-skip<\/a> on MDN<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration-skip-ink\" rel=\"noopener\">text-decoration-skip-ink<\/a> on MDN<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=text-decoration\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">128<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">TP<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">17.5*<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages. Here&#8217;s one example: Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;. If your browser supports this property then you\u2019ll notice here that [&hellip;]<\/p>\n","protected":false},"author":33562,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":295134,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip-ink\/","url_meta":{"origin":198601,"position":0},"title":"text-decoration-skip-ink","date":"August 29, 2019","format":false,"excerpt":"text-decoration-skip-ink is a property that controls the behavior of underline and overline (but not line-through) when the line passes through part of a character\/glyph. This gives you fine-tuned control over how underlines or overlines interact with the characters that extend above the top or hang below the bottom of a\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":198601,"position":1},"title":"text-decoration-thickness","date":"June 8, 2020","format":false,"excerpt":"The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property. .text { text-decoration-line: underline; \u00a0 text-decoration-thickness: 2px; } Syntax text-decoration-thickness: auto | from-font\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14108,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration\/","url_meta":{"origin":198601,"position":2},"title":"text-decoration","date":"September 6, 2011","format":false,"excerpt":"The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text. h3 { text-decoration: underline; } Values none: no line is drawn, and any existing decoration is removed.underline: draws a 1px line across the text at its baseline.line-through: draws a 1px line across the text\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":200078,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-line\/","url_meta":{"origin":198601,"position":3},"title":"text-decoration-line","date":"April 11, 2015","format":false,"excerpt":"The text-decoration-line property decorates text with an underline, overline, line-through, or a combination of those lines. p { text-decoration-line: underline; } Values none: no line is added, and any existing lines are removed \u2014 for example none removes the default underline on links.underline: adds a 1px underline below the text.overline:\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":198601,"position":4},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198851,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-style\/","url_meta":{"origin":198601,"position":5},"title":"text-decoration-style","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied. a { text-decoration-style: solid; } Values solid: the default. Decoration is a single solid line.double: Decoration is a pair of solid lines.dotted: Decoration is a dotted line.dashed:\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198601"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=198601"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198601\/revisions"}],"predecessor-version":[{"id":345841,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198601\/revisions\/345841"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=198601"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=198601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}