{"id":212,"date":"2023-12-01T20:19:12","date_gmt":"2023-12-01T20:19:12","guid":{"rendered":"http:\/\/rc.frontendmasters.com\/blog\/?p=212"},"modified":"2024-12-10T17:46:31","modified_gmt":"2024-12-10T22:46:31","slug":"pretty-vs-balanced","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/pretty-vs-balanced\/","title":{"rendered":"Pretty vs Balanced"},"content":{"rendered":"\n<p><a href=\"https:\/\/blog.stephaniestimac.com\/posts\/2023\/10\/css-text-wrap\/\">Stephanie Stimac<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Use&nbsp;<code>text-wrap: balance;<\/code>&nbsp;on headings and subheadings. And use&nbsp;<code>text-wrap: pretty;<\/code>&nbsp;on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement.<\/p>\n<\/blockquote>\n\n\n\n<p>The performance impact is <a href=\"https:\/\/twitter.com\/csswizardry\/status\/1725543814587134435\">generally negligible<\/a> but there in extreme conditions.<\/p>\n\n\n\n<!--more-->\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1980\" height=\"474\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-1.png?resize=1980%2C474&#038;ssl=1\" alt=\"\" class=\"wp-image-4789\" style=\"width:564px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-1.png?w=1980&amp;ssl=1 1980w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-1.png?resize=300%2C72&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-1.png?resize=1024%2C245&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-1.png?resize=768%2C184&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-1.png?resize=1536%2C368&amp;ssl=1 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Top: Unstyled \/ Bottom: Balanced<\/figcaption><\/figure>\n<\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"375\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/pretty.png?resize=1024%2C375&#038;ssl=1\" alt=\"\" class=\"wp-image-4787\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/pretty.png?resize=1024%2C375&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/pretty.png?resize=300%2C110&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/pretty.png?resize=768%2C282&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/pretty.png?resize=1536%2C563&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/pretty.png?w=1639&amp;ssl=1 1639w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Left: Unstyled \/ Right: Pretty<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stephanie Stimac: Use&nbsp;text-wrap: balance;&nbsp;on headings and subheadings. And use&nbsp;text-wrap: pretty;&nbsp;on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement. The performance impact is generally negligible but there in extreme conditions.<\/p>\n","protected":false},"author":1,"featured_media":4791,"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":[7,38,39],"class_list":["post-212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-text-wrap","tag-typography"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/balance-featured.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/212","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=212"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":4790,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/212\/revisions\/4790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4791"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}