Forem: Tanim Mahbub

Working with text in CSS: some issues & solutions

Tanim Mahbub — Thu, 10 Oct 2024 11:17:04 +0000

1. Few people haven't encountered issues with the paragraph in the hero section. To address this, many developers create a separate div and assign it a specific width, or they apply width or max-width directly to the paragraph. I used to do the same until I discovered the ch unit. This unit counts characters, allowing you to specify how many characters you want per line.

In the example below, the paragraph in the hero section is given max-width: 64ch (60 to 70 characters are recommended). No extra div is needed.

2. Sometimes, a heading might have just one word moving to the next line, or the first line contains more text than the second, which can look unbalanced. We often use the <br> tag or adjust the width to fix this. This issue can also occur with paragraphs. For instance, in the previous example, the last line of the paragraph has less text than the other lines.

A neat solution to this problem is using text-wrap: balance;. In the following example, each line of the paragraph contains roughly the same amount of text.

Similar to balance, there's another value for the text-wrap property called pretty. When the last line of a paragraph or heading contains only one word:

Using text-wrap: pretty; adds another word to the lone word on the last line, so it doesn't stand alone. While browser support for text-wrap: balance; is pretty good, but it's not that good for pretty 😜

3. The text-decoration property is often underutilized. Let's explore the various values it can accept beyond none, and understand that text-decoration is actually a shorthand for four properties:

p {
    /*
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
}

Another interesting property related to text-decoration is text-underline-offset, which allows you to create space between the text-decoration-line and the text.

4. Sometimes, we link long pieces of text in blogs, which often wrap to the next line. Applying a background color to this linked text can look awkward when it breaks onto the next line, as shown in our previous example.

Many encounter this issue when using background colors in headings as well. A neat solution is to use box-decoration-break: clone;. In the following example, the linked text that looked awkward before now displays correctly.

5. While some issues persist occasionally, we can now use text-stroke directly in CSS. Yes, it requires a prefix, but we no longer need to rely on text-shadow tricks like before, which is a significant improvement!

6. The last feature for today is line-clamp. It also requires a prefix, yet it's now widely used. This is commonly seen in cards for various blogs or articles. There are many ways to determine how many lines of text to show on a card. I used to control this using a custom data attribute and JavaScript, specifying the number of characters to display. However, this can be done more easily with line-clamp.

The code block below compiles all the topics discussed, making it convenient to search for and research other uses, browser support, and more.

p {
    max-width: 64ch;
    text-wrap: balance; /* or pretty */
    /**********************/
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    /**********************/
    /*
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
    box-decoration-break: clone;
    text-underline-offset: 3px;
}

h1 {
    -webkit-text-stroke-color: #333;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
}

That's all for today. Stay well, and goodbye!

PostCSS - my initial experience

Tanim Mahbub — Thu, 11 Jan 2024 15:06:22 +0000

Intro

I was about to make the title something like this-

PostCSS - a real-life time machine for CSS lovers

Then I thought, it's too dramatic. Let's keep it simple. (and now you know I loved this title more 😀)

I've been a CSS lover from the beginning of my career, but not like Ben Evans the CSS Artist, I mean he took CSS to another level.

Anyway, when I first learned about PostCSS and what it's capable of, it was very overwhelming for me and I was shocked. Then I started to learn its limitations, pros & cons, which plugins are used most, and where to get the plugins and things like that.

So, today I'm going to share some information that I was looking for but didn't find when I was learning. If this information had been published somewhere, my journey could have been easier and much shorter.

information

I mean, if I knew that

the plugins in the official PostCSS website were old like IE6 or the marquee tag, and
the updated plugins were in postcss-plugins repo by csstools, and
the author of the most popular PostCSS plugin himself recommended the postcss-preset-env over his own creation which is cssnex, and
there was
- a playground,
- a list of features that you can filter by stage,
- and much more for postcss-preset-env,

then it would have been easier to search & research and to make the native CSS much more powerful than SCSS. But anyway, we are here now, and if my experience can make any contribution to other's journey, that would be very rewarding 😎.

This is a table to compare how we can reduce the number of plugins with more features & efficiency.

OLDER PLUGINS WITH COOL FEATURES	MUCH BETTER & UPDATED ALTERNATIVE
cssnext \|\| about cssnext to Preset Env	Preset Env
Postcss Custom Media
Postcss Media Minmax
Nesting and much much more...
Postcss Simple-Vars	Postcss Advanced Variables
Postcss Conditionals
Postcss Each
Postcss For
PostCSS Mixins
and more, like conditionals (`@if / @else`), @each, @for etc.

Conclusion

I encountered the PostCSS while diving into Tailwind CSS and trying to integrate SCSS with it. My goal was to achieve SCSS functionalities and other cool features within native CSS, eliminating the need for SCSS in Tailwind. And that's how my PostCSS journey began.

However, it's important to note that not everyone using PostCSS shares the same purpose. The tool offers loads of possibilities beyond my initial use case.

As I continue to learn, I welcome contributions from others who can share valuable PostCSS resources in the comments. Your input would be greatly appreciated!

Pure CSS Tab using :target and :has()

Tanim Mahbub — Fri, 11 Nov 2022 01:39:02 +0000

When the CSS :target was introduced for the very first time, I was so excited that first I made a package of modals with different sizes and positions, and then I made a popup slider using the same CSS :target

After that, I tried to make a tab the same way, without any effect, just display: none; to display: block; but, the problem was- how can I display the first tab since the CSS :target doesn't work until the trigger is clicked.

Years passed, then a few days ago I came to learn about the :has() selector and it was just crazy. After going through the basic of :has() selector I found the solution for my CSS Tab that I started years ago.

Now I have one issue left, the active state for the tab-buttons. I tried to fix it using :has() selector with a:visited (the same way in image) but the a:visited state doesn't change once its visited. So, waiting for the solution for this.

The browser-support is not there yet for :has() including Firefox and some other browsers. But Chrome supports it, hoppiing it'll be better soon.

We know that there is a radio-way ([type="radio"]) to make CSS Tab, I'm just trying to make another way, and now after almost 80% to perfection I'm sharing the idea with you. Let me know your thoughts.

CSS Popup Slider repository
CSS Modal repository