Undoubtedly the best CSS Feature, Understanding CSS Text Balancing with "text-wrap-style" properties. 🚀
Tags: css, typography, webdev, frontend
Published: 2023-12-22 16:05:12

#### Fundamentals of `text-wrap-style`. 📖

{% youtube nrJ0UaMhkt0 %}

It's important to pay close attention to how text flows inside the layout while developing a website. The text-wrap property stands out among the other CSS properties for controlling text wrapping and line breaking because of its unusual methodology, especially when combined with `text-wrap: balance`. We'll examine the text-wrap attribute in this blog post, along with how it applies specifically to balancing.

Let's examine the text-wrap property from [CSS Text Module Level 4](https://drafts.csswg.org/css-text-4/#text-wrap-style), which was added in order to better understand the idea. This property is a useful tool for controlling the way text wraps inside the specified container. You can specify exactly how text breaks and wraps when it approaches the edges of its container by using the text-wrap property. 

---

#### CSS Syntax 👨‍💻

```
text-wrap = 
  auto     |
  balance  |
  stable   |
  pretty   
```

---

#### Comparison 🖥️
Observe how `text-wrap-style` line breaks and text layout differs across various properties in the following snippets; `auto`, `balance`, `stable`, `pretty`, and normal text accordingly.


![T1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn58coafz75ed7c3zr1s.png)
![T2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pwafeb6fwyk50mj88td.png)
![T3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etf6utwm774ihrh5cnv7.png)
![T4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9b7bs0tyysan0gms8me.png)
![T5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu2yjmkcszyvi6y5fa75.png)

---

#### Applicability 🖥️
On top of that, here are the simplified illustration of text layout and practical use cases highlighting the suitability of `text-wrap-style` properties to accommodate various text appearance. 
_PS: Refer the snippets above_ ☝️

**`auto`** → **wide** | **flowing**
Use Case: In scenarios where automatic text wrapping is preferred.
Description: The auto value allows the browser to automatically determine the most appropriate text wrapping, ensuring readability without manual intervention.

**`balance`** → **narrow** | **fair**
Use Case: Ideal for achieving a balanced distribution of text across lines.
Description: By using balance, the aim is to evenly distribute text, preventing awkward line breaks and creating a visually symmetric layout.

**`stable`** → **unchanging** | **constant**
Use Case: Suited for situations where stability in text layout is crucial.
Description: The stable value ensures a consistent text layout, beneficial when maintaining a fixed design structure is a priority, minimising text reflow.

**`pretty`** → **conical** | **aesthetic**
Use Case: Best for enhancing the visual appeal of justified text.
Description: When aesthetics matter, pretty comes into play by optimising the presentation of justified text, providing a visually pleasing and polished appearance.

---

#### Browser Compatibility 🖱️
Before utilising any `text-wrap: style` properties, make sure your browser is compatible. It is rare to find support for the `text-wrap: style` function.
_Read More_ → _https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#browser_compatibility_

---

#### Common Issues ❌

**1. Browser Support**
The main support for this feature can only be found in browsers based on Chromium (such as Chrome and Edge) that uses vendor-specific prefixes (-webkit-text-wrap: balance).
[**_Solution_**](https://caniuse.com/?search=text-wrap%3Abalance) → To tackle this issue, it is essential to take into account alternative method when implementing this property.

**2. Technical Constraints**
Balancing text creates a challenge when used in conjunction with the white-space property, as one requests no wrapping while the other seeks balanced wrapping.
[**_Solution_**](https://developer.chrome.com/blog/css-text-wrap-balance#:~:text=care%20of%20it!-,Interactions%20with%20the%20white%2Dspace%20property,balanced%20wrapping%20can%20apply%20again.) → To address this, disable the settings for white-space property to allow for the reapplication of balanced wrapping.

---

#### Conclusion 📝
In conclusion, the CSS attribute `text-wrap: balance` proves to be a valuable asset along with other properties in your web design even with it's drawbacks, particularly when striving for a well-presented text arrangement. Implementation of `text-wrap: balance` guarantees a visually pleasing distribution of text, thereby elevating readability and augmenting the overall visual appeal of your web content. It is important to note that while this property contributes to aesthetic improvements, it is essential for you to confirm its compatibility with the web browsers used by your target audience to ensure a smooth and enjoyable user experience.

---

#### Illustrative Demo 💻
To enhance the comprehension of `text-wrap-style` properties, I have integrated a live working example that demonstrates the practicality and distinct text layout variances for each property. This illustration serves as a tool for grasping the applications and visual outcomes which shows how these properties can be effectively utilised in web development.
→ _https://text-wrap-balance.vercel.app/_

---

#### Resources 📜
_https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap_
_https://drafts.csswg.org/css-text-4/#text-wrap-style_
_https://dev.to/kazz/boost-your-productivity-using-markdown-1be_
_https://caniuse.com/?search=text-wrap%3Abalance_

**Github Repository** 👇
{% github aqilmarwan/text-wrap-balance %}