Two spaces after each full stop in a paragraph using CSS?

How to put two spaces after each full stop in a paragraph using CSS?

+4
source share
4 answers

Ah, the old “two-space-after-period” meme returns its ugly head again.

Two spaces after a period is something about the world of a typewriter, or a world with a monospace font. We have moved beyond this, starting with TeX or even earlier. The fact is that after the period there should not be one or two spaces, but there should be a pleasant space. Algorithms like TeX are suitable for this. Algorithms in modern web browsers are still primitive in comparison, but are starting to improve. Consider the following:

enter image description here

You will see that the space after the period is (slightly) larger than the space between the words, as it should be.

How about excuses? You hope the browser adds extra space between sentences, rather than putting it between words. And what happens:

enter image description here

In any case, you need finer control in order to implement your own typo on your web pages. The following has four characters   between sentences:

enter image description here

You can also use spaces of different widths from Unicode to get just the required space (see Wikipedia article ).

So is there a way to do this automatically? CSS has the word-spacing , but not the sentence-spacing (in fact, it’s not so easy to understand what a sentence is, even in English, and even more so in other languages). Of course, adding more spaces to your HTML is not going to do, since HTML treats any space run as one space. So you have to write code or find a plugin that moves text on your page and inserts markup. Or add a plug-in or something to your CMS to spit out the code that is marked accordingly. Your alternatives for this:

  • Add   or a combination of Unicode layouts of various widths.
  • Use span tags with margin as another poster.
  • As an option above, use the <span class="sentence"> element with CSS rules such as .sentence::after { content: "\2002"; } .sentence::after { content: "\2002"; } where 2002 is "en-space". This leads to:

enter image description here

However, the bottom line is that the network is not a printing medium, despite many worthy efforts to push it in that direction. Depending on your goals, you might consider creating your documents in a high-end document preparation environment and, for example, publish them as PDF files.

+8
source

You can put your full stop in the span tag and give it some CSS attributes, such as "margin-right: 5px;", if that's just the look you are looking for.

0
source

This can only be done if you put your full label in a tag, such as <span> . For instance:

www<span>.</span>google<span>.</span>com

Then css:

 span:after{ content : " "; /*two spaces*/ } 
0
source

The concept of two spaces after a sentence is not "ugly" - in fact, it is just the opposite. Due to the modern font kerning, as well as the variety of fonts that are now supported by web browsers, it is sometimes very difficult to determine if a sentence has ended or if there is simply an abbreviated word that requires a period, not to mention looking constantly rolling. With bold letters starting a sentence, such as an uppercase letter “W,” it may seem that there really is no space at all. Adding an extra space after the sentence gives readers clear breaks. However, I understand that it would be rather difficult to create CSS that could "understand" what the sentence is so that it automatically inserts an extra space after each.

0
source

Source: https://habr.com/ru/post/1491796/