For each inline element, these steps are going to be performed regardless to the bidi characters:

  1. Each tab, carriage return or space characters surrounding a linefeed character will be removed if white-space property is set to normal, nowrap or pre-line.
  2. If the white-space property is set to pre or pre-wrap any un-broken sequence of spaces within an element will be treated as a sequence of non-breaking spaces. For pre-wrap value only a line break might occur at the end of the sequence.
  3. If the white-space property is set to normal or nowrap, linefeed characters will be transformed (for rendering purposes) into one of these characters: a space character, a zero-width space character or no character (none existing).
  4. If the white-space property is set to normal, nowrap or pre-line every tab is converted to a space and any space following another space is removed.

After these parameters have been satisfied, the block container's inlines are being laid out. They are being rendered taking bidi in account and wrapping as specified by the white-space property. The process of lines being laid out is followed by these rules:

  1. If a space at the beginning of a line has the white-spaceproperty set to normal, nowrap or pre-line, it will be removed.
  2. All tabs will be rendered as a horizontal shift which lines up the start edge of the next character with the next tab stop. Tab stops occur at points that are multiplies of 8 times the width of a space rendered in the block's font from the block's starting content edge.
  3. If a space at the end of a line has white-space property set to normal, nowrap or pre-line it will be removed.
  4. If spaces or tabs at the end of a line have white-space properties set to pre-wrap, browser may visually collapse them.

White space collapsing

Sometimes during usage of a bidirectional content or while leaving empty spaces immediately inside start and end tags, weird results might appear after rendering the white space. That happens due the situation with the white space collapsing. To avoid such results it is better to use "natural" bidirectionality of characters instead of explicit embedding levels, and, of course, to avoid leaving empty spaces immediately inside start and end tags.

Control and combining characters

Control characters other than tab, linefeed, space and 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 suppose to combine, thus, for instance, :first-letter styles the entire character if you have content like "o<span>&dollar;</span>" and not just the base character.

Following diagram shows explains the effect of bidirectionality to the white space:

White space model and bi-direction

 

›› go to examples ››