16 Text

The properties defined in the following sections affect the visual presentation of characters, spaces, words, and paragraphs.

16.1 Indentation: the ‘text-indent’ property

Note: Since the ‘text-indent’ property inherits, when specified on a block element, it will affect descendant inline-block elements. For this reason, it is often wise to specify ‘ text-indent: 0 ‘ on elements that are specified ‘ display:inline-block ‘.

16.2 Alignment: the ‘text-align’ property

Example(s): In this example, note that since ‘text-align’ is inherited, all block-level elements inside DIV elements with a class name of ‘important’ will have their inline content centered.

Note. The actual justification algorithm used depends on the user-agent and the language/script of the text.

Conforming user agents may interpret the value ‘justify’ as ‘left’ or ‘right’, depending on whether the element’s default writing direction is left-to-right or right-to-left, respectively.

16.3 Decoration

16.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property

Note. If an element E has both ‘visibility: hidden’ and ‘text-decoration: underline’, the underline is invisible (although any decoration of E’s parent is visible.) However, CSS 2.2 does not specify if the underline is visible or invisible in E’s children:

The ‘text-decoration’ property on descendant elements cannot have any effect on the decoration of the ancestor. In determining the position of and thickness of text decoration lines, user agents may consider the font sizes of and dominant baselines of descendants, but must use the same baseline and thickness on each line. Relatively positioning a descendant moves all text decorations affecting it along with the descendant’s text; it does not affect calculation of the decoration’s initial position on that line. Values have the following meanings: none Produces no text decoration. underline Each line of text is underlined. overline Each line of text has a line above it. line-through Each line of text has a line through the middle. blink Text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG. The color(s) required for the text decoration must be derived from the ‘color’ property value of the element on which ‘text-decoration’ is set. The color of decorations must remain the same even if descendant elements have different ‘color’ values. Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to preserving a constant thickness and line position as described above. This was arguably allowed by the looser wording in CSS2. SVG1, CSS1-only, and CSS2-only user agents may implement the older model and still claim conformance to this part of CSS 2.2. (This does not apply to UAs developed after this specification was released.)

Example(s): In the following example for HTML, the text content of all A elements acting as hyperlinks (whether visited or not) will be underlined:

  
 
 Help, help! I am under a hat! —GwieF  
 
 

. the underlining for the blockquote element is propagated to an anonymous inline element that surrounds the span element, causing the text «Help, help!» to be blue, with the blue underlining from the anonymous inline underneath it, the color being taken from the blockquote element. The text in the em block is also underlined, as it is in an in-flow block to which the underline is propagated. The final line of text is fuchsia, but the underline underneath it is still the blue underline from the anonymous inline element. This diagram shows the boxes involved in the example above. The rounded aqua line represents the anonymous inline element wrapping the inline contents of the paragraph element, the rounded blue line represents the span element, and the orange lines represent the blocks.

16.4 Letter and word spacing: the ‘letter-spacing’ and ‘word-spacing’ properties

Example(s): In this example, the space between characters in BLOCKQUOTE elements is increased by ‘0.1em’.

Example(s): In this example, the word-spacing between each word in H1 elements is increased by ‘1em’.

16.5 Capitalization: the ‘text-transform’ property

16.6 White space: the ‘white-space’ property

Example(s): The following examples show what white space behavior is expected from the PRE and P elements and the «nowrap» attribute in HTML.

In addition, the effect of an HTML PRE element with the non-standard «wrap» attribute is demonstrated by the following example:

16.6.1 The ‘white-space’ processing model

1. Each tab (U+0009), carriage return (U+000D), or space (U+0020) character surrounding a linefeed (U+000A) character is removed if ‘white-space’ is set to ‘normal’, ‘nowrap’, or ‘pre-line’.
2. If ‘white-space’ is set to ‘pre’ or ‘pre-wrap’, any sequence of spaces (U+0020) unbroken by an element boundary is treated as a sequence of non-breaking spaces. However, for ‘pre-wrap’, a line breaking opportunity exists at the end of the sequence.
3. If ‘white-space’ is set to ‘normal’ or ‘nowrap’, linefeed characters are transformed for rendering purpose into one of the following characters: a space character, a zero width space character (U+200B), or no character (i.e., not rendered), according to UA-specific algorithms based on the content script.
4. If ‘white-space’ is set to ‘normal’, ‘nowrap’, or ‘pre-line’,
   1. every tab (U+0009) is converted to a space (U+0020)
   2. any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has ‘white-space’ set to ‘normal’, ‘nowrap’ or ‘pre-line’ — is removed.

   Then, the block container’s inlines are laid out. Inlines are laid out, taking bidi reordering into account, and wrapping as specified by the ‘white-space’ property. When wrapping, line breaking opportunities are determined based on the text prior to the white space collapsing steps above.

   1. If a space (U+0020) at the beginning of a line has ‘white-space’ set to ‘normal’, ‘nowrap’, or ‘pre-line’, it is removed.
   2. All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block’s font from the block’s starting content edge.
   3. If a space (U+0020) at the end of a line has ‘white-space’ set to ‘normal’, ‘nowrap’, or ‘pre-line’, it is also removed.
   4. If spaces (U+0020) or tabs (U+0009) at the end of a line have ‘white-space’ set to ‘pre-wrap’, UAs may visually collapse them.

   16.6.2 Example of bidirectionality with white space collapsing

   Given the following markup fragment, taking special note of spaces (with varied backgrounds and borders for emphasis and identification):

   • The space before the B ( ) would collapse with the space after the A ( ).
   • The space before the C ( ) would collapse with the space after the B ( ).

   This would leave two spaces, one after the A in the left-to-right embedding level, and one after the B in the right-to-left embedding level. This is then rendered according to the Unicode bidirectional algorithm, with the end result being:

   Note that there are two spaces between A and B, and none between B and C. This can sometimes be avoided by using the natural bidirectionality of characters instead of explicit embedding levels. Also, it is good to avoid spaces immediately inside start and end tags, as these tend to do weird things when dealing with white space collapsing.

   16.6.3 Control and combining characters’ details

   Control characters other than U+0009 (tab), U+000A (line feed), U+0020 (space), and U+202x (bidi formatting characters) are treated as characters to render in the same way as any normal character.

   Combining characters should be treated as part of the character with which they are supposed to combine. For example, :first-letter styles the entire glyph if you have content like » ö «; it does not just match the base character.

   Источник

   HTML Styles — CSS

   CSS saves a lot of work. It can control the layout of multiple web pages all at once.

   CSS = Styles and Colors

   What is CSS?

   Cascading Style Sheets (CSS) is used to format the layout of a webpage.

   With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

   Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to «blue», all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

   Using CSS

   CSS can be added to HTML documents in 3 ways:

   • Inline — by using the style attribute inside HTML elements
   • Internal — by using a element in the section
   • External — by using a element to link to an external CSS file

   The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

   Inline CSS

   An inline CSS is used to apply a unique style to a single HTML element.

   An inline CSS uses the style attribute of an HTML element.

   The following example sets the text color of the element to blue, and the text color of the

   element to red:

   Example

   A Blue Heading

   Internal CSS

   An internal CSS is used to define a style for a single HTML page.

   An internal CSS is defined in the section of an HTML page, within a element.

   The following example sets the text color of ALL the elements (on that page) to blue, and the text color of ALL the

   elements to red. In addition, the page will be displayed with a «powderblue» background color:

   Example

   This is a heading

   This is a paragraph.

   External CSS

   An external style sheet is used to define the style for many HTML pages.

   To use an external style sheet, add a link to it in the section of each HTML page:

   Example

   This is a heading

   This is a paragraph.

   The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

   Here is what the «styles.css» file looks like:

   «styles.css»:

   Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

   CSS Colors, Fonts and Sizes

   Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

   The CSS color property defines the text color to be used.

   The CSS font-family property defines the font to be used.

   The CSS font-size property defines the text size to be used.

   Example

   Use of CSS color, font-family and font-size properties:

   This is a heading

   This is a paragraph.

   CSS Border

   The CSS border property defines a border around an HTML element.

   Tip: You can define a border for nearly all HTML elements.

   Example

   Use of CSS border property:

   CSS Padding

   The CSS padding property defines a padding (space) between the text and the border.

   Example

   Use of CSS border and padding properties:

   CSS Margin

   The CSS margin property defines a margin (space) outside the border.

   Example

   Use of CSS border and margin properties:

   Link to External CSS

   External style sheets can be referenced with a full URL or with a path relative to the current web page.

   Example

   This example uses a full URL to link to a style sheet:

   Example

   This example links to a style sheet located in the html folder on the current web site:

   Example

   This example links to a style sheet located in the same folder as the current page:

   You can read more about file paths in the chapter HTML File Paths.

   Chapter Summary

   • Use the HTML style attribute for inline styling
   • Use the HTML element to define internal CSS
   • Use the HTML element to refer to an external CSS file
   • Use the HTML element to store and elements
   • Use the CSS color property for text colors
   • Use the CSS font-family property for text fonts
   • Use the CSS font-size property for text sizes
   • Use the CSS border property for borders
   • Use the CSS padding property for space inside the border
   • Use the CSS margin property for space outside the border

   Tip: You can learn much more about CSS in our CSS Tutorial.

   HTML Exercises

   HTML Style Tags

   Tag	Description
   	Defines style information for an HTML document
   	Defines a link between a document and an external resource

   For a complete list of all available HTML tags, visit our HTML Tag Reference.

   Источник