Minimize spaces between justified words – CSS3

Many people wants to use text-align:justify in paragraph content on their website. But it doesn’t look nice on some places. You will notice some extra gaps between words. Which looks odd.

Now there is a CSS3 property which you can use to reduce gaps between words. Basically it can improve the result on supporting browsers.


p {
  text-align: justify;
  text-justify: distribute;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem arcu, pulvinar quis lorem sit amet, commodo accumsan eros. Donec mauris tortor, viverra eu commodo in, egestas non ipsum. Quisque diam risus, semper quis dui volutpat, elementum placerat urna. Praesent quis posuere ligula, nec eleifend tortor. Sed iaculis bibendum ligula id commodo. Nullam eget sapien magna. Nunc condimentum, ligula ac consectetur varius, sapien lectus viverra massa, accumsan molestie sem mi vel lacus. Cras vel lobortis ligula, non imperdiet est.

What is NOINDEX and NOFOLLOW?

NOINDEX

A “NOINDEX” tag tells search engines not to include the page in search results.

To tell search engines not index your page, just add the following to the </head> section of your web page.


<meta name="robots" content="noindex, follow">

NOFOLLOW

A “Nofollow” tag tells search engines not to follow the links on your page.


<a href="example-page.htm" rel="nofollow">

SEO Yoast version 9.2.1 isn’t supporting latest WordPress 5.0.3

Today I’ve noticed an issue with the WP Bakery page builder on my website. The issue was with the WP Bakery page editor view which wasn’t showing while editing the pages.
After trouble shooting I found that SEO Yoast Version 9.2.1 isn’t compatible with latest WordPress 5.0.3. It’s stopping the WP Bakery page editor in the backend. You can’t see the options and features that WP Bakery provides.

To fix the issue I just updated the version of SEO Yoast plugin and all looks good after that.

I’m also attaching a screenshot to you guys. So you can see what I’ve fixed.

Target first letter of an element – CSS3

The ::first-letter selector is used to add a style to the first letter of an element.
You guys may have seen something like this on few sites, where the first letter of a main paragraph is larger than the rest of the content.


p::first-letter {
  font-size: 25px;
  color: #8A2BE2;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus justo erat. Vestibulum neque nulla, hendrerit vitae ipsum aliquam, dignissim ullamcorper tortor. Suspendisse ultricies tortor sed dolor tincidunt euismod. Sed nibh turpis, tincidunt ac massa non, ornare dictum est.