Hello dear readers of the blog site. In this article, we continue to explore the basics of CSS styling and take a look at the vertical-align, text-align, text-indent, and some others properties for styling html text.
Aligning text with CSS
Let's start with the style attributes that control the rendering of text in block elements. Let's start with the text-align property, which is actually a replacement for the align attribute (used to align the content of html elements such as p paragraphs).
Style property text-align asks horizontal text alignmentand has only four possible values:
The available values \u200b\u200bfor this rule determine the alignment, respectively: left - to the left, right - to the right, center - to the center, and justify - to the width of the page (simultaneously left and right by increasing the distance between words). For example, the text in this article is aligned to the width of the page (if you notice it has even borders on both left and right) using the text-align: justify rule.
By default, horizontal alignment is left-aligned, so you don't need to specifically specify text-align: left if no other alignment has been specified in the parent elements.
Examples of using the property:
Next CSS property text-ident asks indent for the red line, for example for the text in the paragraph tag p. This rule, like text-align, only applies to block elements. Syntax:
Absolute and relative indentation values \u200b\u200bare allowed here. Absolute values \u200b\u200b(px - pixels, em, ex, etc.) can be specified either with a plus or minus sign. The relative value is usually given as a percentage (%). The relative value is calculated from the width of the text area. So, the css rule text-indent: 50% will set the red line equal to half the length of this line itself. By default, the "red line" indent is zero. Example:
Next, let's look at vertical alignment - the property vertical-align... This property is already applicable for all html elements and for almost all means the alignment of inline elements with text relative to their baseline. Except for the table tags td and th, in which all content will be vertically aligned. Syntax:
Let's consider each value in more detail:
- baseline - alignment of a piece of text with the baseline of the parent element. This is the default;
- sub - a piece of text is displayed as a subscript or subscript for the parent element;
- super - a piece of text is displayed as a superscript or superscript for the parent element;
- top - aligns a piece of text to the top of the parent element;
- text-top - aligns the fragment to the top edge of the parent element's text;
- middle - aligns the center of the text fragment to the center of the parent element;
- bottom - aligns a piece of text to the bottom of the parent element;
- text-bottom - alignment of the fragment to the bottom edge of the parent element's text;
The figure below shows the behavior of test fragments with different values \u200b\u200bof the vertical-align property in Internet Explorer 11:
In addition to the above values, you can specify numeric values. For example, the CSS rule vertical-align: 0 would mean the same as writing vertical-align: baseline. And the vertical-align: 10px rule will move the text up 10 pixels from the baseline. To move the text down, the value must be specified with a minus.
The offset can also be specified in relative units, such as em and ex, or as a percentage.
To vertically align the contents of table cells in vertical-align, use the following values:
- top - to align content to the top border of the cell;
- bottom - to align content to the bottom of the cell;
- middle - to align to the center of the cell (used by default).
To achieve the desired result, you usually have to experiment with different values \u200b\u200bfor the vertical-align style property. Numerous possible values \u200b\u200bgive very different results in different cases.
White-space and word-wrap options to control line breaks
Next in line is the white-space parameter, which is responsible for displaying whitespace characters on the html page.
As we know, by default, the browser concatenates all consecutive whitespace characters: spaces, line breaks and tabs, into one space. An exception pre tag, the text placed in it is displayed as is, with all spaces.
The white-space property has the following syntax:
It is clear that the normal value is used by default and leaves everything as described above, all consecutive spaces are combined into one and line breaks are set automatically.
Using the value "pre" would be the same as using the tag "pre". The browser will render the page with any extra spaces and hyphens as added by the developer. If a line of text is too long, a horizontal scroll bar will be added.
The nowrap value prevents the browser from wrapping lines and the text is displayed on a single line. The only thing, adding the "br" tag will allow you to wrap the text on a new line.
The pre-wrap value preserves all sequences of spaces and line breaks, but if the line does not fit into the specified area, the browser automatically wraps the text on a new line.
Well, the pre-line value converts spaces to one space, line feeds are saved, and the browser may break lines that are too long to avoid horizontal scrolling.
Usage example:
Next, consider word-wrap parameter, which will tell you whether or not to wrap long words that do not fit in the given area. This property is not often used, but sometimes you can't do without it:
word-wrap: normal | break-word
The normal value tells the browser to break text only at spaces, and this is normal browser behavior. And the break-word value allows the browser to insert line breaks inside words. Example:
Text shadow parameters - text-shadow property
For fans of various embellishments in the CSS3 standard, it became possible to set a shadow for text. Proper use of the text-shadow property can visibly animate a web page. Syntax:
The value none cancels the shadowing of the text and is set by default.
Shade color is set in any available CSS format and is an optional parameter. By default, the shadow color is the same as the text color.
Horizontal offset of the shadow can be specified in any unit of measure supported by CSS. A positive value will position the shadow to the right of the text, and a negative value to the left. A value of zero will position the shadow directly below the text and only makes sense if the shadow is blurred.
Vertical offset of the shadow also can be set in any unit of measure supported by CSS. A positive value will move the shadow below the text; a negative value will move it above. A value of zero will position the shadow directly below the text.
In any unit of measurement, and shadow blur radius... The higher the value, the wider the shadow becomes and the more it smoothes. If this parameter is not set, the blur value is assumed to be zero. Since the anti-aliasing algorithm is usually different for different browsers, the appearance of the shadow may differ slightly depending on the browser.
Module Css text describes the CSS functions that control the translation of source text into formatted text and line wrapping. Various CSS properties provide control over case conversion, handling of spaces, hyphenation and wrapping rules for text and lines, alignment, spacing, and indentation.
The basic unit of text is a symbol. However, since writing systems are not always as simple as the mainstream English alphabet, what a symbol actually is depends on the context in which the term is used. For example, in the Korean writing system, each square representation of a syllable (for example, 한 \u003d han) can be considered a symbol. However, a square symbol does indeed consist of several letters, each representing a phoneme (for example, ㅎ \u003d h, ㅏ \u003d a, ㄴ \u003d n), and each of them can also be considered a symbol.
1. Transforming text: the text-transform property
The text-transform property will style the text. It does not affect the underlying content, and it should not affect the content of a plain text copy and paste operation.
The property is inherited.
Syntax
Text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit; text-transform: initial;
2. Handling spaces and line breaks: the white-space property
The white-space property handles spaces between words and line breaks within an element.
The property is inherited.
| white-space | |
|---|---|
| Values: | |
| normal | Default value. Only one space is inserted between words, additional spaces are discarded. The text is wrapped only if necessary. |
| nowrap | Prevents line breaks except when applied . |
| pre | Spaces in the text are not ignored, the browser displays extra spaces and line breaks. |
| pre-wrap | Preserves spaces in the text by making line breaks where necessary. |
| pre-line | Removes extra spaces except in cases . |
| break-spaces | The behavior is identical to pre-wrap, except that: any sequence of non-removable whitespace always takes up space, including at the end of a line; line break exists after each non-removable space, including between spaces. |
| initial | |
| inherit | |
Syntax
White-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; white-space: inherit; white-space: initial;
3. Setting tabs: the tab-size property
The tab-size property is used to change the amount of indentation obtained with the Tab key. Property values \u200b\u200bare ignored when one of the three pre-line, normal, or nowrap values \u200b\u200bof the white-space property is set.
Only works for elements