{"id":359838,"date":"2022-01-04T07:30:18","date_gmt":"2022-01-04T15:30:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=359838"},"modified":"2022-01-09T18:09:33","modified_gmt":"2022-01-10T02:09:33","slug":"css-underlines-are-too-thin-and-too-low-in-chrome","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-underlines-are-too-thin-and-too-low-in-chrome\/","title":{"rendered":"CSS Underlines Are Too Thin and Too Low in Chrome"},"content":{"rendered":"\n<p>I\u2019ve encountered two bugs in Chrome while testing the new CSS <code>text-decoration-thickness<\/code> and <code>text-underline-offset<\/code> properties, and I want to share them with you here in this article.<\/p>\n\n\n\n<!--more-->\n\n\n<h2 class=\"simpletoc-title \">Table of Contents<\/h2><ul class=\"simpletoc-list\"   >\n<li>\n<a  href=\"#default-underlines-are-inconsistent\">Default underlines are inconsistent<\/a><\/li><li>\n<a  href=\"#luckily-we-can-override-the-browsers-defaults\">Luckily, we can override the browsers\u2019 defaults<\/a><\/li><li>\n<a  href=\"#chrome-bug-1-underlines-are-too-thin-on-macos\">Chrome bug 1: Underlines are too thin on macOS<\/a><\/li><li>\n<a  href=\"#chrome-bug-2-underlines-are-too-low\">Chrome bug 2: Underlines are too low<\/a><\/li><li>\n<a  href=\"#help-prioritize-the-chrome-bugs\">Help prioritize the Chrome bugs<\/a><\/li><\/ul>\n\n\n<p>First, let&#8217;s acknowledge one thing:<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"default-underlines-are-inconsistent\">Default underlines are inconsistent<\/h3>\n\n\n<p>Let\u2019s add a text link to a plain web page, set its <code>font-family<\/code> to Arial, and compare the underlines across browsers and operating systems.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2018\" height=\"944\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?resize=2018%2C944&#038;ssl=1\" alt=\"\" class=\"wp-image-359839\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?w=2018&amp;ssl=1 2018w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?resize=300%2C140&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?resize=1024%2C479&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?resize=768%2C359&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?resize=1536%2C719&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?resize=1000%2C468&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>From left to right: Chrome, Safari, and Firefox on macOS; Safari on iOS; Chrome, and Firefox on Windows; Chrome, and Firefox on Android.<\/figcaption><\/figure>\n\n\n\n<p>As you can see, the default underline is inconsistent across browsers. Each browser chooses their own default thickness and vertical position (offset from the baseline) for the underline. This is in line with the <a href=\"https:\/\/drafts.csswg.org\/css-text-decor-4\/\" rel=\"noopener\">CSS Text Decoration module<\/a>, which specifies the following default behavior (<code>auto<\/code> value):<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The user agent chooses an appropriate thickness for text decoration lines. [\u2026] The user agent chooses an appropriate offset for underlines.<\/p><p><\/p><\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"luckily-we-can-override-the-browsers-defaults\">Luckily, we can override the browsers\u2019 defaults<\/h3>\n\n\n<p>There are two new, <a href=\"https:\/\/caniuse.com\/mdn-css_properties_text-decoration-thickness,mdn-css_properties_text-underline-offset\" rel=\"noopener\">widely supported<\/a> CSS properties that allow us to precisely define the thickness and offset for our underlines:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/\"><code>text-decoration-thickness<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/\"><code>text-underline-offset<\/code><\/a><\/li><\/ul>\n\n\n\n<p>With these properties, we can create consistent underlines even across two very different browsers, such as the Gecko-based Firefox on Android and the WebKit-based Safari on macOS.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">h1 {\n  text-decoration: underline;\n  text-decoration-thickness: 0.04em;\n  text-underline-offset: 0.03em;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2016\" height=\"1426\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?resize=2016%2C1426&#038;ssl=1\" alt=\"\" class=\"wp-image-359840\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?w=2016&amp;ssl=1 2016w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?resize=300%2C212&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?resize=1024%2C724&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?resize=768%2C543&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?resize=1536%2C1086&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/consistent-underlines.jpeg?resize=1000%2C707&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Top row: the browsers\u2019 default underlines; bottom row: consistent underlines with CSS. (<a href=\"https:\/\/codepen.io\/simevidas\/pen\/poWPBoX?editors=1100\" rel=\"noopener\">Demo<\/a>)<\/figcaption><\/figure>\n\n\n\n<p class=\"is-style-explanation\"><strong>Note:<\/strong> The <code>text-decoration-thickness<\/code> property also has a special <a href=\"https:\/\/drafts.csswg.org\/css-text-decor-4\/#valdef-text-decoration-thickness-from-font\" rel=\"noopener\"><code>from-font<\/code> value<\/a> that instructs browsers to use the font\u2019s own preferred underline width, if available. I <a href=\"https:\/\/twitter.com\/simevidas\/status\/1469790544335450112\" rel=\"noopener\">tested<\/a> this value with a few different fonts, but the underlines were inconsistent.<\/p>\n\n\n\n<p>OK, so let&#8217;s move on to the two Chrome bugs I noted earlier.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"chrome-bug-1-underlines-are-too-thin-on-macos\">Chrome bug 1: Underlines are too thin on macOS<\/h3>\n\n\n<p>If you set the <code>text-decoration-thickness<\/code> property to a font-relative length value that computes to a non-integer pixel value, Chrome will \u201cfloor\u201d that value instead of rounding it to the nearest integer. For example, if the declared thickness is <code>0.06em<\/code>, and that computes to <code>1.92px<\/code>, Chrome will paint a thickness of <code>1px<\/code> instead of <code>2px<\/code>. This issue is limited to macOS.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a {\n  font-size: 2em; \/* computes to 32px *\/\n  text-decoration-thickness: 0.06em; \/* computes to 1.92px *\/\n}<\/code><\/pre>\n\n\n\n<p>In the following screenshot, notice how the text decoration lines are twice as thin in Chrome (third row) than in Safari and Firefox.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1042\" height=\"462\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-1.png?resize=1042%2C462&#038;ssl=1\" alt=\"\" class=\"wp-image-359843\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-1.png?w=1042&amp;ssl=1 1042w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-1.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-1.png?resize=1024%2C454&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-1.png?resize=768%2C341&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-1.png?resize=1000%2C443&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>From top to bottom: Safari, Firefox, and Chrome on macOS. (<a href=\"https:\/\/codepen.io\/simevidas\/pen\/qBPjavx?editors=1100\" rel=\"noopener\">Demo<\/a>)<\/figcaption><\/figure>\n\n\n\n<p class=\"is-style-default\">For more information about this bug, see <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1255280\" rel=\"noopener\">Chromium issue #1255280<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"chrome-bug-2-underlines-are-too-low\">Chrome bug 2: Underlines are too low<\/h3>\n\n\n<p>The <code>text-underline-offset<\/code> property allows us to precisely set the distance between the alphabetic baseline and the underline (the underline\u2019s offset from the baseline). Unfortunately, this feature is currently not implemented correctly in Chrome and, as a result, the underline is positioned too low.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">h1 {\n  text-decoration: underline;\n  text-decoration-color: #f707;\n\n  \/* disable \u201cskip ink\u201d *\/\n  -webkit-text-decoration-skip: none; \/* Safari *\/\n  text-decoration-skip-ink: none;\n\n  \/* cover the entire descender *\/\n  text-decoration-thickness: 0.175em; \/* descender height *\/\n  text-underline-offset: 0; \/* no offset from baseline *\/\n}<\/code><\/pre>\n\n\n\n<p>Because of this bug, it is not possible to move the underline all the way up to the baseline in Chrome.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1316\" height=\"425\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-2.png?resize=1316%2C425&#038;ssl=1\" alt=\"\" class=\"wp-image-359846\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-2.png?w=1316&amp;ssl=1 1316w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-2.png?resize=300%2C97&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-2.png?resize=1024%2C331&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-2.png?resize=768%2C248&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chrome-bug-2.png?resize=1000%2C323&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>From left to right: Safari, Firefox, and Chrome on macOS. View this demo <a href=\"https:\/\/codepen.io\/simevidas\/pen\/QWqgVKo?editors=0100\" rel=\"noopener\">on CodePen<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>For more information about this bug, see <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1172623\" rel=\"noopener\">Chromium issue #1172623<\/a>.<\/p>\n\n\n\n<p class=\"is-style-explanation\"><strong>Note:<\/strong> As you might have noticed from the image above, Safari draws underlines on top of descenders instead of beneath them. This is a <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=227445\" rel=\"noopener\">WebKit bug<\/a> that was fixed very recently. The fix should ship in the next version of Safari.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"help-prioritize-the-chrome-bugs\">Help prioritize the Chrome bugs<\/h3>\n\n\n<p>The two new CSS properties for styling underlines are a welcome addition to CSS. Hopefully, the two related Chrome bugs will be fixed sooner rather than later. If these CSS features are important to you, make your voice heard by starring the bugs in Chromium\u2019s bug tracker.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"872\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?resize=2000%2C872&#038;ssl=1\" alt=\"\" class=\"wp-image-359848\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?w=2000&amp;ssl=1 2000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?resize=300%2C131&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?resize=1024%2C446&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?resize=768%2C335&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?resize=1536%2C670&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/chromium-bug-stars.png?resize=1000%2C436&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Sign in with your Google account and click the star button on issues <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1172623\" rel=\"noopener\">#1172623<\/a> and <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1255280\" rel=\"noopener\">#1255280<\/a>.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties, and I want to share them with you here in this article.<\/p>\n","protected":false},"author":245432,"featured_media":359839,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"CSS Underlines Are Too Thin and Too Low in Chrome by @simevidas","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1021,1331,868],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?fit=2018%2C944&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?fit=1024%2C479&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359838"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/245432"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=359838"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359838\/revisions"}],"predecessor-version":[{"id":360942,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/359838\/revisions\/360942"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/359839"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=359838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=359838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=359838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}