{"id":56902,"date":"2025-04-22T09:03:33","date_gmt":"2025-04-22T12:03:33","guid":{"rendered":"https:\/\/manualdousuario.net\/?p=56902"},"modified":"2025-04-22T09:03:33","modified_gmt":"2025-04-22T12:03:33","slug":"css-text-wrap-pretty-bonito-web","status":"publish","type":"post","link":"https:\/\/manualdousuario.net\/en\/css-text-wrap-pretty-bonito-web\/","title":{"rendered":"Beautifying the text on the web with modern CSS"},"content":{"rendered":"<p>Another chapter in the series \u201cfascinated by the details of CSS,\u201d this time featuring the attribute <code>text-wrap: pretty<\/code> and how browsers handle line breaks, \u201ctypographic river\u201d (a concept I wasn&#8217;t familiar with), and the length of the final line.<\/p>\n<p>Safari is the second-to-last major browser to implement <code>text-wrap: pretty<\/code>, a feature announced in <a href=\"https:\/\/webkit.org\/blog\/16547\/better-typography-with-text-wrap-pretty\/\">a super detailed post<\/a>, which is quite interesting. &#8220;Pretty&#8221; in English means &#8220;beautiful&#8221;; I find it lovely that the CSS specification delegates the decisions for presenting beautified text to each browser.<\/p>\n<p><!--more-->Chromium (the base for Chrome, Edge, Opera, and Samsung Browser), for instance, \u201conly makes adjustments to the last four lines of a paragraph\u201d because it focuses on preventing the last line from being short.<\/p>\n<details>\n<summary>Speaking of which\u2026<\/summary>\n<p>A new attribute has emerged, <code>text-wrap: avoid-short-last-line<\/code>, to\u2026 prevent the last line from being short. At rare moments, I think people go overboard with specificity.<\/details>\n<p>Check out <a href=\"https:\/\/codepen.io\/jensimmons\/pen\/xxvoqNM?editors=1100\">this demonstration<\/a> from the WebKit team (the engine behind Safari), featuring dynamic controls for <code>text-wrap: pretty<\/code>. (As of today, in April 2025, the stable version of Safari still does not support it.)<\/p>\n<p>This <strong>Manual do Usu\u00e1rio<\/strong> implements some more established rules for balancing blocks of text and improving readability:<\/p>\n<ul>\n<li>Headings, for example, get <code>text-wrap: balance<\/code>, which ensures that all lines have roughly the same length.<\/li>\n<li>Paragraphs and list items utilize <code>overflow-wrap: break-word<\/code> to break long words to prevent them from overflowing the visible area, and creating a horizontal scrollbar.<\/li>\n<\/ul>\n<p>The WebKit post introduced me to <a href=\"https:\/\/12daysofweb.dev\/2024\/css-margin-trim-line-height-units\/\">this other one<\/a>, which details the <code>margin-trim<\/code> attribute and the <code>lh<\/code> (line height) unit, both previously unknown to me. Nowadays, spacing between blocks of text is done with regular <code>margin<\/code> and line height defined in <code>rem<\/code> (relative size based on the browser&#8217;s default font size).<\/p>\n<p>It&#8217;s for these reasons and more that I can never seem to <a href=\"https:\/\/altendorfme.github.io\/dias-sem-mexer-no-leiaute\/\">spend too much time without tweaking the layout of this site<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Another chapter in the series \u201cfascinated by the details of CSS,\u201d this time featuring the attribute text-wrap: pretty and how browsers handle line breaks, \u201ctypographic river\u201d (a concept I wasn&#8217;t familiar with), and the length of the final line. Safari is the second-to-last major browser to implement text-wrap: pretty, a feature announced in a super [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"aside","meta":{"episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_locale":"en_US","_original_post":""},"categories":[1575],"tags":[1820,1913],"_links":{"self":[{"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/posts\/56902"}],"collection":[{"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/comments?post=56902"}],"version-history":[{"count":2,"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/posts\/56902\/revisions"}],"predecessor-version":[{"id":56904,"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/posts\/56902\/revisions\/56904"}],"wp:attachment":[{"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/media?parent=56902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/categories?post=56902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/manualdousuario.net\/wp-json\/wp\/v2\/tags?post=56902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}