{"id":4884,"date":"2024-12-27T14:05:54","date_gmt":"2024-12-27T19:05:54","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4884"},"modified":"2024-12-27T14:05:54","modified_gmt":"2024-12-27T19:05:54","slug":"css-text-box","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/css-text-box\/","title":{"rendered":"CSS text-box"},"content":{"rendered":"\n<p><a href=\"https:\/\/webkit.org\/blog\/16301\/webkit-features-in-safari-18-2\/\">Safari<\/a> is <a href=\"https:\/\/caniuse.com\/mdn-css_properties_text-box\">first<\/a> to drop <code>text-box<\/code> in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Now you can declare which font metric you want the browser to consider the edge of the text box when calculating layout<\/p>\n<\/blockquote>\n\n\n\n<p>Jason Bradberry has <a href=\"https:\/\/piccalil.li\/blog\/why-im-excited-about-text-box-trim-as-a-designer\/\">a wonderfully deep article<\/a> and showcases one of the big use cases (non jacked up button centering).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"750\" src=\"https:\/\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/12\/button-trim.avif\" alt=\"\" class=\"wp-image-4885\"\/><\/figure>\n\n\n\n<p>Like <a href=\"https:\/\/robinrendle.com\/notes\/text-box\/\">Robin Rendle says<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I\u2019m always fighting the text-box when it comes to buttons in an interface and so hopefully this property fixes all that.<\/p>\n<\/blockquote>\n\n\n\n<p><a href=\"https:\/\/nerdy.dev\/text-box-ftw\">Adam Argyle says<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This line of code is about to be in every single stylesheet.<\/p>\n<\/blockquote>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">h1<\/span>, <span class=\"hljs-selector-tag\">p<\/span>, <span class=\"hljs-selector-tag\">button<\/span> {\n  <span class=\"hljs-attribute\">text-box<\/span>: trim-both cap alphabetic;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"<p>Safari is first to drop text-box in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say: Now you can declare which font metric you want the browser to consider the edge of the text box when calculating [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[93,7,274],"class_list":["post-4884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-buttons","tag-css","tag-text-box"],"acf":[],"jetpack_featured_media_url":"https:\/\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/12\/button-trim.avif","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4884"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4884\/revisions"}],"predecessor-version":[{"id":4887,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4884\/revisions\/4887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4885"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}