Explore the characteristics and expressions of different spaces in HTML (recommended)

I. Overview

When writing HTML templates, spaces are sometimes used as a means of text layout. The most common situation is to insert spaces between paragraphs of text to separate relatively independent words. However, in this situation, we usually do not use ordinary spaces (half-width spaces, that is, spaces entered directly on the keyboard under the English input method) directly, because when we expect to enter several such spaces in succession to create a blank space, the actual blank space size displayed on the final web page is only the size of one space. Therefore, it is usually used to replace half-width spaces. Entering multiple spaces in succession will produce a corresponding number of blank spaces. In fact, in addition to Unicode, Unicode also defines a large number of space characters with different characteristics, including HTML entity forms. This article will study these relatively less noticed spaces and their characteristics.

2. There are spaces in HTML entity form in Unicode

Here are the spaces in Unicode with HTML entity forms and the resulting whitespace effects:

These spaces can be divided into three categories according to their characteristics:

1. No line breaks

There is only one type of non-breaking space, and its most important feature is that it will not be judged by the browser as being able to be interrupted in the middle, which is also the main purpose of its creation. Here is a brief introduction:

is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this occupies.

For example, in the sentence "This is a test for non-breaking space", if half-width spaces are used between words and the sentence is placed in a container with a width that is just insufficient, the word "space" will be wrapped on its own line due to insufficient width.

If you want to wrap "breaking" and "space" at the same time, you only need to replace the half-width space between "breaking" and "space" with:

It can be seen that common characters such as "-" will still be considered as word separators by the browser, and since "breaking" and "space" are connected and will not be interrupted, the browser will consider them to be a complete word and move them to the next line at the same time if the position allows.

It should be noted that if all spaces are used in a large paragraph of English text, the browser will not be able to correctly identify which character is the beginning and end of a word. Therefore, no matter how you use CSS properties such as word-wrap and word-break to control word breaks or line breaks, it will be difficult to avoid breaking words in the middle of a word, which is often not the result we want. Therefore, if there are a large number of consecutive spaces between different words in a paragraph, it is best to use a normal half-width space as the first space of these consecutive spaces to ensure that there is still normal separation between words.

2. Generate blank spaces according to the font size

This type of space contains three space characters, and these three spaces will produce corresponding blank sizes according to different font sizes, namely 1/2 em, 1em, 1/6em (sometimes designed to be 1/5em) wide. The blank size is shown in the following figure:

Since Chinese is a monospaced font, the size of the blank space generated has a clear proportional relationship with the size of the Chinese character (one is equal to the width of half a Chinese character, and the other is the width of a Chinese character), so this type of space is very suitable for controlling typesetting, for example:

3. Zero-width ligatures control spaces

That is, ‌ and ‍ , these two space characters do not produce blanks, they can only control whether characters are connected. These two characters are also "non-printing characters" (or "control characters"), that is, they do not affect the printing effect, they are only used to control character characteristics. The so-called ligature is a common phenomenon in Western fonts, which means that two separate letters can be connected to form a new letter when connected. For example, in German, connecting "f" and "l" will create a new character, and the semantics of the entire word will change or become ungrammatical. For example:

Auf‌lage (edit) is a German compound word, consisting of two components, "auf" (about) and "lage" (location). In German grammar, the boundaries of compound word components cannot be hyphenated, so there should be no hyphen between "f" and "l". If this word is written directly on HTML and directly controlled by the browser, the following effect will be produced:

"f" and "l" are connected, which does not conform to the grammatical specifications of German. Therefore, a forced non-hyphen is inserted between the two letters. The effect is as follows:

It is worth noting that not all browsers are sensitive to ‌ and ‍. Currently, these two characters cannot be controlled to produce hyphenation or non-hyphenation in Chrome (44.0.2403.125), while Safari (8.0.6) can effectively control hyphenation.

Finally, it is important to emphasize that although Unicode has various spaces with different characteristics that can be used for typesetting, in theory, spaces should not be used for typesetting. Typesetting should be controlled by CSS. The spaces used for typesetting do not belong to the content but are mixed with the content, which is actually quite difficult to maintain. Only in special cases where it is inconvenient to use CSS (such as in EML) should spaces be considered for typesetting.

The above is the characteristics and expressions of different spaces in HTML that I introduced to you (recommended). I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!