Removing large spaces in Microsoft Word. Whitespace characters and their formatting of code in Html, as well as special non-breaking space characters and other mnemonics

It is difficult to identify specific “rules” for using short spaces; you just need to remember this possibility and apply it wherever it will make the text better.

For example, a short space can be useful between the number and the letter of the house. In theory, they should be written together, but in many fonts the letter b is too similar to the number 6, so when 25b is written it can be difficult to understand whether we are talking about the house twenty-five “be” or the house two hundred and fifty-six. Option 25b does not have this problem.

You can go further and make several classes of slightly different lengths. For example, between Pushkin’s initials you can put a slightly larger space, 1/6 em. For dollars, percentages and degrees Celsius, on the contrary, 1/12 may be enough. But I prefer to limit myself to one short space option. Just to break off the “American dash” there will really be too much of it, but we don’t encounter it (in the picture above, a space of 1/16 em is used).

Hello, dear readers of the blog site. A little earlier, we already managed to talk about that, and also learned about the design in it. Today we have in turn the concept of white space in HTML, as well as the associated code formatting when writing it (for the convenience of its subsequent reading and perception).

Well, due to the fact that we will touch on the topic of non-breaking space and soft hyphenation, we will have to focus our attention on the so-called special characters or mnemonics used in the Html language, which will allow you to add many additional characters to the web document code, like those already mentioned above . But first things first.

Spaces and whitespace characters in HTML

Before moving on to the issue of formatting text using tags specially designed for this (paragraph, headings, etc.), I want to dwell on how spaces, line breaks (Enter) and tabulation are interpreted in the HTML language, and how breaking is carried out text in the browser window when it is resized.

True, for this kind of visual formatting (which will not be visible on the web page), most often it is not the spaces themselves that are used, but rather the tab and line break characters. There is such a rule - when you start writing a nested Html tag, then indent using tabs(Tab key on the keyboard), and when you close this tag, remove the indentation (key combination Shift+Tab on the keyboard).

This must be done so that the opening and closing tags are at the same vertical level (at the same number of tabs from the right edge of the page in your Html editor, for example, Notepad++, which I wrote about). In addition, I advise you to immediately after writing the opening element make several line breaks and immediately write the closing one at the same level (number of tabs), so that you don’t forget to do this later.

Those. the opening and closing elements should be at the same level vertically, and the internal tags should be shifted by one tab character and the closing and opening elements should be placed again on the same level.

For simple web documents this may seem like overkill, but when creating more or less complex ones, they the code will become much more clear and readable due to the abundance of spaces, and it will also be much easier to spot errors due to the symmetrical arrangement of tags.

Special characters or mnemonics in HTML code

So, now let's talk about the so-called special characters, the ease of use of which I announced at the beginning of this article. Special characters are also sometimes called mnemonics or substitutions. They are intended to solve a problem that has arisen in hypertext markup language for a long time, related to the encodings used.

When you type text on the keyboard, the characters of your language are encoded according to a predetermined algorithm, and then they are displayed on the site using the fonts you use (where to find and how to install for the site) due to decoding.

There are a lot of encodings, but for the Html language the extended version of encodings was adopted by default.

In this text encoding it was possible to write only 256 characters - 128 from ASCII and another 128 for Russian letters. As a result, a problem arose with the use on sites of characters that are not included in ASCII and are not Russian letters that are part of the Windows encoding 1251 (CP1251). Well, you decided to use a tilde or an apostrophe, but such a possibility was not initially included in the encoding used by the Html language.

It is for such cases that substitutions or, in other words, mnemonics were invented. Initially special characters had a digital form, but then for the most common ones their letter counterparts were added to make them easier to remember.

In general terms, a mnemonic is a character that begins with an ampersand “&” and ends with a semicolon “;”. It is based on these characteristics that the browser, when parsing HTML code, extracts special characters from it. The ampersand in the numeric wildcard code must be immediately followed by a pound sign "#", sometimes called a hash. And only then follows the digital code of the desired character in Unicode encoding.

More than 60,000 characters can be written in Unicode - the main thing is that the mnemonic symbol you need is supported by the font used on your site. There are fonts that support almost all Unicode characters, and there are options only with a certain set of characters.

The full list of special characters will be simply huge, but most commonly used mnemonics you can borrow for example from this table:

There is quite an interesting way to get HTML mnemonic code for the sign you need. To do this, just open the Microsoft Word editor, create a new document and select “Insert” - “Symbol” from the top menu (I use the 2003 version, so I don’t know how to do a similar operation in later versions).

In the window that opens, you need to select a font, for example, Times New Roman (or any other that will obviously be present on the majority of computers of your site visitors - Courier or Arial, for example).

Add all the special characters you need from the list that opens to your Word document and save this Word document as a web page (selected from the “.html” drop-down list when saving). Well, then all you have to do is open this web page in any HTML editor (the same Notepad++ will do) and you will see all the digital codes of the mnemonics you need:

The method is a little complicated, but if you want to use some rare special character on your website page, then it will be easier than searching on the Internet for tables like the one shown just above. You will need to paste the resulting special character code in the right place and instead of it on the web page the browser will display the character you need (for example, a non-breaking space).

Non-breaking space and soft hyphen in examples

As I already mentioned above and as you can see from the table of special characters given just above, some mnemonics in Html received, in addition to digital, also a symbolic designation for easier memorization. Those. Instead of the hash sign “#” (hash), words are used in symbolic variants. For example, the same non-breaking space can be written either as (digital mnemonic) or as (character).

When writing articles, if you need to insert an ampersand (&) or open angle bracket (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

That is, if you are writing an article in which you will need to insert, for example, a tag display into the text< body>or you just need to insert a less than sign (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Therefore, you will need to insert the following construction to solve a similar problem:

The same applies to displaying the code of the mnemonics themselves, since they begin with an ampersand. You will need to insert the code into the text, replacing the ampersand sign with its substitution (special character):

This will need to be done to get on the page<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

You will also most likely use a non-breaking space, which will look like a regular space on a web page, but the browser will not treat it as a space character at all and will not carry out transfers on it(for example, this will be appropriate for phrases such as 1400 GB, etc., which it would not be advisable to hyphenate across different lines):

1400 GB.

Sometimes the opposite situation may arise, when the text contains very long words and you want to make sure that, if necessary, the browser I could break these words with hyphenation. For such purposes, a special symbol “soft transfer” is provided -

A long, long word;

When it becomes necessary to move to another line, the browser will use a hyphen instead of the soft hyphen mnemonic and send the rest of the word to the next line. If there is enough space to place this entire word on one line, then the browser will not draw any line feed. It's as simple as that.

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to

You might be interested

MailTo - what is it and how to create a link in Html to send an Email
Tags and attributes of headings H1-H6, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard
How to insert a link and a picture (photo) into HTML - IMG and A tags

While typing, MS Word automatically moves to a new line when we reach the end of the current one. In place of a space at the end of a line, a kind of text break is added, which in some cases is unnecessary.

So, for example, if you need to avoid breaking any whole structure consisting of words or numbers, a line break added by using a space at the end of the line will clearly be a hindrance.

To avoid an unwanted break in the structure, at the end of the line, instead of a regular space, you need to set a non-breaking space. How to put a non-breaking space in Word will be discussed below.

After reading the text in the screenshot, you probably already understood how to add a non-breaking space, but using the example of this screenshot you can clearly show why such a symbol is needed at all.

As you can see, the key combination written in quotes is split into two lines, which is undesirable. Alternatively, you can, of course, write it without spaces, this will eliminate the line break. However, this option is not suitable for all cases; moreover, using a non-breaking space is a much more effective solution.

1. To set a non-breaking space between words (symbols, numbers), place the cursor in the space space.

Note: A non-breaking space must be added instead of a regular space, not together with/next to it.

2. Press the keys “Ctrl+Shift+Space(space)”.

3. A non-breaking space will be added. Consequently, the structure located at the end of the line will not be broken, but will remain entirely in the previous line or will be transferred to the next one.

If necessary, repeat the same step to establish non-breaking spaces in the margins between all components of the structure that you want to prevent breaking.

If you turn on the hidden character mode, you will see that the regular and non-breaking space characters are visually different.

Actually, we can end this. From this short article, you learned how to create a non-breaking space in Word, as well as in what cases it may be needed. We wish you success in learning and using this program and all its features.

Everyone who tried create websites in HTML faced this problem. Almost all HTML tags cut out extra spaces. And this time I will give you an example of this “cutting”, and also tell you how to make sure that the spaces are not cut out.

Let's start by writing a simple HTML code:

Some text Continued...

If you look at the result, you will see that all of our spaces have been cut out and only one remains. And almost every tag does this.

There are three options display extra spaces in HTML. The first way is to use a tag<pre>:

Some text Continued...

As a result, you will see that the gaps remain, and this is exactly what we wanted.

But there is another way that I use regularly - the "" entity. This entity simply replaces the space character:

Some text Continued...

As a result, you will also see a whole series of spaces. For me, this method is better because you don’t need to use extra tags. But this is a matter of taste. Where is it needed? extra space in HTML, just insert "" and enjoy the result.

And finally, the last way is using CSS. To do this, you just need to add this style:

P(
white-space: pre;
}

This method is the fastest and easiest, however, I do not use it, since in my practice there are few cases in which I have to add many consecutive spaces. And if they do happen, then I use the " " entity several times. In addition, white-space property not supported by all browsers (in particular, IE6 And IE7 do not support), which already limits the scope of this method.

In general, to summarize:

1) If any part of your text contains a lot of spaces in different places, then use the tag<pre>.

2) If you encounter a single moment somewhere where you need several spaces in a row, then use the entity "  ";

3) If your entire page is made up of a bunch of consecutive spaces (although this happens extremely rarely), then use the property white-space with meaning pre.

If you want to know more about HTML, then take a look at my free course with an example of creating a website at HTML: