W3C

CSS3 module: text

W3C Working Draft 24 October 200226 February 2003

This version:
http://www.w3.org/TR/2002/WD-css3-text-20021024http://www.w3.org/TR/2003/WD-css3-text-20030226
Latest version:
http://www.w3.org/TR/css3-text
Previous version:
http://www.w3.org/TR/2002/WD-css3-text-20020515http://www.w3.org/TR/2002/WD-css3-text-20021024
Editor:
Michel Suignard (Microsoft)
Contributors:
Original CSS2 authors, and
Bert Bos (W3C)
Tantek ÇelikÇelik (Microsoft)
Chris Lilley (W3C)
Martin Sawicki (Microsoft, former editor)
Michel Suignard (Microsoft)
Chris Wilson (Microsoft)
Steve Zilles (Adobe)

Abstract

This document presents a set of text formatting properties for CSS3. Many of these properties already existed in CSS 2CSS2 [CSS2]. Many of the new properties have been added to address basic requirements in international text layout, particularly for East Asian and bidirectional text.

Status of This Document

This document is a working draft of the CSS working group which is part of the Style activity. It contains a proposal for features to be included in CSS level 3.

This is the second last call for comments, beforecomments. All comments in response to the working group will decide ifprevious call have been processed: see the draftdisposition of comments. It is ready forexpected that a Candidate Recommendation.Recommendation will follow shortly. The deadline for comments on this draft is 27 November 2002.5 March 2003.

Feedback is very much welcome. Comments can be sent directly to the editor, but the mailing list www-style@w3.org (see instructions) is also open and is preferred for discussion of this and other drafts in the Style area. The mailing list is archived.

This document has been produced as a combined effort of the W3C Internationalization Activity, and the Style Activity. It also includes extensive contribution made by members of the XSL Working Group (members only). Finally, some of the proposal surfaced first in the Scalable Vector Graphics (SVG) 1.0 Specification [SVG1.0]. The text has been duplicated in this document to reflect which properties and specification should eventually be referenced in CSS itself.

This working draft may be updated, replaced or rendered obsolete by other W3C documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).

Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.

To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.

Contents


1. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

It has non-normative (informative) references to the following other CSS3 modules:

2. Introduction

In both CSS1 and CSS2, text formatting has been limited to simple effects like for example: text decoration, text alignment and characterletter spacing. However, international typography contains types of formatting that could not be achieved without using special workarounds or graphics.

Along with already existing text relatedtext-related properties, this document presents a number of new CSS properties to represent such formatting. For example,The features this proposal covers include two of the most important features for East Asian typography: vertical text and layout grid.

There isare a number of illustrations in this document for which the following legend is used:

Symbolic wide-cell glyph representation
- wide-cell glyph (e.g. Han) which is the n-th characterglyph in the text run,
Symbolic narrow-cell glyph representation
- narrow-cell glyph (e.g. Roman)Latin) which is the n-th glyph in the text run,
Symbolic connected glyph representation
- connected glyph (e.g. Arabic) which is the n-th glyph in the text run.

Many typographical properties in East Asian typography depends on the fact that a character is typically rendered as either a wide or narrow character.glyph. All characters described by the Unicode Standard [UNICODE] can be categorized by a width property. This is covered by the Unicode Standard Annex [UAX-11].

The orientation which the above symbols assume in the diagrams corresponds to the orientation that the glyphs they represent are intended to assume when rendered in the UA (user agent). Spacing between these charactersglyphs in the diagrams is usually symbolic, unless intentionally changed to make a point.

Furthermore, all properties, in addition to the noted values, take 'initial' and 'inherit'. These values are not repeated in each of theproperty value enumeration.enumerations.

This module uses extensively the 'before', 'after', 'start' and 'end' notation to specify the four edges of a box relative to its text advance direction, independently of its absolute positioning in terms of 'top', 'bottom', 'left' and 'right' (corresponding respectively to the 'before', 'after', 'start' and 'end' positions in a typical Western text layout). This notation is also used extensively in [XSL1.0] for the same purpose.

The term 'Latin' is used frequently in this document to designate behavior shared among popular writing scripts in Europe and America based on the Latin, Greek and Cyrillic scripts.

Finally, in this document, requirements are expressed using the key words "MUST", "MUST NOT", "REQUIRED", "SHALL" and "SHALL NOT". Recommendations are expressed using the key words "SHOULD", "SHOULD NOT" and "RECOMMENDED". "MAY" and "OPTIONAL" are used to indicate optional features or behavior. These keywords are used in accordance with [RFC2119]. For legibility these keywords are used in lowercase form.


3. Text layout

3.1. Text layout introduction

This section describes the text layout features supported by CSS, which includes support for various international writing directions, such as left-to-right (e.g., RomanLatin scripts), right-to-left (e.g., Hebrew or Arabic), bidirectional (e.g., mixing RomanLatin with Arabic) and vertical (e.g., Asian scripts).

The 'writing-mode' property determines an inline progressioninline-progression and a block (line to line) progression. For example, RomanLatin scripts are typically written left to right and top to bottom. The 'direction' property, already defined in CSS2, is a subset of the 'writing-mode' property as it only determines an inline-progression. The 'direction' property may still be used when no block-progression change is desired.

The glyph orientation determines the orientation of the rendered visual shape of characters relative to the inline progression.inline-progression.

Within a line, the adjustment to the current text position is based on the current glyph orientation relative to the inline progression,inline-progression, the metrics of the glyph just rendered, kerning tables in the fontfont, and the current values of various attributes and properties, such as the spacing properties.

Bi-directionalityBidirectionality introduces another level of complexity in text layout, as in many combinations of 'writing-mode' and glyph orientation valuesvalues, the proper directionality and ordering of text will beare determined by anthe Unicode Standard ([UNICODE] bidirectional algorithm. CSS relies on that algorithm to achieve proper bidirectional text rendering and possible reordering. Furthermore, using the 'unicode-bidi' property, the user agent can influence the bidirectional algorithm by allowing new embedding levels and direction overrides.

Note: The Unicode Standard ([UNICODE], section 3.12) defines such ana bidirectional algorithm consisting of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. It is also possible to overridedetermining the inherentdirectionality offor bidirectional text. The content characters by using of combinationdisplay ordering of the 'writing-mode' and 'unicode-bidi' properties. CSS3 relies on this algorithm to achieve proper textbidirectional rendering. However reordering of characters only occurs for specific values of the glyph orientation properties. See their description for the exact conditions. CSS2 specifiedtext depends upon the 'direction' property which is a subsetdirectional properties of the 'writing-mode' property as it only determines an inline progression. The 'direction' property may still be used when no block progression change is desired.characters in the text.

 The HTML 4.01 specification ([HTML401], section 8.2) defines bi-directionalitybidirectionality behavior for HTML elements. Conforming HTML user agents may therefore ignore the 'direction' and 'unicode-bidi' properties in author and user style sheets. The style sheet rules that would achieve the bidibidirectionality behavior specified in HTML 4.01 are given in the sample style sheet. The HTML 4.01 specification also contains more information on bidirectionality issues.

Note thatNote: HTML 4.01 does not cover the more general case described by the 'writing-mode' property.

3.2. Setting the inlineinline-progression and block progressions:block-progression: the 'writing-mode' and 'direction' properties

The 'writing-mode' property specifies whether the inline progressioninline-progression shall be left-to-right, right-to-left, or top-to-bottom. (Note thatThis property also changes the 'direction' property for the element. For more on bidirectional text, see the section about Embedding and override.

Note: Even when the inline progressioninline-progression is left-to-right or right-to-left, some or all of the content within a given element might advance in the opposite direction because of the Unicode [UNICODE] bidirectional algorithm or because of explicit text advance overrides due to this property or 'direction' and 'unicode-bidi'.

This property also changes the 'direction' property for the element. For more on bidirectional text, see the section about Embedding and override .Name: writing-mode
Value: lr-tb | rl-tb | tb-rl | tb-lr | bt-rl | bt-lr | lr | rl | tb
Initial: lr-tb
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)
lr-tb | lr
Sets the inline progressioninline-progression to left-to-right, and the block progressionblock-progression to top-to-bottomtop-to-bottom, as is common in most Roman-basedthe Latin-based documents. For most characters, the current text position is advanced from left to right after each glyph is rendered. The 'direction' property is set to 'ltr'.
rl-tb | rl
Sets the inline progressioninline-progression to right-to-left, and the block progressionblock-progression to top-to-bottomtop-to-bottom, as is common in Arabic or Hebrew scripts. The direction'direction' property is set to 'rtl'.
tb-rl | tb
Sets the inline progressioninline-progression to top-to-bottom, and the block progressionblock-progression to right-to-leftright-to-left, as is common in some East Asian scripts. The baseline alignment may be different in this context. Typically, the dominant baseline runs through the center of the upright glyphs. The direction'direction' property is set to 'ltr'.
tb-lr
Sets the inline progressioninline-progression to top-to-bottom, and the block progressionblock-progression to left-to-rightleft-to-right, as is common in the Mongolian script. This type of vertical layout also occurs in Latin basedLatin-based documents, particularly in table column or row labels. The baseline alignment may be different in this context. Typically, the dominant baseline runs through the center of the upright glyphs. The direction'direction' property is set to 'ltr'.'rtl'.
bt-rl
Sets the inline progressioninline-progression to bottom-to-top, and the block progressionblock-progression to right-to-left. This value onlyexists only to cover the case of the direction'direction' property value 'rtl' applied to an element where the current writing-mode property value is 'tb-rl' or 'tb'. The direction'direction' property is set to 'rtl'.
bt-lr
Sets the inline progressioninline-progression to bottom-to-top, and the block progressionblock-progression to left-to-right. This value onlyexists only to cover the case of the direction'direction' property value 'rtl' applied to an element where the current writing-mode property value is 'tb-lr'. The direction'direction' property is set to 'rtl'.'ltr.

The combination of inline progressioninline-progression and block progressionblock-progression set by the writing-mode'writing-mode' property is also referred as a flow orientation. In such contexts, the values: lr-tb, lr, rl-tb and rlvalues 'lr-tb', 'lr', 'rl-tb', 'rl' correspond to horizontal flow orientations, and the others (tb-rl, tb, tb-lr, bt-rl, bt-lr)'tb-rl', 'tb', 'tb-lr', 'bt-rl', 'bt-lr' correspond to vertical flow orientations.

For horizontal flow orientations, the top and bottom margins can be collapsed. For vertical flow orientations, the left and right margin can be collapsed. See Collapsing margins"Collapsing margins" in the CSS3 Box module [forthcoming] for the details of collapsing margins.

This property also specifies the direction of table column layout, the direction of the overflow when determined by the inline progressioninline-progression (such as the 'start' and 'end' value of the 'text-align' property), the initial alignment of text and the position of an incomplete last line in a block in case of 'text-align: justify'.

For the 'writing-mode' property to have any effect on inline-level elements, one or both of the following conditions must be met:

An inline-level element that has a different writing-mode valueblock-progression than its parent becomes an inline-block'inline-block' element.

In the following example, two blocks elements (1 and 3) separated by an image (2) are presented in various text layout. The image shown in the vertical flows is not turned, but instead illustrates what would be the desired geometry of the image in such flows.

Here is a diagram of a horizontal flow (writing-mode: lr-tb):("writing-mode: lr-tb"):

Figure showing how a block with

Here is a diagram for a vertical flow used in East Asia (writing-mode: tb-rl) :("writing-mode: tb-rl"):

Figure showing how a block with

And finally, here is a diagram for another flow used for UyghurUighur and Mongolian (writing-mode: tb-lr):("writing-mode: tb-lr"):

Figure showing how a block with

In East Asian documents, it is often preferred to display certain Latin-based strings, such as numerals in a year, always in a horizontal layout flow regardless of the flow mode of the line of text these strings appear in, as in:

Layout of Tate Naka Yoko, showing a group of glyphs appearing
horizontally in a vertical column of text Example of Tate Naka Yoko, showing the
year 1996 appearing horizontally in a column of vertical text

Horizontal in vertical (a.k.a "("Tate-chu-yoko")

In Japanese, this effect is known as "Tate chu yoko". In order to achieve it in an XHTML context, the Latin string should be enclosed within a span element with an horizontal flow orientation, as in:

 .hinv.date {writing-mode:  lr-tb; display: inline-block;}lr-tb;}
<span  class="hinv">1996</span>class="date">1996</span>

This is an application of changing the flow of an inline element as described earlier. Line breaking is normally disabled for such runs of text. This can be accomplished using the CSS'white-space: nowrap' property setting.

Name: direction
Value: ltr | rtl
Initial: ltr
Applies to: all elements and generated content, but see prose
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

Values for this property have the following meanings:

ltr
Left-to-right direction.
rtl
Right-to-left direction.

This property specifies the inline progressioninline-progression and the direction of embeddings and overrides (see 'unicode-bidi') for the Unicode bidirectional algorithm. The block progressionblock-progression is not affected by this property. The values 'ltr' and 'rtl' have to be interpreted 'relatively'relative to the line direction. In addition, it specifies the direction of table column layout, the direction of the overflow when determined by the inline progressioninline-progression (such as the 'start' and 'end' valuevalues of the 'text-align' property), the initial alignment of text and the position of an incomplete last line in a block in case of 'text-align: justify'.

For the 'direction''writing-mode' property to have any effect on inline-level elements, the 'unicode-bidi' property's value must be 'embed' or 'bidi-override' and the glyph orientation'bidi-override' and, in addition, one of the characters within the elementfollowing conditions must be 'auto' or 90/-90 degree inmet:

Note: The 'writing-mode' and 'direction' properties, when specified for table column elements, are not inherited by cells in the column since columns don't exist incolumn elements are never the document tree.ancestors of their constituent cell elements. Thus, CSS cannot easily capture the "dir" attribute inheritance rules described in [[HTML4.01], section 11.3.2.

Note.Note: The 'writing-mode' and 'direction' properties interact with each other. As such, 'writing-mode' resets the 'direction' value. Similarly, if modifying 'direction' after 'writing-mode' changes effectivelyintroduces a change of inline-progression, the 'writing-mode' value will be updated to reflect the opposite inline progression.new inline-progression. For example, 'direction:rtl''direction: rtl' applied to an element with 'writing-mode:lr-tb''writing-mode: lr-tb' effectively makes 'writing-mode:rl-tb''writing-mode: rl-tb'. This is one of the main reason why the mixed usage of these two properties is discouraged or at least they should be used with great caution. To illustrate the case, in the following example, the computed value of 'writing-mode' is 'rl-tb':

  e { writing-mode: lr-tb; direction: rtl;}

3.3. Glyph orientation within a text run: the 'glyph-orientation-vertical' and 'glyph-orientation-horizontal' properties

In some cases, it is required to alter the orientation of a sequence of characters relative to the inline progression.inline-progression. The requirement is particularly applicable to vertical layouts of East Asian documents, where sometimes half-width RomanLatin text is to be displayed horizontally and other times vertically.

Two properties control the glyph orientation relative to the inline progression.inline-progression. 'glyph-orientation-vertical' controls glyph orientation when the inline progressioninline-progression is vertical. 'glyph-orientation-horizontal' controls glyph orientation when the inline progressioninline-progression is horizontal. It is necessary to distinguish between vertical and horizontal for the following reasons:

Name: glyph-orientation-vertical
Value: <angle> | auto
Initial: auto
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)
<angle>
The user agent may round the value of the angle to the values of glyph rotation supported by the user agent. This does not affect the computed value. Conforming user agents may onlymust at least support either the value 90deg or all of the following values: 0deg, 90deg, 180deg and 270deg,270deg. User agents may support other values can also be supported..values.
A value of "0deg" indicates that all glyphs are oriented with the bottom of the glyphs toward the inline progression,inline-progression, resulting in glyphs which are stacked vertically on top of each other. A value of "90deg" indicates a rotation of 90 degrees clockwise from the "0deg" orientation. For characters which have this property set to 90 or 270 degree, reordering is first applied according to the Unicode Bidi algorithm and then the resulting glyphs are rotated according to the <angle> value. The rotation specified by this value is applied to the glyph representations of all assigned Unicode character codes.
auto
The glyph orientation relative to the inline progressioninline-progression is determined automatically based on the Unicode character code of the rendered character.

Full-width ideographic and full-width RomanLatin glyphs (excluding some ideographic punctuation)punctuation and bracket symbol) are oriented as if an <angle> of "0deg" had been specified for top to bottom inline progressioninline-progression and "180deg" for bottom to top inline progressioninline-progression (resulting in glyphs which are stacked vertically on top of each other).

Ideographic punctuation and other ideographic characters having alternate horizontal and vertical glyph shapes shall use the vertical shape of the glyph.

Text which is not full-width will be set as if an <angle> of "90deg" had been specified; thus, half-width RomanLatin text will be rotated 90 degree clockwise versus full-width ideographic and full-width RomanLatin text.

Hebrew and Arabic text are also rotated 90 degree clockwise. The visual order of this text is determined by the bidirectional algorithm applied prior to the rotation.

Note.Note: A value of auto will generally produce the expected results in common uses of mixing Japanese with European characters; however, the exact algorithms are based on complex interactions between many factors, including font design, and thus different algorithms might be employed in different processing environments. For precise control, specify explicit <angle> values.

This property specifies the orientation of glyphs relative to the inlineinline-progression and block progressionsblock-progression determined by the 'writing-mode' property. This property is applied only to text written in a vertical writing-mode. Conforming user agents may do the following in increasing levels of supports:

  1. support only the 90deg value,
  2. support only the 'auto' and 90deg value,
  3. support the 'auto', 0deg, 90deg, 180deg and 270deg values,
  4. support all values above and any number of additional values.

The value of this propertyglyph orientation affects boththe alignment and height of the glyph area generated foramount that the affected glyphs. If acurrent text position advances as each glyph is oriented so that the normal orientation ofrendered. It also affects how the glyph is parallelaligned relative to the dominant-baseline, thenbaseline. When the inline-progression is vertical alignment-point ofand the rotated'glyph-orientation-vertical' value results in a glyph orientation angle which is aligned witha multiple of 180deg, then the alignment-baseline appropriatecurrent text position is incremented according to that glyph.the baseline to whichvertical metrics of the glyph, and the rotatedglyph is aligned isusing the vertical baseline identifiedalignment-point as determined by 'alignment-adjust' [link to the "alignment-baseline" for the scriptCSS3 line module] and 'alignment-baseline' [link to whichthe glyph belongs.CSS3 line module]. Otherwise, the heighttext position is incremented according to the horizontal metrics of the glyph area is determined from the height font characteristic forand the glyph.glyph is aligned using the horizontal alignment points, baselines and heights (computedalignment-point as glyph advance width) are used ifdetermined by 'alignment-adjust' and 'alignment-baseline'.

Note: The normal orientationconcepts of alignment-point and alignment-baseline are described in the glyph is perpendicular to the dominant-baseline.CSS3 line module.

The diagrams below illustrate different uses of 'glyph-orientation-vertical'. The diagram on the left shows the result of the mixing of full-width ideographic characters with half-width Romannormal-width Latin characters when 'glyph-orientation-vertical' for the Romanspan containing the Latin characters is either auto or "90deg". The diagram on the right show the result of mixing full-width ideographic characters with half-width Romannormal-width Latin characters when Romanthe span containing the Latin characters areis specified to have a 'glyph-orientation-vertical' of "0deg".

Note: The effect on the right can be also be achieved by using full-width Latin characters and using 'glyph-orientation-vertical: auto' for the span containing the ideographic characters and the full-width Latin characters.

Layout of mixed glyphs in vertical-ideographic mode.
Wide-cell glyphs are upright, Non-wide-cell glyphs are rotated by 90
degrees. Example of mixed Japanese and English in vertical-ideographic layout.
Japanese glyphs are upright, English rotated. Layout of mixed glyphs in
vertical mode. All glyphs are upright. Example of mixed Japanese and English in
vertical layout. All glyphs are upright.

The bidi algorithm and the 'glyph-orientation-vertical' property have the following interaction:

  1. The bidi algorithm is applied separately to each contiguous text range having the same glyph-orientation-vertical value. In other words a change in the property value resets the bidi algorithm.
  2. When the glyph-orientation-vertical value is 270 degree, all mirroring symbols after all due bidi processing are mirrored before being rotated 270 degree clockwise. This is done to achieve the desired rendering result, which is to have the mirroring characters pointing 'inward' the text they are enclosing.
Name: glyph-orientation-horizontal
Value: <angle>
Initial: 0deg
Applies to: all inline-levelelements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: <angle>
<angle>
The user agent may round the value of the angle to the values of glyph rotation supported by the user agent. This does not affect the computed value. Conforming user agents must at least support either the 0 deg value or all of the following values: 0deg, 90deg, 180deg and 270deg. User agents may support other values.
A value of "0deg" indicates that all glyphs are oriented with the righttop edge of the glyphs toward the inline progression,before edge of the line box, resulting in glyphs which are positioned side by side. A value of "90deg" indicates an orientation of 90 degrees clockwise from the "0" orientation. For characters which have this property set to 0 or 180 degree, reordering is first applied according to the Unicode Bidi algorithm and then the resulting glyphs are rotated clockwise according to the <angle> value.

This property specifies the orientation of glyphs relative to the inline progressioninline-progression determined by the 'writing-mode' property. This property is applied only to text written in a horizontal writing-mode.

Conforming user agents may doThe following in increasing levels of supports: support onlyglyph orientation affects the 0deg value, support the 0deg, 90deg, 180deg and 270deg values, support all values above and any number of additional values. The value of this property affects both the alignment and width of the glyph area generated foramount that the affected glyphs. If acurrent text position advances as each glyph is oriented so that the normal orientation ofrendered. It also affects how the glyph is parallelaligned relative to the dominant-baseline, thenbaseline. When the vertical alignment-point ofinline-progression is horizontal and the rotated'glyph-orientation-horizontal' value results in a glyph orientation angle which is aligned witha multiple of 180deg, then the alignment-baseline appropriatecurrent text position is incremented according to that glyph.the baseline to whichhorizontal metrics of the glyph, and the rotatedglyph is aligned isusing the horizontal baseline identifiedalignment-point as determined by 'alignment-adjust' [link to the "alignment-baseline" for the scriptCSS3 line module] and 'alignment-baseline' [link to whichthe glyph belongs.CSS3 line module]. Otherwise, the widthtext position is incremented according to the vertical metrics of the glyph areaand the glyph is determined fromaligned using the vertical width font characteristic for the glyph. The horizontal alignment points, baselinesalignment-point as determined by 'alignment-adjust' and widths are used if'alignment-baseline'.

Note: The normal orientationconcepts of alignment-point and alignment-baseline are described in the glyph is perpendicular to the dominant-baseline.CSS3 line module.

3.4. Embedding and override: the 'unicode-bidi' property

Name: unicode-bidi
Value: normal | embed | bidi-override
Initial: normal
Applies to: all elements and generated content, but see prose
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified (except for initial and inherit)

This property allows further control of the Unicode bidirectional algorithm by allowing new embedding levels or direction overrides. Values for this property have the following meanings:

normal
The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-level elements, implicit reordering works across element boundaries.
embed
If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the 'direction' property. Inside the element, reordering is done implicitly. This corresponds to adding a LRE (U+202A; for 'direction: ltr') or RLE (U+202B; for 'direction: rtl') at the start of the element and a PDF (U+202C) at the end of the element.
bidi-override
If the element is inline-level or a block-level element that contains only continuous stretches of inline elements, this creates an override. This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit part of the bidirectional algorithm is ignored. This corresponds to adding a LRO (U+202D; for 'direction: ltr') or RLO (U+202E; for 'direction: rtl') at the start of the element and a PDF (U+202C) at the end of the element.

The final order of characters in each block-level element is the same as if the bidi control codes had been added as described above, mark-up had been stripped, non-textual entities such as images treated as neutral characters, and the resulting character sequence had been passed to an implementation of the Unicode bidirectional algorithm for plain text that produced the same line-breaks as the styled text.

In this process,Note: For non-textual entities such as images are treated as neutral characters, unlessimages, when their 'unicode-bidi' property has a value other than 'normal', in which case they are treated as strong characters inand the 'direction' specified forhas the element. Note.value 'rtl', the resulting directionality is equivalent to character type R (according to the types defined by the Unicode Bidirectional algorithm).

Note: In order to be able to flow inline boxes in a uniform direction (either entirely left-to-right or entirely right-to-left), more inline boxes (including anonymous inline boxes) may have to be created, and some inline boxes may have to be split up and reordered before flowing.

Because the Unicode algorithm has a limit of 61 levels of embedding, care should be taken not to use 'unicode-bidi' with a value other than 'normal' unless appropriate. In particular, a value of 'inherit' should be used with extreme caution. However, for elements that are, in general, intended to be displayed as blocks, a setting of 'unicode-bidi: embed' is preferred to keep the element together in case display is changed to inline (see example below).

The following example shows an XML document with bidirectional text. It illustrates an important design principle: DTD designers should take bidi into account both in the language proper (elements and attributes) and in any accompanying style sheets. The style sheets should be designed so that bidi rules are separate from other style rules. The bidi rules should not be overridden by other style sheets so that the document language's or DTD's bidi behavior is preserved.

Example(s):

In this example, lowercase letters in element contents stand for inherently left-to-right characters and uppercase letters represent inherently right-to-left characters:

 <hebrew><div xml:lang="he">
  <par>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</par>
  <par>HEBREW6 <emph>HEBREW7</emph> HEBREW8</par>
 </hebrew> <english></div>
<div xml:lang="en">
  <par>english9 english10 english11 HEBREW12 HEBREW13</par>
  <par>english14 english15 english16</par>
  <par>english17  <he-quo>HEBREW18<quo xml:lang=he">HEBREW18 english19  HEBREW20</he-quo></par> </english>HEBREW20</quo></par>
</div>

Since this is XML, the style sheet is responsible for setting the writing direction. This is the style sheet:

/* Rules for bidi */
 hebrew, he-quodiv:lang(he)   {direction: rtl}
quo:lang(he)   {direction: rtl; unicode-bidi:  embed}
 englishpar:lang(en)   {direction:  ltr; unicode-bidi: embed}ltr}

/* Rules for presentation */
 hebrew, english,div, par  {display: block}
emph      {font-weight: bold}

The hebrewdiv element with xml:lang="he" is a block with a right-to-left base direction, the englishdiv element with xml:lang="en" is a block with a left-to-right base direction. The par elements are blocks that inherit the base direction from their parents. Thus, the first two par elements are read starting at the top right, the final three are read starting at the top left.

Please note that hebrew and english are chosen as element names for explicitness only; in general, element names should convey structure without reference to language. The emphThe emph element is inline-level, and since its value for 'unicode-bidi' is 'normal' (the initial value), it has no effect on the ordering of the text. The he-quoquo element, on the other hand, creates an embedding.

The formatting of this text might look like this if the line length is long:

               5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                                8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

Note that the he-quoquo embedding causes HEBREW18 to be to the right of english19.

If lines have to be broken, it might be more like this:

       2WERBEH 1WERBEH
  -EH 4WERBEH english3
                 5WERB

   -EH 7WERBEH 6WERBEH
                 8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

Because HEBREW18 must be read before english19, it is on the line above english19. Just breaking the long line from the earlier formatting would not have worked. Note also that the first syllable from english19 might have fit on the previous line, but hyphenation of left-to-right words in a right-to-left context, and vice versa, is usually suppressed to avoid having to display a hyphen in the middle of a line.

3.5. Script character classification: the 'text-script' property

In text layout, many of the behaviors are related to a character classification based on scripts.

For example, line breaking or text justification behaviors depend on the 'dominant'some operations, such as baseline alignment, there is a requirement for a dominant script of the textual content ofwhich is used to determine an element. Furthermore, baselinealignment may be processed based onstrategy for the same dominant script. Thatwhole element. A dominant script can be heuristically determinedis established by findingsetting the first character (after reordering) that has'text-script' property to an unambiguousexplicit script identifier in an element. It can also be explicitly specifiedconformance with the Unicode Technical Report [UTR-24]: "Script names", or by using the heuristic determination computed by the user agent when the 'text-script' property.value is set to 'auto'.

In many other cases, such as white-space handling or text justification, the script property is used on a character by character basis. In those cases, the 'text-script' property can be used to set an homogeneous value for all characters of the element through the usage of an explicit script identifier. But, if the 'text-script' is set to 'auto', the user agent will establish a script property value for each character of the element.

Name: text-script
Value: auto | none |<script>
Initial: auto
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: none or <script> (explicit or determined in the case of 'auto')specified value (except for initial and inherit)

Values have the following meanings:

auto
Use the first character descendant, after any reordering due to character direction and bi-directionality ,descendant which has an unambiguous script identifier [UTR-24] to determine the dominant script of the element's content. This determines the computedAn unambiguous script value. Each textual component of the element may however behave in typographical related behaviors as dictated by itsidentifier is any script identifier.value other than 'COMMON' or 'INHERITED'. In the absence of any textual components with a clearan unambiguous script identifier (or no textual content at all), the computed value is 'Latin'. none Indicates thedominant script is unknown or is'LATIN'. For operations that do not significant to the proper formatting of this element. <script>require a script definition indominant scrip, but instead use a script determination on a character by character basis within the element, the user agent will determine a script value for each character based on its inherent script property as established by [UTR-24]. In such cases, the values 'COMMON' or 'INHERITED' are valid.
<script>
A script identifier in conformance with [ISO15924][UTR-24]. If the script identifier is either 'COMMON' or 'INHERITED' the dominant script value is 'LATIN', otherwise the dominant script value is the specified value. For operations not using the dominant script value, all textual componentscharacters of the element mustwill behave in typography related behaviorsas dictated by thisif their script property was the set value, not thetheir inherent script value of these textual components. Note 1 .value.

Note: The Unicode technical report [UTR-24]: Script Names'Script Names' specifies an inherent script allocationsvalue for the wholeeach character repertoire covered byof the Unicode Standard character repertoire [UNICODE]. Note 2 .There is also an ISO draft standard [ISO15924] addressing script identification.

Note: Setting an explicit script property value on an element reclassifies all its textual content to the given script. For example setting the script to a script belonging to the CJK group (Chinese, Japanese, Korean) makes the content behave as a CJK content for line-breaking rules. And setting an Arabic text to Latin would prevent the context to be affected by the Kashida justification effect. Typically, this property should be set to an explicit script value only when the textual content is script ambiguous and a specific behavior is sought.


4. Text alignment and justification

4.1. Text alignment: the 'text-align' property

Name: text-align
Value: start | end | left | right | center | justify | <string>
Initial: start
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property describes how inline content of a block is aligned. Values have the following meanings:

start
The text is aligned on the start of the inline progression.inline-progression.
end
The text is aligned on the end of the inline progression. left ,inline-progression.
left, right
In horizontal inline progression,inline-progression, the text is aligned on the left or right respectively. In vertical inline progression,inline-progression, the alignment is UA dependent. Because these two values are not related to the current inline progression,inline-progression, the values 'start' and 'end' are typically preferred.
center
The text is center aligned.
justify
The text is justified. The justification algorithm can be further refined by using the 'text-justify' property. Although conforming CSS2 user agents could interpret the value 'justify' as 'start',  conforming CSS3 user agents may not, unless a profile specifies otherwise.
<string>
Specifies a string on which cells in a table column will align (see the section on horizontal alignment in a column for details and an example). This value applies only to table cells. If set on other elements, it will be treated asthe computed value is 'start'.

A block of text is a stack of line boxes. In the case of 'start', 'end', 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's start and end sides; alignment is not with respect to the viewport. In the case of 'justify', the UA may stretch the inline boxes in addition to adjusting their positions. (See also 'letter-spacing' and 'word-spacing'.)

Example(s):

In this example, note that since 'text-align' is inherited, all block-level elements inside the div element with 'class=important' will have their inline content centered.

div.important { text-align: center }

Note.Note: The property initial value has changed between CSS2 and CSS3 from being UA dependent in CSS2 to be related to the current text advance direction in CSS3 (through the usage of the 'start' value).

4.2. Justification: the 'text-justify' property

Name: text-justify
Value: auto | inter-word | inter-ideograph | distribute | newspaper | inter-cluster | kashida
Initial: auto
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property selects the type of justify alignment. It affects the text layout only ifalignment for last lines when 'text-align-last' is set to 'justify' and other lines when 'text-align' is set to 'justify'. That way, UA's that do not support this property will still render the text as fully justified, which most of the time is at least partially correct. Typically the text-justify property does not affect the last line, unless the last line itself is justified.Most of the text-justify values affects writing systems in very specific ways. These writing systems (or group of) are:

The text-justification behavior of textual components is guided by theDepending on script classification of the characters.value (controlled by the 'text-script' property allows to modify the behavior of these components. Depending onvalue) and the text-justify'text-justify' property value, spacing may be altered between words or letters. The possibleletters or both.

The possible values for the text-justify property are:

auto
The UA determines the justification algorithm to follow, based on a balance between performance and adequate presentation quality. Inter-word expansion is typically used for all scripts that use space as word delimiter. However,The concept of a word is script dependent, although the user agent determines the exact algorithm. If the kashida-space'text-kashida-space' property has a non zero percent value it is recommended to use kashida elongation for Arabic text.
inter-word
Selects the simplest and fastest full justification behavior, which spreads the text evenly across the line by increasing the width of the space between words only. The concept of a word is script dependent, the exact algorithm is determined byalthough the user agent.agent determines the exact algorithm. At minimum, justification is expected to occur at each white space boundary. No expansion or compression occurs within the words, i.e. no additional letter spacing is created. No kashida effect takes place.

Note: White space does not include zero-width-space, therefore justification is not expected for these characters. However justification is expected for white space with explicit width set by the 'word-spacing' property.

The diagram below illustrates this mode, by showing how the charactersglyphs are laid out in the last two lines of an element:

Diagram showing glyph distribution in inter-word justification

Mixed glyph layout in the last two lines in an inter-word justified element

For example a viewer could render an 'inter-word' justified paragraph in the following way:

Example of inter-word justification applied to mixed Japanese
and English text

Inter-word justification applied to mixed text

newspaper
Selects the justification behavior in which both inter-word and inter-letter spacing can be expanded or reduced to spread the text across the whole line. Also, text distribution on any given line may depend on the layout or the contents of the previous or the following several lines. This is the significantly slower and more sophisticated type of the full justify behavior preferred in newspaper and magazines, as it is especially useful for narrow columns. For example, typically, compression is tried first. If unsuccessful, expansion occurs: inter-word spaces are expanded up to a threshold, and finally inter-letter expansion is performed. ThisInter-letter spacing is not applied to all scripts groups exceptDevanagari and other South Asian writing systems using baseline connectors. The threshold value may be related to the ratio of column width (in number of characters).to font size. The exact layout algorithm is determined by the user agent. Further explanation about multi-column layout can be found in the CSS3 Multi-layoutMulti-column layout module.

The diagram below illustrates this mode:

Diagram showing character distribution in newspaper
justification

Mixed characterglyph layout in the last two lines of a newspaper justified element

Note.Note: In CSS3 a value of 'letter-spacing: 0' no longer strictly inhibits spacing-out of words for justification. The letter-spacing value is just an entry to the letter-spacing process that occurs prior to the possible justification process. Justification may alter the initial spacing between letters, especially with the 'text-justify: newspaper' value.

inter-ideograph
In this mode, letter-spacing modification only occurs for the CJK group. Others only use inter-word expansion. No kashida effect takes place. This is the preferred justification in the context of the Japanese writing system, but not Latin nor Korean.

The diagram below illustrates this mode:

Diagram showing glyph distribution in inter-ideograph
justification

Mixed glyph layout in the last two lines in an inter-ideograph justified element

Below is an example of how this mode would work:

Example of inter-ideograph justification applied to mixed
Japanese and English text

Inter-ideograph justification applied to mixed text

distribute
Like 'newspaper' it allows letter spacing modification for most script groups (except Hindi),the Devanagari group), but unlike newspaper, it does not prioritize between word spacing and letter spacing, i.e. the space character gets the same letter spacing modification as others. And by consequence there are no variations between narrow and wide columns. This value is best used in East Asian context.

The diagram below illustrates this mode:

Diagram showing character distribution in distribute
justification

Mixed characterglyph layout in the last two lines of a distribute justified element

For example a viewer could render a 'distribute' justified paragraph in the following way:

Example of distribute justification applied to mixed Japanese
and English text

Distribute justification applied to mixed text

inter-cluster
PlaysThis is the same role as inter-ideograph but for South EasternSoutheast Asian scripts.counterpart to 'inter-ideograph'. That is letter spacing only occurs forbetween script-defined grapheme clusters belonging to thoseoccurring in Southeast Asian scripts.

Note: A grapheme cluster is defined aswhat a group of characters formatted aslanguage user consider to be a single unit.character or a basic unit of the language. The term is described in detail in the Unicode technical report [UTR-29]: Text Boundaries.

kashida
PlaysThis is the same role as inter-ideograph but forArabic throughcounterpart to 'inter-ideograph'. Letter spacing may be increased between Arabic letters, the extra space being filled by kashida. The amount of kashida elongation is controlled by the 'text-kashida-space' property. If 'text-kashida-space' is set to '0%' (which is the initial value), there will be no kashida effect. That is,No letter spacing occurs for other scripts.

The following table describes the expansion/compression strategy for the combination of each script groups and the text-justify property value for each relevant text-justify property value:

text-justify property value
Script groups auto* inter-word newspaper inter-ideograph distribute inter-cluster kashida
LatinLatin** word-spacing only* word-spacing only prioritization between word-spacing and letter-spacing word-spacing only word-spacing and letter-spacing word-spacing only word-spacing only
CJK no extra spacing* no extra spacing letter-spacing letter-spacing letter-spacing no extra spacing no extra spacing
Devanagari*Devanagari*** word-spacing* word-spacing word-spacing word-spacing word-spacing word-spacing word-spacing
Arabic kashida and word-spacing* word-spacing kashida and word-spacing word-spacing kashida and word-spacing word-spacing kashida and word-spacing
SE Asian clusters inter-cluster spacing* inter-cluster spacing inter-cluster spacing no extra spacing inter-cluster spacing inter-cluster spacing no extra spacing

Interaction between text-justify values and script groups

*The values shown for the auto column are only a recommendation. The UAs might implement a different strategy.

*The**The Latin entry represents as well other scripts and writing systems used in Europe and America that use the same typographic convention for justification such as Greek, Cyrillic, etc.

***The Devanagari entry represents as well other scripts and writing systems used in India that use baseline connectors likesuch as  Bengali and Gurmukhi.

4.3. Last line alignment: the 'text-align-last' property'property

Name: text-align-last
Value: autorelative | start | end | center | justify | size
Initial: autorelative
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property describes how the last line of the inline content of a block is aligned. This also applies to the only line of a block if it contains a single line, the line preceding a <br>br element in a XHTML context, or a hard line break in other languages, and to last lines of anonymous blocks. Typically the last line is aligned likeDepending on the other linesvalue of the block element, this is set byproperty, the 'text-align' property. However, in some situations like whenlast line alignment may also be influenced by the value of  the  'text-align' and 'text-justify' properties. Possible values:

relative
If the 'text-align' property is set to 'justify', the last line may be aligned differently. Values havethe following meanings: autovalue 'justify', the last line will be aligned like the other lines, that is determined byto the valuestart of the 'text-align' property. However,inline-progression. If the 'text-align' property is set to the value 'justify',any other values, the last line alignment will be aligned todetermined by the startvalue of the inline progression. start ,'text-align' property.
start, end and center
Start, end and center text respectively.
justify
The last line will be justified like the other lines, using the justification type set byaccording to the 'text-justify' property. Note however thatproperty value. However, if there is no expansion opportunity in the last line, the line might not appear justified.
size
The line content is scaled to fit on the line. All the fonts on the line must be scaled by the same factor. Typically this value is used for single line element. Finally, this value, unlike the others, may change (i.e. decrease) the number of lines in a block element.

The following XHTML example shows the usage of the alignment properties in a case where all lines are justified in a distributed justification. This is commonly found in East Asian typography:

p.distributealllines
 { text-align: justify;
   text-justify: distribute;
   text-align-last: justify }

4.4. Minimum and maximum font size: the 'min-font-size' and 'max-font-size' property

The two following properties are only used in conjunction with the 'text-align-last' property set to 'size'. They control the font-size adjustments allowed to to fit the line content within the line.

Name: min-font-size
Value: <font-size><'font-size'> | auto
Initial: auto
Applies to: all elements and generated content
Inherited: yes
Percentages: element's computed 'font-size'
Media: visual
Computed value: <font-size>

If 'text-align-last' is 'size',Possible values:

<'font-size'>
The fontsfont sizes of the last line of an element are not allowed to become smaller than the smaller of the computed 'font-size' value and the <'font-size'> value set to 'min-font-size'.
'auto' means thatauto
The user agent determine the minimum readable font-size for the media. For example, a value is 9pxof '8px' (relative to the viewing device) is recommended for Latin scripts.
Name: max-font-size
Value: <font-size><'font-size'> | auto
Initial: auto
Applies to: all elements and generated content
Inherited: yes
Percentages: element's computed 'font-size'
Media: visual
Computed value: <font-size>

If 'text-align-last' is 'size',Possible values:

<font-size>
The fontsfont sizes of the last line of an element are not allowed to become larger than the larger of the computed 'font-size' value and the value <'font-size'> set to 'max-font-size'.
'auto' means thatauto
There is no limit.upper limit to the font sizes of the last line of an element.

4.5. Additional compression: The 'text-justify-trim' property

Name: text-justify-trim
Value: none | punctuation | punctuation-and-kana
Initial: punctuation
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This sets the individual font blank space compression permissions for the text justification algorithm, when 'text-justify' is anything other than 'inter-word'. This special type of space compression occurs on the font level, i.e. the blank space within the character area itselfglyphs themselves may be reduced without affecting the appearance of the glyph.filled parts of glyphs. This applies to wide-cell glyphs only. Possible values:

none
No wide-cell font space compression is allowed.

Diagram of glyph layout with no compression

Glyph layout with no compression

punctuation
Space can be taken away only from wide-cell punctuation glyphs.

Diagram of glyph layout with punctuation compression

Glyph layout with punctuation compression

punct-and-kana
Space compression is allowed on wide-cell punctuation and wide-cell Kana glyphs.

Diagram of character layout with punct-and-kana compression

CharacterGlyph layout with punctuation and Kana compression

4.6. Kashida effect: the 'text-kashida-space' property'

Name: text-kashida-space
Value: <percentage>
Initial: 0%
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: as described
Media: visual
Computed value: <percentage>

Kashida is a typographic effect used in Arabic writing systems that allows characterglyph elongation at some carefully chosen points in Arabic.points. Each elongation can be accomplished using a number of kashida glyphs, a single graphic or character elongation on each side of the kashida point. (The UAuser agent may use either mechanism based on font or system capability). The text-kashida-space'text-kashida-space' property expresses the ratio of the kashida expansion size to the white space expansion size, 0%size. The value '0%' means no kashida expansion, 100%expansion. The value '100%' means kashida expansion only .only. This property can be usedhas a visible effect with any justification style where kashida expansion is usedallowed (currently text-justify:if the 'text-justify' property is set to: auto, kashida, distribute andor newspaper).

In the diagram below showing two identical paragraphs of Arabic text, the blue line in the second line (not justified) shows the length that is used for kashida and divided among the elongation opportunities in the first line (justified), as indicated by the red underlines:

Example of kashida applied to Arabic text

Kashida applied to Arabic text

In that example no expansion occurs between the word themselves, indicating that the text-kashida-space property is set to 100%.


5. Text indentation

: the 'text-indent' property Name: text-indent Value: <length> | <percentage> Initial: 0 Applies to: block-level elements Inherited: yes Percentages: refers5.1. Summary

Since CSS1 it has been possible to widthindent the first line of containinga block element using the 'text-indent' property. However until now there was no easy way to indent the other lines of the block element. Changing margin or padding values was possible, but while indentation is always on the starting edge of the text, margin and padding are always given in absolute terms (independent from the layout direction of the block). Furthermore, unlike text indentation, the margin and padding effects are not inherited. Because of all of this, creating a hanging indent was not easy as it implied a mix of properties controlling text indent and padding or margin with different inheritance rules.

CSS3 solves the problem by making 'text-indent' a shorthand property of two new properties: 'text-first-indent' which controls the text indent of the first line within a block element and 'text-block-indent' which controls the text-indent of the other lines. To maintain compatibility with prior version of CSS and to facilitate authoring,  'text-block-indent' does not take length values but instead strategy hints. This allows 'text-indent' to be use in a compatible way or in a new way allowing hanging indent without resorting to margin or padding.

5.2. First Line indentation: the 'text-first-indent' property

Name: text-first-indent
Value: <length> | <percentage>
Initial: 0
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: refers to width of containing block
Media: visual
Computed value: <length>

This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the starting edge of the line box. User agents should render this indentation as blank space. When the 'text-align' property is not set to align the text at the starting edge, this property only specifies a minimum indentation. When the 'text-align' property is set to 'center', the content of the first line is centered within the whole line box with the additional constraint created by the indentation.

Values have the following meanings:

<length>
The indentation is a fixed length.
<percentage>
The indentation is a percentage of the containing block width.

The value of 'text-indent''text-first-indent' may be negative, but there may be implementation-specific limits.

Note: Note :Since the 'text-indent''text-first-indent' property inherits, when specified on a block element, it will affect descendent inline-block elements. For this reason, it is often wise to specify 'text-indent:'text-first-indent: 0' (or 'text-indent: 0', see below) on elements that are specified 'display: inline-block'.

Example(s): The following example causes a '3em' text indent. p { text-indent: 3em } 6. Line breaking 6.1. Types of5.3. Block Line breaking In documents written in Latin-based languages, where runs of characters make up words and words areindentation: the 'text-block-indent' property

Name: text-block-indent
Value: none | auto
Initial: none
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: see prose

This property specifies the indentation of all lines of text in a block except the first line to allow the creation of an 'hanging indent' effect. User agents should render this indentation as blank space. When the 'text-align' property is not set to align the text at the starting edge, this property only specifies a minimum indentation. When the 'text-align' property is set to 'center', the content of the lines is centered within the whole line box with the additional constraint created by the indentation.

Values have the following meanings:

auto
All lines are indented the minimum length necessary to keep the first line inside the starting text edge. If the computed value of
'text-first-indent' is negative, the computed value of 'text-block-indent' is the corresponding positive value. If the computed value of 'text-first-indent' is positive, the computed value of 'text-block-indent' is zero.
For example, if 'text-first-indent' were set to '-2em', the computed value of the 'text-block-indent' would be 2em, but if 'text-first-indent' were set to '2em', the computed value would be zero.
none
There is no indentation for the remaining lines of the block.  The computed value is zero.

5.4. All lines indentation: the 'text-indent' shorthand property

Name: text-indent
Value: <length> | <percentage>
Initial: not defined for shorthand properties
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: refers to width of containing block
Media: visual
Computed value: <length>

This property specifies the indentation of the lines of text in a block. It sets the value of 'text-first-indent' to the input value and 'text-block-indent' to 'inherit' (note that this is not its initial value).

Note: Since the 'text-indent' property inherits, when specified on a block element, it will affect descendent inline-block elements. For this reason, it is often wise to specify 'text-indent: 0' (or 'text-first-indent: 0', see above) on elements that are specified 'display: inline-block'.

Example(s):

The following example causes the first line a XHTML p element flush with the  content edge and the following lines indent by '3em'.

     :root {text-block-indent: auto} 
     p     { text-indent: -3em }

The 'float-displace' property [link TBD from CSS3 box] determines the line wrapping policy in the presence of floats. As such it is influenced by text indentation. When that property is set to the 'line' value, a float may appear within a hanging indent created by text indentation. When the same property is set to the 'content' value, and the 'indent-edge-reset' property [link from CSS3 box] which determines the reference indent edge is set to 'content-edge', the actual reference edge is the starting content edge of the least indented line or lines of the block element.


6. Line breaking

6.1. Types of line breaking

In documents written in Latin-based languages, where runs of characters make up words and words are separated by spaces or hyphens, line breaking is relatively simple. In the most general case, (assuming no hyphenation dictionary is available to the UA), a line break can occur only at whitespacewhite-space characters or hyphens, including U+00AD SOFT HYPHEN.

In ideographic typography, however, where what appears as a single glyph can represent an entire word and no spaces nor any other word separating characters are needed, a line breaking opportunity is not as obvious as a space. It can occur after or before many other characters. Certain line breaking restrictions still apply, but they are not as strict as they are in Latin typography.

Thai is another interesting example with its own special line breaking rules. Since Thai words are made up of runs of characters, it resembles Latin in that respect. But the lack of spaces as word delimiters, or in fact any consistent word delimiters, makes it similar to CJK. Thai, like Latin in the absence of a hyphenating dictionary, never breaks inside of words. In fact, a knowledge of the vocabulary is necessary to be able to correctly break a line of Thai text. Finally,To specify an explicit line breaking opportunity, the Unicode character:character U+200B ZERO WIDTH SPACE can be inserted in suchdocuments of Thai and similar scripts to specify an explicit line breaking opportunity..

A number of levels of line-breaking "strictness"strictness can be used in Japanese typography. These levels add or remove line breaking restrictions. The model presented in this specification distinguishes between two most commonly used line breaking levels for Japanese text, using the 'line-break' property.

In ideographic typography, it is also possible, though not always preferred, to allow line breaks to occur inside of quoted Latin and Hangul (Korean) words without following the line breaking rules of those particular scripts. The model proposed in this document gives the author control over that behavior through the 'word-break-cjk' property.

In addition, hyphenation is controlled by 'word-break-inside'.

All these properties are also available throughThe 'word-break' short hand property.shorthand property sets 'word-break-cjk' and 'word-break-inside'.

Finally, there is an additional property 'wrap-option' which may influence line-breaking, especially the property value 'wrap-option: emergency' which provides for emergency word-breaking for long words.

Note: Line breaking is alsocovered by the Unicode Standard Annex [UAX-14], available from the Unicode Web site. It contains a detailed recommendation and corresponding data for each Unicode character. The line breaking data for a character is formally independent from its inherent script value, although both are tightly correlated. Consequently, the 'text-script' property has no influence on line breaking and word breaking processing.  The following properties descriptions use commonly script classification because the classification conveniently describes the specific cases of line breaking and word breaking.

6.2. Line breaking: the 'line-break' property

Name: line-break
Value: normal | strict
Initial: normal
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property selects the set of line breaking rules to be used for text. The values described below are especially useful to CJK authors, but the property itself is open to other, not yet specified settings for non-CJK authors as well. (This is an area for future expansion.)

normal
Selects the normal line breaking mode for CJK. While the UA is free to define its own line breaking restrictions for the 'normal' mode, it is recommended that breaks between smalla standard katakana or hiragana character and a small katakana or hiragana characters(respectively) character be allowed. That is the preference in modern Japanese typography, and is especially desirable for narrow columns. Japanese katakanakana words tend tomay be long, and it is preferable to allow line breaks to occur among such characters than to have excessive expansion due to justification.
strict
Selects a more restrictive line breaking mode for CJK text. While the UA is free to define its own line breaking restrictions for the 'strict' mode, it is recommended that the restrictions specified by the JIS X-4051 [JIS-X-4051]Unicode Standard Annex [UAX-14] be followed. That implies that in this mode, small katakana and hiragana characters are not allowed to start a line.line if they follow a standard katakana or hiragana character.

Note: In Japanese, a set of line breaking restrictions is referred to as "Kinsoku". JIS X-4051 [JIS-X-4051] is a popular source of reference for this behavior using the strict set of rules. This architecture involves character classification into line breaking behavior classes. Those classes are then analyzed in a two dimensional behavior table where each row-column position represents a pair action to be taken at the occurrence of these classes. For example, given a closing character class and an opening character class, the intersection in that table of these two classes (the first character belonging to the opening class and the second belonging to the closing class) will indicate no line breaking opportunity.The rules described by JIS X-4051 have been superseded by the Unicode Technical Report #14 mentioned earlier. Note that#14.

Note: Both values,values: 'normal' and 'strict' imply that a set of line-breaking restrictions is in use.

In fact, there appears to be no valid line breaking mode in CJK in which line breaks can appear just anywhere among ideographs.6.3. Word breaking: the 'word-break-cjk', 'word-break-inside' properties and the shorthand 'word-break' property

Name: word-break-cjk
Value: normal | break-all | keep-all
Initial: normal
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property controls line-breaking behavior inside of words from a CJK point of view. Possible values:

normal
Keeps non-CJK scripts together (according to their own rules), while Hangul and CJK ideographs (including the Korean Hanja characters) break everywhere oraccording to the rules of the 'line-break' mode. Note however thatHowever, the behavior of non-CJK scripts can be superseded by using the value 'emergency' in the 'wrap-option' property, or the value 'hyphenate' in the 'word-break-inside' property.
break-all
Same as 'normal' for CJK ideographs and Hangul, but non-CJK scripts can break anywhere. This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line. The UAs may however limit the break everywhere behavior for script using clusters likesuch as Thai.
keep-all
Same as 'normal' for all non-CJK scripts. CJK ideographs and Hangul are kept together. This option should only be used in the context of CJK ideographs used in small clusters like in the Korean writing system.

The following example shows a paragraph style where all non-CJK scripts can break anywhere.

p.anywordbreaks { word-break: break-all }
Name: word-break-inside
Value: normal | hyphenate
Initial: normal
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property controls the hyphenation behavior inside of words. Possible values:

normal
A word should always stay in a single line. Note however thatHowever, this can be superseded by using the value 'break-all' in the 'word-break-cjk' property, or the value 'emergency' in the 'wrap-option' property. Moreover, explicit hyphenation characters (hyphen, soft hyphen, etc...) still create line breaking opportunities.
hyphenate
Words can be broken at an appropriate hyphenation point. It requires that the user agent have an hyphenation dictionary for the language of the text being broken. Setting this value activates the hyphenation engine in the user agent.

Note: Intra-word breaks may or may not be indicated by a visible hyphen, depending on the language. The hyphenation glyph may appear at the end of the line or at the start of the next line, and its actual shape may depend on the text language.

Name: word-break
Value: <'word-break-cjk'> || <'word-break-inside'>
Initial: see individual properties
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: see individual properties

The 'word-break' property is a shorthand property for setting 'word-break-cjk', and 'word-break-inside', at the same place in the style sheet.

All word-break relatedThe properties 'word-break-cjk' and 'word-break-inside' are first reset to their initial values (all 'normal'). Then, those properties that are given explicit values in the 'word-break' shorthand are set to those values.


7. Text Wrapping, White-space Control and Text Overflow

The following section describes text wrapping, white-space handling and text overflow. Text wrapping and white-space handling are interrelated through the CSS2 'white-space' property combining these two effects together. Text wrapping and text overflow both deal with situation where the text reaches the flow after-edge of its containing box.

CSS3 clearly separates these three effects in different sets of property while keeping the 'white-space' property for compatibility reason.

The following section frequently use the term line feed character to specify the normalized newline indicator. In XML and HTML context, the line feed character is the LINE FEED (U+000A). In other contexts, it may be represented differently, for example by a CARRIAGE RETURN (U+000A). The term 'line feed character' represents the normalized newline character native to a given framework.

7.1. Text wrapping: the 'wrap-option' property

Name: wrap-option
Value: wrap | hard-wrapno-wrap | soft-wrap | emergency
Initial: wrap
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property controls whether or not text wraps when it reaches the flow edge of its containing block box. Several value descriptions use the term preserved line feed characters (U+000A).characters. A preserved line-feed character (either from the source content or from occurrence of "\A" in generated content) is maintained for presentation purpose and may therefore influence text wrapping. The preserved status of line-feed characters is determined by the 'linefeed-treatment' property. The 'wrap-option' possible values are:

wrap
The text is wrapped at the best line-breaking opportunity (if required) within the available block inline progressioninline-progression dimension (block width in horizontal text flow). The best line-breaking opportunity is determined in priority by the existence of preserved line-feed characters (U+000A),characters, or by the line-breaking algorithm controlled by the 'line-break' and word-break' properties.
hard-wrapno-wrap
The text is only wrapped where explicitly specified by preserved line feed characters (U+000A).characters. In the case when lines are longer than the available block width, the overflow will be treated in accordance with the 'overflow' property specified in the element.
soft-wrap
The text is wrapped exactly atafter the block widthlast character which can fit before the ending-edge of the line and where explicitly specified by preserved line feed characters (U+000A).characters. No line-breaking algorithm is invoked. The intended usage is the rendering of a character terminal emulation.
emergency
The text is wrapped like for the 'wrap' case, except that the line-breaking algorithm will allow as a last resort option a text wrap after the last character which can fit before the ending-edgeending edge of the line,line box, independently of 'line-break', 'word-break-cjk' and word-break''word-break-inside' properties. For example, this deals withaddresses the situation of very long words constrained in a fixed-width container with no scrolling allowed.

7.2. White-space control: the 'linefeed-treatment', 'white-space-treatment', 'all-space-treatment' properties and the 'white-space' shorthand property

White-space processing in the context of CSS is the mechanism by which all white-space characters are interpreted for rendering purpose. The white-space set is determined by the XML [XML1.0] specification as being a combination of one or more space characters (Unicode value U+0020), carriage returns (U+000D), line feeds (U+000A), or tabs (U+0009).

Note: [HTML401] also defines the form feed character (U+000C) as a white space character, but that character is not part of any XHTML versions as they are all based on XML.

The amount of white space processing that can be achieved by a user agent that supports CSS is directly related to the CSS processing model, especially the document parsing and validation. After parsing and possible validation, the document tree may contain text nodes that contain unprocessed white space characters, or the document tree may already have been processed in a way that white space characters have been collapsed and partially removed (white space normalization).

In that respect, the CSS properties related to white space processing can only be effective if the CSS processor has access to the white space characters that were originally encoded in the document. However, end-of-line characters are typically handled (like by XML processors) in such a way that any arbitrary combination of end-of-line characters is replaced by a single line feed character.

Note: The first version of XML [XML1.0] only normalizes two characters sequences of (U+000D U+000A) or any U+000D not followed by U+000A to a single U+000A. The forthcoming version of XML [XML1.1] adds U+0085 (NEL) and U+2028 (LINE SEPARATOR) to the linefeed normalization process. However the set of white-space characters is unchanged. Notably, the character (U+000A).U+2029 (PARAGRAPH SEPARATOR) is not part of that set. If the characters U+2028 and U+2029 appears in text, they are treated as zero-width characters without semantic meaning.

Note: XML Schema, through its 'whiteSpace' facet can constrain exactly the type of white space characters still available to a rendering process like CSS for elements containing string datatype. In addition, some XML languages like [XHTML1.0] may have their own white-space processing rules when parsing and validating documents with white-space characters. Therefore, some of the behaviors described below may be affected by these limitations and may be user agent dependent in these contexts.

In addition, line feed characters can be inserted in generated content by using the '\A' string. The behavior of these inserted line feed characters is identical to original line feed characters part of the source document and is controlled by the same set of properties.

The initialWhite-space processing, similar to [XHTMLMOD]processing

Any text that is as follows: Leading and trailing white spacedirectly contained inside a block element(not inside an inline) should be treated as an anonymous inline element.

For each inline (including anonymous inlines), the following steps are not rendered. Line feedperformed, ignoring bidirectional formatting characters are renderedas oneif they were not there:

  1. Each non-linefeed white-space character is treated as per the 'white-space-treatment' property.
  2. If 'all-space-treatment' is set to 'preserve', any sequence of spaces (U+0020) unbroken by an element boundary is treated as a sequence of non-breaking spaces. However, a line breaking opportunity exists at the end of the sequence.
  3. Each linefeed character is treated as per the 'linefeed-treatment' property.
  4. If 'all-space-treatment' is set to 'collapse',
    1. every tab (U+0009) is converted to a space (U+0020)
    2. any space (U+0020) following characters:another space (U+0020)--even a space character,before the inline, if that space also has 'all-space-treatment' set to collapse--is removed.

Then, the entire block is rendered. Inlines are laid out, taking bidirectional reordering into account, and wrapping as specified by the 'wrap-option', 'line-break' and 'word-break' properties.

As each line is laid out,

  1. If a zero widthspace character (U+200B), or no character (i.e. not rendered).(U+0020) at the beginning of a line has all-space-treatment' set to 'collapse', it is removed.
  2. All tabs (U+0009) are rendered as a horizontal shift that lines up the choicestart edge of the resulting character is conditioned bynext glyph with the script propertynext tab stop. Tab stops occur at points that are multiples of 8 times the characters preceding and following the line feed character. A sequencewidth of whitea space characters without any line feed characters is(U+0020) rendered asin the block's font from the block's starting content edge.
  3. If a singlespace character. A sequence(U+0020) at the end of white space characters with one or more line feed character is rendered similarly toa singleline feed character.has 'all-space-treatment' set to 'collapse', it is also removed.

Note: Tab stops line up in the block regardless of font change.

These rendering rules make no assumption about the storage model of these white-space character sequences. It is outside the scope of CSS to determine the character code values accessible through programming interface such as DOM. These rules do not apply to elements that have an explicit white-space rendering behavior (like the pre element in XHTML).

Note: In determining how to convert a LINE FEED character a user agent should consider the following cases, whereby the script ofWhen white-space characters on either side ofare collapsed for rendering purpose, the LINE FEED determinestext decoration style applied to the choice ofcollapsed set is the replacement. Characters of COMMON script (such as punctuation) are treated asone that would be applied to the same asfirst white-space character of the script onoriginal sequence.

The other side: If'white-space' property is a shorthand property for 'linefeed-treatment', 'white-space-treatment', 'all-space-treatment' and 'wrap-option'.

Name: linefeed-treatment
Value: auto | ignore | preserve | treat-as-space | treat-as-zero-width-space | ignore-if-after-linefeed
Initial: auto
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property specifies the treatment of linefeed characters preceding andfor rendering purpose. Values have the following meanings:

auto
The user agent either transforms each line feed character belongto a script in which thespace character is used as a word separator, the(U+0020), transforms each line feed character should be converted intoto a zero width space character. Examples of such scripts are Latin, Greek, and Cyrillic. Ifcharacter (U+200B), or removes the characters preceding andline feed characters, following the line feed conversion algorthim. The choice of the resulting character belong to an ideographic-based script or writing system in which thereis no word separator,conditioned by the LINE FEED should be converted into no character. Examplesscript value of such scripts or writing systems are Chinese, Japanese. Ifthe characters preceding and following the line feed character belong to a non ideographic-based script inwhich there is no word separator, the LINE FEED should be converted into a ZERO WIDTH SPACE character (&#x200B;) or no character. Examples of such scriptsare Thai, Khmer. If nonepart of the conditionssame inline text flow in (1) through (3) are true,the LINE FEEDsame block element. The script value of each character should be convertedis determined by the 'text-script' property.
ignore
Linefeed characters are ignored. They are removed and are not rendered.
preserve
Linefeed characters indicate an end of line of boundary.
treat-as-space
Linefeed characters are transformed for rendering purpose into a space character.character (U+0020). The Unicode [UNICODE] technical report TR#24 (Script Names) [UTR-24] provides an assignmentresult of script names to all characters. When white-spacethe transformation can be treated by subsequent CSS processing (including white space collapsing).
treat-as-zero-width-space
Linefeed characters are collapsedtransformed for rendering purpose,purpose into a zero width space character (U+200B). The style applied toresult of the collapsed set istransformation can be treated by subsequent CSS processing (including white space collapsing).
ignore-if-after-linefeed
Specifies that any linefeed characters that immediately follows a linefeed character, shall be discarded. This collapses multiple consecutive linefeed characters into a single linefeed.

Note: The oneUnicode Standard [UNICODE] specifies that would be applied to first white-space character ofthe set.zero width space is considered a valid line-break point and that if two characters with a zero width space in between are placed on the following properties: 'linefeed-treatment' , 'white-space-treatment'same line they are placed with no space between them; and 'all-space-treatment' allow precise control ofthat behavior.if they are placed on two lines no additional glyph area, such as for a hyphen, is created at the line-break.

Line feed conversion algorithm

This algorithm is used when 'linefeed-treatment' determines the rendering of theis set to 'auto'. In determining how to convert a line feed characters.character, a user agent should consider the 'white-space-treatment' determinesfollowing cases, whereby the renderingscripts value of white space character (except line feed).characters preceding and following the 'all-space-treatment' property determinesline feed determine the treatment of consecutive white-space characters after considerationchoice of the two prior properties.replacement. The 'white-space' propertyscript value of each character is a shorthand property for these three properties as well asdetermined by the 'wrap-option''text-script' property. Name: linefeed-treatment Value: auto | ignore | preserve | treat-as-space | treat-as-zero-width-space | ignore-if-after-linefeed Initial: auto Applies to: all elements and generated content Inherited: yes Percentages: N/A Media: visual Computed value: specified value (except for initial and inherit) This property specifies(Note that if 'text-script' is set to 'auto', the treatment of linefeeds (U+000A characters). Values havedetermination is done character by character within the following meanings: auto Linefeedelement, otherwise all characters are transformed for rendering purpose into one ofshare the following characters: a space character, a zero width space character (U+200B), or no character (i.e. not rendered).same script value within the choiceelement.) Characters of COMMON script (such as punctuation) are treated as the resulting character is conditioned bysame as the script property ofon the other side:

  1. If the characters preceding and following the line feed character have a script value in which the same line flow elements part of the same block element. The result of the transformation can be treated by subsequent CSS processing (including white space collapsing). ignore Linefeed characters are ignored. i.e. they are transformed for rendering purpose into no character. preserve Linefeed characters indicate an end of line of boundary. treat-as-space Linefeed characters are transformed for rendering purpose into aspace character (U+0020). The result of(U+0020) is used as a word separator, the transformation canline feed character should be treated by subsequent CSS processing (including white space collapsing). treat-as-zero-width-space Linefeed characters are transformed for rendering purposeconverted into a zero widthspace character (U+200B). The resultcharacter. Examples of such scripts are Latin, Greek, and Cyrillic.

  2. If the transformation can be treated by subsequent CSS processing (including white space collapsing). ignore-if-after-linefeed Specifies that any linefeedcharacters that immediately followspreceding and following the line feed character have either a linefeed character, shall be discarded. This allows multiple consecutive linefeed characters to be collapsed intoideographic-based script value or a single linefeed. Note: The Unicode Standard [UNICODE] recommends that the zero width spacescript value which make them part of an ideographic-based writing system in which there is considered a valid line-break point and thatno word separator, the line feed should be converted into no character. Examples of such scripts or writing systems are Chinese, Japanese.

  3. If twothe characters withpreceding and following the line feed character have a non ideographic-based script vale in which there is no word separator, the line feed should be converted into a zero width space character (U+200B) or no character. Examples of such scripts are Thai, Khmer.

  4. If none of the conditions in between(1) through (3) are placed ontrue, the sameline they are placed with no space between them; and that if they are placed on two lines no additional glyph area, such as forfeed character should be converted into a hyphen, is created at the line-break.space character (U+0020).

Name: white-space-treatment
Value: ignore | preserve | ignore-if-before-linefeed | ignore-if-after-linefeed |
ignore-if-surrounding-linefeed
Initial: ignore-if-surrounding-linefeed
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property specifies the treatment for rendering purpose of the space character (U+0020) and other white-space characters except(except for linefeeds (U+000A),linefeed characters, since their treatment is determinedetermined by the linefeed-treatment property.'linefeed-treatment' property). White-space characters, when rendered as an advance width, use the width of the empty glyph normally used for the space character (U+0020). Values have the following meanings:

ignore
White spaceWhite-space characters, except for linefeeds,linefeed characters, are ignored. i.e.They are transformed for rendering purpose into no character.removed and are not rendered.
preserve
All white spacewhite-space characters other than line feed are rendered as intended (advancethey are (with advance width).
The treatment of linefeeds is not determined by this property.ignore-if-before-linefeed
Specifies that any white spacewhite-space characters, except for linefeeds, that immediately precedes a linefeed character, shall be discarded. This action shall take place regardless of the setting of the linefeed-treatment property.
ignore-if-after-linefeed
Specifies that any white space characters, except for linefeeds, that immediately follows a linefeed character, shall be discarded. This action shall take place regardless of the setting of the linefeed-treatment property.
ignore-if-surrounding-linefeed
Specifies that any white space characters, except for linefeeds, that immediately precedes or follows a linefeed character, shall be discarded. This action shall take place regardless of the setting of the linefeed-treatment property.
Name: all-space-treatment
Value: preserve | collapse
Initial: collapse
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

The "all-space-treatment"'all-space-treatment' property specifies the treatment of all consecutive white-space characters (with no exception for linefeed characters, unlike the "white-space-treatment"'white-space-treatment' property). Values have the following meanings:

preserve
All white-space characters are rendered as intended.they are. The rendering of tab charactercharacters (U+0009) is rendered asdescribed in the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters.white-space processing section.
collapse
Specifies that a character is not rendered if:
Name: white-space
Value: normal | pre | nowrap | pre-wrap | pre-linespre-line
Initial: not defined for shorthand properties
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: see individual properties

This property declares how 'white-space' inside the element is handled. Setting a value on the 'white-space' property setsets the respective values on 'wrap-option', 'linefeed-treatment', 'white-space-treatment' and 'all-space-treatment'. Although, strictly speaking, the property has no initial value, it is equivalent to 'normal'. The definition of the property values are established by referring tothe individual white-space properties set as follows:following table, which shows the settings of the constituent properties.

white-space: wrap-option: linefeed-treatment: white-space-treatment: all-space-treatment:
normal wrap auto ignore-if-surrounding-linefeed collapse
pre hard-wrapno-wrap preserve preserve preserve
nowrap hard-wrapno-wrap auto ignore-if-surrounding-linefeed collapse
pre-wrap wrap preserve preserve preserve
pre-linespre-linewrappreserveignore-if-surrounding-linefeed collapse

Example(s):

The following examples show what white-space behavior is expected from the pre and p elements, andthe "nowrap" attribute in HTML,XHTML, and in generated content.

pre        { white-space: pre }
p          { white-space: normal }
td[nowrap] { white-space: nowrap }
:before, :after {white-space:  pre-linespre-line }

In addition, the effect of an HTMLa XHTML pre element with the non-standard "wrap" attribute is demonstrated by the following example:

pre[wrap]  {white-space: pre-wrap }

7.3. Text overflow: the 'text-overflow-mode', 'text-overflow-ellipsis' properties and the shorthand 'text-overflow' property

Text overflow deals with the situation where some textual content is clipped when it overflows the element's box in its text advanceinline-progression direction as determined by the writing-mode'writing-mode' property value. This situation mayonly occuroccurs when the 'overflow' property has the values: hidden, scroll andor auto (in the latter case only when the UA behavior results in content scrolling).user agent introduces a scrolling mechanism).

Text overflow allows the author to introduce a visual hint at the two ending boundaries of the text flow within the element box (after and end). The hint is typically ana horizontal ellipsis character "...",(U+2026), although the actual character representation may vary. An imagehint may alsobe substituted.some other string or even an image. Setting a non empty string (or an uri for an image) for either text flow boundary enables the presentation of the hint. If both hints should appear,are enabled, only the 'after' hint is rendered. Initially, only the end of line hint is shown (correspond to the right of any over flown lines for left to right inline progression). Theinline-progression).

Control over text-overflow is divided inamong properties: 'text-overflow-mode' that controls the presentation of hint characters, 'text-overflow-ellipsis' thatcontrols the valuespresence and position of the hint characters presented athint, 'text-overflow-ellipsis' controls what constitutes the hint. The box boundaries and ashorthand property:property 'text-overflow' .sets the other text flow properties.

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word
Initial: clip
Applies to: allblock-level and inline-block elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)
clip
Clip text as appropriate for the text content. Glyphs representation of the text may be only partially rendered.
ellipsis
an ellipsis stringA visual hint is inserted at each box boundariesboundary where atext overflow occurs. The values'text-overflow-ellipsis' property determines the content of these ellipsis strings is determined bythe 'text-overflow-ellipsis' property.hint. The insertions take place atafter the boundary ofthe last full glyph representation ofletter that entirely fits on the line.
ellipsis-word
A linevisual hint is inserted at each box boundary where text overflow occurs. The 'text-overflow-ellipsis' property determines the content of text. ellipsis-word similar to 'ellipsis', butthe hint. The insertions take place at the boundary ofafter the last full glyph representation of aword withinthat entirely fits on the line of text.line.

The hint charactersoverflow hints are active only replacefor textual information. Ifcontent. That is, the clipping occurs on auser agent must not render an overflow hint when only replaced element, standard clipping occurs.content overflows.

Although the property is not inherited, overflowing children blocks that are either statically or relatively positioned and do not have a specified width or height will be hinted as specified by their parent text-overflow-mode property value.

Consider the following example:

 <div class="citation"><blockquote>
<p class="sentence"><span class="nowrap">I didn't like the play,</span> but then I saw
it under adverse conditions - the curtain was up.
<div class="attributed-to">_Groucho_Marx_</div>
</p>
 </div></blockquote>

Here is the style sheet controlling the overflow situations:

 div.citationblockquote        { width:100px; border: thin solid red; overflow: hidden;
                    text-overflow-mode:ellipsis;font-size:14px }
span.nowrap       { white-space : nowrap; }
div.attributed-to { position: relative;left:8px }

This will result in the content of the span to be partially visible and the ellipsis will be shown, the inner div which is relatively positioned will only show a partial ellipsis as it is offset by few pixels: Image
of ellipsis in text overflow

Other children blocks, like absolute positioned blocks, or blocks with specified width or height won't show hinting. For example, setting the p element of the previous figure with the following style:

p.sentence { width :100px; margin-top : 50px; margin-left : 50px; }

will result on no ellipsis shown for its contentin the absence of a hint overflow (because itthe element has a specified width and furthermore the text wrapping occurs in the 'hidden' overflow area of its parent element).width). This would be shown like this: Image of a child block element without ellipsis

In other words, the text-overflow-mode only affects the textual content of a block element which participate in its own inline flow.Name: text-overflow-ellipsis
Value: [<ellipsis-end> | <uri> [, <ellipsis-after> | <uri>]?]<ellipsis>{1,2}
Initial: "..."U+2026 (value of)
Applies to: allblock-level and inline-block elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit) <ellipsis-end> controls the value of the hint characters presented after the text flow within each line of an element box. It takes as value a text string. An empty string disables the hint. The initial value is '...'. In a horizontal text flow ( 'writing-mode' = 'lr-tb), the hint string would appear on each line ofand inherit)

The element box where<ellipsis> value is defined as: [<string> | <uri>]. The text overflows on<string> value determines a textual value for the right. <ellipsis-after> controlsoverflow visual hint. The value offont-size used for the hint character presented after<string> is the text flow within anelement box. It takes as value a text string.computed font-size. An empty string disables the hints.hint. The initial<uri> value determines an image to be used for the overflow visual hint.

When only one <ellipsis> value is empty. In a horizontal left-to-right text flow,set by 'text-overflow-ellipsis', it determines the overflow visual hint string would appear onat the right sideend of the last line.element box. If <ellipsis-after> is non empty and would appeartwo <ellipsis> values area provided, they determine the overflow visual hint at the same location than <ellipsis-end>, only <ellipsis-after> is shown.end and the <ellipsis-after> mayoverflow visual hint after the element box respectively. The visual hint after the element box only appear if there is content which is clipped because of the block-progression dimension of the block, not because the last line cannot fit. uri And URI can replace any ofIf the string valuevisual hint after the element box is enabled and set an image to be usedwould appear at the same location as the visual hint indication. Being specified is equivalent to a non empty string forat the respective ellipsis.end of the font-size used forelement box, only the ellipsis charactersvisual hint after the element box is rendered.

Note: Because the initial value (U+2026) of the overflow visual hint after the element font-size.box may not be easily rendered in some situations, the user agent may replace it by a sequence of 3 FULL STOP characters (U+002E).

Name: text-overflow
Value: <'text-overflow-mode'> || <'text-overflow-ellipsis'>
Initial: not defined for shorthand properties
Applies to: allblock-level and inline-block elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties

This property is the shorthand for 'text-overflow-mode' and 'text-overflow-ellipsis'.


8. Text spacing

8.1. Letter spacing: the 'letter-spacing' property

Name: letter-spacing
Value: normal | <length>
Initial: normal
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: <length> or 'normal'

This property specifies spacing behavior between grapheme clusters.

Note: A grapheme cluster is what a language user consider to be a character or a basic unit of the language. The term is described in detail in the Unicode technical report [UTR-29]: Text characters.Boundaries.

Values have the following meanings:

normal
The spacing is the normal spacing for the current font. It is typically zero-length. However, this value allows the user agent to alter the space between charactersgrapheme clusters in order to justify text.
<length>
This value indicates inter-character spacespacing added between grapheme clusters in addition to the default space between characters. The value is added to the advance width of eachspacing character (as opposed to combining character) or group of characters that are clustered in singlebetween grapheme unit (like in Thai, Khmer, etc.), including the last character of the element. Characters which are joined together by effect of applying a cursive font to them, or by standard typography rules (Arabic script, Northern Indian scripts like Devanagari) have the valued added to the normal advance width of each spacing characters. Combining characters (not spacing) do not get any letter-spacing effect, only the combination of the base character and its combining characters does.clusters. For justification purposes, user agents should minimize effect on letter-spacing as much as possible (priority to word-spacing expansion/compression as opposed to character-spacing expansion/compression).
Values may be negative, but there may be implementation-specific limits. TheFor justification algorithm may further modifypurposes, user agents should minimize alteration of spacing within words. The inter-character spacing, but only in text where there is no other opportunitiespriority should be to distribute the extraalter spacing (such as single word on a line, ideographic text).between words.

Because of the visualvisually disruptive effect of modifying letter-spacing onthis spacing in writing systemssystems, such as Arabic, which use joined characters, like for example Arabic,glyphs, the usage of this property is discouraged in those cases.

There are casescases, like in Japanese or Chinese writing systemssystems, where justification will change all letter-spacing effectsspacing between grapheme clusters, as there is no other opportunity in the line to expand or compress the charactertextual content in order to fit the line span. Character spacing algorithms areline.

The user agent-dependent. For example,agent determines the exact algorithm for spacing will not occur necessarily between all characters, but insteadbetween each glyph that constitutes either a letter or a cluster unit.grapheme clusters. Furthermore this property should not be usedset to a <length> for scripts and/or fonts that link characters together (cursive fonts for Roman scripts, all Arabic cases, Indic scriptsligate glyphs with headline like Devanagari, etc...). Characterconnecting strokes; such scripts and fonts include cursive Latin fonts, Arabic, Devanagari. Spacing between grapheme clusters may also be influenced by justification (see the 'text-align' property).

Example(s):

In this example, the space between charactersgrapheme clustes in blockquote elements is increased by '0.1em'.

blockquote { letter-spacing: 0.1em }

In the following example, the user agent is requested not to alter inter-character space:spacing within words:

blockquote { letter-spacing: 0cm }   /* Same as '0' */

When the resultant space between two charactersspacing is not the same as the default space,the default, user agents should notconsider avoiding the use of ligatures. (There are cases such as Arabic where ligatures may still be used)

8.2. Word spacing: the 'word-spacing' property

Name: word-spacing
Value: normal | none |<length>
Initial: normal
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: <length>, 'normal' or 'none'

This property specifies spacing behavior between words. Values have the following meanings:

normal
The normal inter-word space, as defined by the current font and/or the user agent. If the inter-word boundary is delimited by one or several white-space characters, they should be visible. If there are no word-separating characters, the user agent doesn't have to create an additional character advance width. none There is no inter-word space. All white-space characters are treated like zero-length characters.width between words.
<length>
This value indicates inter-word space in addition to the default space between words. Values may be negative, but there may be implementation-specific limits.

Word spacing algorithms are user agent-dependent. Determining word boundary is typically done by detecting white space characters. There are however many scripts and writing systems that do not separate their words by any character (like Japanese, Chinese, Thai, etc...), detecting word boundaries in these cases require dictionary based algorithms that may not be supported by all user agents. Word spacing is also influenced by justification (see the 'text-align' property).

Example(s):

In this example, the word-spacing between each word in h1 elements is increased by '1em'.

h1 { word-spacing: 1em }

8.3. Punctuation trimming: the 'punctuation-trim' property

Name: punctuation-trim
Value: none | start
Initial: none
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its "ink" lines up with the first glyph in the line above and below. In some scenarios, it may be preferable for the author not to allow leading punctuation marks to be trimmed, for example when it is more important that the glyphs tend to line up vertically. In other scenarios such an effect is desirable, for example when it is more important for the author that as much text as possible fits on a single line.

Possible values:

none
Leading punctuation is not trimmed.

Diagram of glyph layout without leading punctuation compressionExample of
Japanese text without leading punctuation compression

Glyph layout with no leading punctuation compression

start
Leading punctuation is trimmed.

Diagram of glyph layout with leading punctuation compressionExample of
Japanese text with leading punctuation compression

Glyph layout with leading punctuation compression

(Note thatNote: This property may in the future be expanded to cover other punctuation behaviors for other types of punctuation as well, not just wide-cell.)

8.4. Adding space: the 'text-autospace' property

Name: text-autospace
Value: none | [ideograph-numeric || ideograph-alpha || ideograph-space || ideograph-parenthesis]
Initial: none
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

When a run of non-ideographic or numeric characters appears inside of ideographic text, a certain amount of space is often preferred on both sides of the non-ideographic text to separate it from the surrounding ideographic glyphs. This property controls the creation of that space when rendering the text. That added width does not correspond to the insertion of additional space characters, but instead to the width increment of existing glyphs.

(A commonly used algorithm for determining this behavior is specified in JIS X-4051 [JIS-X-4051].)

This property is additive with the 'word-spacing' and 'letter-spacing' [CSS2] properties,properties. That is, the amount of spacing contributed by the 'letter-spacing' setting (if any) is added to the spacing created by 'text-autospace'. The same applies to 'word-spacing'.

Possible values:

none
No extra space is created.
ideograph-numeric
Creates extra spacing between runs of ideographic text and numeric glyphs.
ideograph-alpha
Creates extra spacing between runs of ideographic text and non-ideographic text, such as Latin-based, Cyrillic, Greek, Arabic or Hebrew.
ideograph-space
Extends the width of the space character while surrounded by ideographs.
ideograph-parenthesis
Creates extra spacing between normal (non wide) parenthesis and ideographs.

The following example:

span.autospace { text-autospace:none; }
<span class="autospace">[ideographs]1997[ideographs]</span>

would appear as:

Diagram of glyph layout without autospace

Example of Japanese text
mixed with a number without autospace

Mixed glyph layout when autospace is disabled

while changing the style to the following:

span.autospace { text-autospace:ideograph-numeric; }

would make the same text appear more like:

Diagram of glyph layout with autospace

Example of Japanese text
mixed with a number without autospace

Mixed glyph layout when autospace is enabled

8.5. Text kerning: the 'kerning-mode' and 'kerning-pair-threshold' property

Name: kerning-mode
Value: none | [pair || contextual]
Initial: none
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property controls all kerning effects. Some kerning effects are based on information located explicitly on fonts (pair-kerning). Others are based on context and typical ink placement within characters and don't rely on font information. Pair kerning is used mainly for Latin, Greek and Cyrillic scripts, while contextual kerning is more common in East Asian context. A typical example of pair kerning is the pair 'Wa'. A good example of contextual kerning is the pair '[[' (when using the wide width variant). Possible values:

none
no kerning is enabled
pair
enables pair kerning
contextual
enables contextual kerning
Name: kerning-pair-threshold
Value: auto | <length><'font-size'>
Initial: auto
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: <length> or 'auto'

This property controls the font size threshold, above whichthreshold for the pair kerning would beeffect. At the threshold value and above, pair kerning is active (if enabled). if enabled by the 'kerning-mode' property Because pair kerning is not very effective at small font size, this property can be used to adjust the threshold.

Possible values:

auto
The user agent determines the font-sizefont size threshold abovefrom which the kerning takes place.
<length> <font-size><'font-size'>
<'font-size'> threshold.

 


9. Text decoration

9.1. Introduction

UntilIn CSS1 and CSS2, the only text decorations available were available through the'text-decoration' property exposing itself various effectscontrols text decorations: underline, overline, line-through, etc...and blinking. CSS2 adds text shadows, which the text-shadows property. However'text-shadow' property controls. However, the text-decoration'text-decoration' property has somelimitations stemming from its syntax, which allows for multiple 'text-decoration' formatting effects to be specified at the same time but it precludes finerprecluding fine control over each of those formatting effects. MoreSpecifically, it offers no way to control the color or line style of the underline, overline or line-through.

CSS3 extends the model by introducing new properties allowing additional controls over those formatting effects. CSS3 also makes turning these formatting effects on or off possible without affecting any other 'text-decoration' settings.

Furthermore, to reflect the usage of underline in East Asian vertical writing, a new control is offered onfor the underline positioning,positioning; this allows the underline to appear before (on the right in vertical text flow) or after (on the left in vertical text flow) the formatted text. The property is called 'text-underline-position'.

Note: In East Asian typography it is typical to 'emphasize' text using glyph elements such as an accent mark, a dot, a hollow circle, etc. This feature is tightly connected to the rendered font and is therefore described in the font module. See 'font-emphasis' [Link TBD to the CS3 fonts module] for more details.

The 'text-decoration' property itself is now a shorthand property for all these new properties, but it only takes its own set ofproperties. However, the 'text-decoration' values which affects allare not composites built from the other text decorationvalues of constituent properties. Rather, 'text-decoration' values come from a small set specific to the 'text-decoration' shorthand property.

These properties describe decorations that are added to the text of an element. If they are specified for a block-level element, it affectsthey affect the root inline box (the anonymous inline box which wraps all the inline children of an element).

If they are specified for (or affects) an inline-level element, it affectsthey affect all boxes generated by the element. If an element is empty or is a replaced element (e.g., theimg element in XHTML), user agents must ignore these properties.refrain from rendering text content also excludes white spacedecorations on the element. In deciding whether an element is empty, user agents must ignore white-space characters that are collapsed during the white spacewhite-space processing.

All theseText decoration properties are not inherited, but descendant boxes shouldmust be formatted with the same decoration (e.g., they shouldmust all be underlined). The color of decorations shouldmust remain the same even if descendant elements have different 'color' values.

Finally,When a text decoration could result in text being unintentionally overdrawn by the text decoration style, the user agents may chose eitherto average thickness and positions of the 'line' text-decorations based onskip the childrentext size and baselines,decoration over the intersecting area by using 'text-underline-mode', 'text-line-through-mode' or to ignore'text-overline-mode' with the appropriate values.

In determining the position of and thickness of text decoration lines, user agents may consider the font sizes of and dominant baselines of children. Of course, user agents may ignore children in these determinations. Such an averaging is done on a line per line basis.

The following figure shows the averaging for underline:

image of underline averaging

On these 3 segmentsIn the three fragments of underlineunderlined text, the underline baris drawn consecutively lower and thicker as the ratio of large text increase for the each consecutive underlinedto small text segment.increases.

Note: User agents typically the underlineconsider superscript textsegments are averaged, while thebut ignore subscript segments are not.segments. The baseline-shift is not considered for superscript segments.

9.2. Text decoration style: the 'text-underline-style''text-underline-style', 'text-line-through-style' and 'text-overline-style' properties

Names: text-underline-style, text-line-through-style, text-overline-style
Value: none | solid | double | dotted | dashed | dot-dash | dot-dot-dash | wave
Initial: none
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

These properties specifies the line style for underline, line-through and overline text decoration. Possible values:

none
Produces no line.
solid
Produces a solid line.
double
Produces a double line.
dotted
Produces a dotted line.
dashed
Produces a dashed line style.
dot-dash
Produces a line whose repeating pattern is a dot followed by a dash.
dot-dot-dash
Produces a line whose repeating pattern is two dots followed by a dash. 
wave
Produces a wavy line.

The following figure shows the appearance of these various line styles.

All the line styles

The line styles

9.3. Text decoration width: the 'text-underline-width', 'text-line-through-style''text-line-through-width' and 'text-overline-style''text-overline-width' properties

Names: text-underline-styletext-underline-width, text-line-through-styletext-line-through-width, text-overline-styletext-overline-width
Value: none | solid | doubleauto | dotted<normal> | thick<number> | dashed<length> | dot-dash<percentage> thin | dot-dot-dashmedium | wavethick
Initial: noneauto
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/Acomputed 'font-size'
Media: visual
Computed value: specified value (except for initial and inherit)<length>

These propertiesproperty specifies the line stylewidth for the underline, line-through and overline text decoration.decorations. Possible values:

none no line solid solid line double double line dotted dotted line thick single line usingauto
The user agent may use any algorithm to determine the text decoration width. Implementers are encouraged to consider the font-sizes and baselines of all affected text. The text decoration style should affect the resulting value (the style 'double', for instance, would produce a width greater line width. dashed dashed line style. dot-dash linethan the style consisting'solid' produces). 
normal
The text decoration width is the normal text decoration width for the nominal font. If no font characteristic exists for the width of the text decoration in question, the user agent should proceed as though 'auto' were specified.
<number>
The text decoration width is the product of the <number> and the computed 'font-size'. If inherited, the inherited value is the <number> rather than the computed <length>.
<length>
The text decoration width is the length
thin
This value is equivalent to a dot-and-dash pattern. dot-dot-dash line style consisting<number> value kept by the user agent. The <number> must be constant through a given view of two-dots-and-a-dash pattern. wave wavy linea document and should yield a thin line.
medium
This value is equivalent to a <number> value kept by the following figure showsuser agent. The <number> must be constant through a given view of a document, must be greater than or equal to the 'thin' number and should yield a medium line.
thick
This value is equivalent to a <number> value kept by the appearanceuser agent. The <number> must be constant through a given view of these various line styles.a document, must be greater than or equal to the line styles 9.3.'medium' number and should yield a thick line.

9.4. Text decoration color: the 'text-underline-color', 'text-line-through-color' and 'text-overline-color' properties

Names: text-underline-color, text-line-through-color, text-overline-color
Value: auto | <color>
Initial: auto
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)<color>

These property specifies the line colorcolors for the underline, line-through and overline text decorations. Possible values:

auto
The color of the underlinetext decoration is determined by the 'color' property.  This is the computed value.
<color>
Specifies a color value.

9.4.9.5. Text decoration mode: the 'text-underline-mode', 'text-line-through-mode' and 'text-overline-mode' properties

Name:Names: text-underline-mode, text-line-through-mode, text-overline-mode
Value: continuous | wordsskip-white-space | skip-glyph | skip-glyph-and-white-space
Initial: continuous
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

These properties set the mode for the underline, line-through and overline text decorations, determining whether the text decoration affects the white-spacespace characters or not. 'Space characters' are all characters classified by the Unicode Standard [UNICODE] as category 'Zs', in addition to the white-space characters. Possible values:

continuous
This value means that the line is continuous.
wordsskip-space
This means that only non-whitespace textspace characters will not be lined.
9.5.skip-glyph
This means that portion of the character glyphs that would collide with the line will not be lined.
skip-glyph-and-space
This means that space characters and and portion of the character glyphs that would collide with the line will not be lined.

9.6. Other text decoration simple properties: 'text-underline-position' and 'text-blink'

Name: text-underline-position
Value: auto-posauto | before-edge | after-baselinealphabetic | after-edge
Initial: auto-posauto
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property sets the position of the underline when set through the 'text-underline-style' property. It can appear either 'before' (above in an horizontal flow) or after (below in an horizontal flow) the run of text in relation to its baseline orientation. This property is typically used in vertical writing context where it may be desired to have the underline appear 'before' the run of text. This results in having the underline appearing on the right side of the vertical writing column. Possible values:

auto-posauto
The user agent may use any algorithm to determine the underline position. The following algorithm is recommended:
In horizontal inline progression,inline-progression, the underlineunderline, if set will appear after,should be aligned with the textalphabetic baseline. In vertical inline progression,inline-progression, if the language is set to Japanese,Japanese or Korean, the underlineunderline, if set will appear beforeset, should be aligned with the text edge (EM box edge). before -edge'before-edge' of the underlineline box.
before-edge
the underline, if set will appear beforeset, is aligned with the edge'before-edge' of the EMline box.
after -baselinealphabetic
the underlineunderline, if setset, will appear after the alphabetic baseline. In this case the underline may cross some descenders.
after -edgeafter-edge
the underlineunderline, if set will appear afterset, is aligned with the edge'after-edge' baseline of the EMline box. In this case the underline does not cross the descenders. This is sometimes called 'accounting' underline.
Name: text-blink
Value: none | blink
Initial: none
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property specifies the blink mode. Possible values:

none
Produces no blinking.
blink
blink blinkBlinks.
Conforming CSS2CSS3 user agents aremay simply not required to support this value. 9.6.blink the text.

9.7. Text decoration shorthand properties: 'text-underline', 'text-line-through', 'text-overline' and 'text-decoration'

The 'text-underline' property is the shorthand for 'text-underline-style', 'text-underline-width', 'text-underline-color', 'text-underline-mode' and 'text-underline-position'. Any constituent properties not explicitly assigned values in a 'text-underline' declaration take their respective initial values.

Name: text-underline
Value: <'text-underline-style'> || <'text-underline-color'> || <'text-underline-mode'> || <'text-underline-position'>
Initial: not defined for shorthand properties
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

The 'line-through' property is the shorthand for 'text-line-through-style', 'text-line-through-width', 'text-line-through-color' and 'text-line-through-mode'. Any constituent properties not explicitly assigned values in a 'text-line-through' declaration take their respective initial values.

Name: text-line-through
Value: <'text-line-through-style'> || <'text-line-through-color'> || <'text-line-through-mode'>
Initial: not defined for shorthand properties
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties

ThisThe 'text-overline' property is the shorthand for 'text-overline-style', 'text-overline-width', 'text-overline-color' and 'text-overline-mode'. Any constituent properties not explicitly assigned values in a 'text-overline' declaration take their respective initial values.

Name: text-overline
Value: <'text-overline-style'> || <'text-overline-color'> || <'text-overline-mode'>
Initial: not defined for shorthand properties
Applies to: all elements with and generated content with textual content
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties

The 'text-decoration' property is a shorthand that takes its own set of values.

Name: text-decoration
Value: none | [ underline || overline || line-through || blink]
Initial: see individual properties
Applies to: all elements with and generated content with textual content
Inherited: no (see prose)
Percentages: N/A
Media: visual
Computed value: see individual properties

The 'text-decoration' shorthand sets the properties 'text-underline-style', 'text-underline-width', 'text-underline-color', 'text-underline-mode', 'text-underline-position', 'text-line-through-style', 'text-line-through-width', 'text-line-through-color', 'text-line-through-mode', 'text-overline-style', 'text-overline-width', 'text-overline-color', 'text-overline-mode' and 'text-blink' to their defaultinitial values, and then the values of the shorthand change these defaultsvalues as follows:

none
All the sub-propertiesthe  constituent properties maintain their defaults.initial values.
underline
The 'text-underline-style' value is 'solid' rather than 'none'.
overline
The 'text-overline-style' value is 'solid' rather than 'none'.
line-through
The 'text-line-through-style' value is 'solid' rather than 'none'.
blink
The 'text-blink' value is 'blink' rather than 'none'.

Conforming user agents aremay simply not required to supportblink the 'blink' value.text.

Although the property has no explicit initial value, it is equivalent to the value 'none.

Example(s):

In the following example for XHTML, the text content of all a elements acting as hyperlinks will be underlined and blinking:

a[href] { text-decoration: underline blink }

9.7.9.8. Text shadows: the 'text-shadow' property

Name: text-shadow
Value: none | [ <color> || <length> <length> <length> ? ,]* [ <color> || <length> <length> <length> ?] [<shadow>, ] * <shadow>
Initial: none
Applies to: all elements and generated content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified values (except for initial and inherit)

<shadow> itself is defined as "[<color>  <length> <length> <length>? | <length> <length> <length>? <color>?]".

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. The stack level of the shadow effects is the same as for the element itself.

Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.

A shadow offset is specified with two <length> valuesterms that indicate the distance from the text. The first length valueterm specifies the horizontal distance to the right of the text. A negative horizontal length valueterm places the shadow to the left of the text. The second length valueterm specifies the vertical distance below the text. A negative vertical length valueterm places the shadow above the text.

A blur radius may optionallybe specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified. If no blur radius is specified, the treatment is as if a blur radius of zero were specified and the shadow has the same size and shape as the glyphs that cast it. User agents may only implement only part of this property by ignoring blur effects. Such user agents should consider declarations that specify the optional third parameterblur radius to be parser errors, as described in the Syntax module [link TBD].

A color valueterm may optionallybe specified before or after the length valuesterms of the shadow effect. The color valueterm will be used as the basis for the shadow effect. If no color is specified, the value of the 'color' property will be used instead.

Text shadows may be used with the ::first-letter and ::first-line pseudo-elements.

Example(s):

The example below will set a text shadow to the right and below the element's text. Since no color has been specified, the shadow will have the same color as the element itself, and since no blur radius is specified, the text shadow will not be blurred:

h1 { text-shadow: 0.2em 0.2em }

The next example will place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.

h2 { text-shadow: 3px 3px 5px red }

The next example specifies a list of shadow effects. The first shadow will be to the right and below the element's text and will be red with no blurring. The second shadow will overlay the first shadow effect, and it will be yellow, blurred, and placed to the left and below the text. The third shadow effect will be placed to the right and above the text. Since no shadow color is specified for the third shadow effect, the value of the element's 'color' property will be used:

h2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Example(s):

Consider this example:

span.glow {
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
}

Here, the 'background' and 'color' properties have the same value and the 'text-shadow' property is used to create a "solar eclipse" effect:

Solar eclipse effect

Note.Note: This property is not defined in CSS1. Some shadow effects (such as the one in the last example) may render text invisible in UAsuser agents that only support CSS1. The usage of this property is discouraged as much better filter effects are available in SVG [SVG1.0].


10. Document grid

10.1. What is document grid?

It is very common for the glyphs in documents written in East Asian languages, such as Chinese or Japanese, to be laid out on the page according to a specified one- or two-dimensional grid. The concept of grid can also be used in other, non-ideographic contexts such as Braille or monospaced layout.

The diagram below represents a fragment of horizontal text on a page with mixed wide-cell and narrow-cell glyphs that a Japanese user intended to be laid out on a grid which resulted in 9 glyphs per line (gray grid lines shown for clarity):

Example of strict (genko) grid applied to mixed Japanese and
English in horizontal layout.

'Genko' grid applied to mixed text

The grid behavior can be set on the line progression,inline-progression, on the block progressionblock-progression or both. The grid on the block progressionblock-progression dimension is determined by the following properties:

The block progressionblock-progression grid is not described in this section as it can be simplyachieved simply by using the appropriate line relatedproperties mentioned above and described in the CSS3 Line module.

The grid on the line progressioninline-progression dimension is obtained by altering the characterglyphs advance width (or line progression)inline-progression value) of inline elements.  There are several modes:

Two properties control this advance width modification: 'line-grid-mode' enables it and 'line-grid-progression' determines its value. The shorthand 'line-grid' allows to setsetting both together.

10.210.2. Line grid mode: the 'line-grid-mode' property

Name: line-grid-mode
Value: none | ideograph | all
Initial: none
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

Specifies the line grid behavior. Each line grid mode value entails a different set of rules for rendering inline contents.contents (the term 'horizontal' is used in the following description to indicate the inline-progression dimension). Possible values:

none

No line grid. Standard text alignments apply to the block element.

ideograph
This mode applies inContent is divided into units that we will call strips. Each strip is horizontally centered within the following ways tosmallest number of grid spaces that contain the various categoriesstrip. The width of character:the grid space is determined by the 'line-grid-progression' setting.

Each wide-cell glyphgrapheme cluster with a wide base character is a strip. Each grapheme cluster with a narrow kana character as its base is a strip. Each non-breakable object (e.g. an image) is a strip. Other grapheme clusters are treated as a single strip bounded by the strips described prior. That single strip may be decomposed in several strips if line breaking occurs within it.

The strip are arranged in the grid as follows:

Mixed glyph layout in strict grid

Mixed glyph layout in strict grid

Object layout in strict grid. Large rectangular object is
centered horizontally within 2 grid spaces

Object layout in strict grid

The ideograph'ideograph' mode disables all special text justification and glyph width adjustment normally applied to the contents of the block element.

If a line break opportunity cannot be found in a text run going over the line boundary, then that text run will be pushed down to the next line and the last part of the previous line will be left blank.

Here is an example of mixed text in ideograph'ideograph' grid mode:

Example of strict grid applied to mixed Japanese and English
text in horizontal layout

Strict grid applied to mixed text

all
This type of grid can be used to achieve mono-spaced layout. The layout rules are simple: all non-connected glyphs are treatedAs equal, thatwith 'ideograph', content is every glyphdivided into strips and each strip is horizontally centered within a single grid space by default. Runsthe smallest number of connected glyphs are treated as stripsgrid spaces that can contain the same way as in 'ideograph'grid. Justification or anyThe rules for determining strips differs.

Each grapheme cluster with a non-joining base character is a strip. Each non-breakable object (e.g. an image) is a strip. Each run of grapheme clusters with joining base characters that join to each other character-width changing behaviors are disabled for the block element.is a strip.

Layout in fixed grid mode. All glyphs equally spread out.

Mixed glyph layout in fixed grid

For example:

Example of fixed grid mode in mixed Japanese and English text in
horizontal layout

Fixed grid applied to mixed text

The 'letter-spacing' property does not apply to characters in a grid but does apply for all characters not in the grid (i.e. all characters for 'line-grid-mode: none', non-ideographs for 'line-grid-mode: ideograph' and all non-connected glyphs for 'line-grid-mode: all').

10.310.3. Line grid progression: the 'line-grid-progression' property

Name: line-grid-progression
Value: text-height | line-height | <length>
Initial: normaltext-height
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: <length>

This property affects the line progressioninline-progression dimension of characters which are subject to the fixed advance width as determined by the 'line-grid-mode' property.

Possible values:

text-height
The computed value of the block element text-height'text-height' [link to CSS3 line module] is used.
line-height
The computed value of the block element line-height'line-height' [link to CSS3 line module] is used.
<length>
Inline progressioninline-progression dimension of the line grid's unit space.

For example:

div.section1 { line-grid-progression: .5in }

The rule set above would make each glyphgrid spaces 0.5 inches long in a horizontally laid out part of a document rendered within 0.5 inch ofdiv element in the section1 class. If the element has horizontal space:flow, it would like the following (without the grid lines, which are shown for clarity).

Example of a line-grid-char setting applied to mixed Japanese
and English text in horizontal layout

Enlarged charactergrid applied to mixed text in horizontal layout

If the section's layout flow is vertical,element has vertical flow, then 0.5in becomesis the vertical distance between consecutive characters in a column:measure of each grid space:

Example of a line-grid-char setting applied to mixed Japanese
and English text in vertical-ideographic layout

Enlarged charactergrid applied to mixed text in vertical-ideographic layout

10.410.4. Line grid: the 'line-grid' shorthand property

Name: line-grid
Value: <'line-grid-mode'><'line-grid-mode'> || <'line-grid-progression'> <'line-grid-progression'
Initial: not defined for shorthand properties
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: see individual properties

The 'line-grid' property is a shorthand property for setting 'line-grid-mode' ,and 'line-grid-progression'.

The following is an example of setting the grid in both progression:

div.grid { line-height:20pt;
           text-height: max-size;
           line-stacking-strategy: grid-height;
           line-grid: ideograph line-height; }

This setsets for the div element a grid with 20pt inline and block progressionblock-progression dimensions. All ideographs will be set in cells sized in multiple of 20pt in both direction.directions.


11. Miscellaneous text formatting

11.1. Capitalization: the 'text-transform' property

Name: text-transform
Value: capitalize | uppercase | lowercase | none
Initial: none
Applies to: all elements and generated content
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property controls capitalization effects of an element's text. Values have the following meanings:

capitalize
Puts the first characterletter of each word in uppercase.
uppercase
Puts all characters of each word in uppercase.
lowercase
Puts all characters of each word in lowercase.
none
No capitalization effects.

Although limited, the case mapping process has some language dependencies. Some well known examples are Turkish and Greek. See HTML [HTML40][HTML401] for ways to find the language of an HTML element. XML, and consequently [XHTML1.0], uses an attribute called xml:lang and. There may be other language-specific language-specific methodsways, specific to certain document languages, to determine the human language.

The case mapping rules for the character repertoire specified by the Unicode Standard 3.03.2 can be found on the Unicode Consortium web site: http://www.unicode.orgsite at [UNICODE-casing].

Conforming user agents must support case mapping rules according to the Unicode Standard 3.03.2 for all characters specified by that standard.

Note thatNote: The conformance rule is more stringent than the ones specified in lower levels of CSS.

Example:

In this example, all text in an h1 element is transformed to uppercase text.

h1 { text-transform: uppercase }

11.2. Hanging punctuation: the 'hanging-punctuation' property

Name: hanging-punctuation
Value: none | start | end | both
Initial: none
Applies to: block-level and inline-block elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property determines whether a punctuation mark, if one is present, may be placed outside the content area in the padding or margin area,at the start or at the end of a full line of text. Allowing a punctuation to 'hang'hang at the end of a line is is a common practice in East Asian typography. It is the responsibility of the style writerdesigner to create meaningful padding and margin areas to allow effective rendering of the punctuation. It should also be noted that compression may occur inIf the line,padding and margin are of zero width or not wide enough to show the punctuation, the punctuation may not be rendered.

Note: Compression, including compression of the punctuation characterscharacters, may also occur in the line independently of this effect.

Possible values:

none
No punctuation is notmarks are allowed to be placed outside the content area.
start
A leading punctuation,punctuation mark, if present, may overhang at the start of the content area.
It is placed in the padding or margin area.end
An ending punctuation,A trailing punctuation mark, if present, may overhang at the end of the content area.
It is placed in the padding or margin area.both
A punctuation,leading punctuation mark, if present, may overhang at eitherthe start orof the content area. A trailing punctuation mark, if present, may overhang at the end of the content area.

Here is anIn the following example where overhanging is not allowed:'hanging-punctuation' has the value 'none':

Example of Japanese text with hanging punctuation disabled

No hanging punctuation allowed (the punctuation mark and the characterglyph preceding it shown in blue and the right content edge shown with dashed line for clarity)

In the following example overhanging is allowed at the end of'hanging-punctuation' has the content area. Hangingvalue 'end'.

Example of Japanese text with hanging punctuation enabled

Punctuation appearing inhanging at the end of line padding area (the punctuation and the characterglyph preceding it shown in blue and the right content edge shown with dashed line for clarity)

Note: User agents should follow the convention of the scripts for trimming either only the firstscript-specific and language-specific conventions about which lines or all lines.allow which hanging punctuation. For example, in RomanLatin text, onlya leading punctuation appearing at the starting point ofmark may overhang only on the first line and a trailing punctuation may be placed outsideoverhang only on the content area.last line. It would look improper in other lines. The following figure shows an example of correct usage.

Example of leading punctuation in Roman typography

11.3. Combining text: the 'text-combine' property'

Name: text-combine
Value: none | letters | lines
Initial: none
Applies to: allinline and inline-block elements and generated content
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

This property controls the creation of composite characters (a.k.a.grapheme clusters ("kumimoji") or lines (a.k.a.("warichu").

Possible values:

none
No composite characters are created.Glyphs arrange normally.
letters
Combines glyphs to fit within the space of a single wide-cell glyph, by reducing them in size and stacking them next to and/or on top of each other. This effect is commonly used in East Asian typography.

No more than 5 glyphsfive grapheme clusters can be combined atcombine into a time.unit. If more than five are included inside of thean element with this property setting,'text-combine' set to 'letters' has more than five, only the first five are combined. The rest is rendered as regular text. If the text to be combined results inhas only a single glyph,grapheme cluster, no special combination effect occurs. The following texts shows the arrangement for 2, 3, 4two, three, four and 5 characters:five grapheme clusters:

Diagram of two-character kumimoji

Diagram of three-character kumimoji

Diagram of four-character kumimoji

Diagram of five-character kumimoji

The valid "Kumimoji" arrangements

The following mark-up:styling rule:

span.kumimoji { text-combine: letters }

could makeapplied to the following fragment:

<span>&#x304f;&#x307f;&#x3082;&#x3058;
<span class="kumimoji">&#x304f;&#x307f;&#x3082;&#x3058;</span></span>

would make the 4 charactersglyphs of the second span element appear as one (shown in blue for clarity):

Example of four-character kumimoji in Japanese

"Kumimoji "" applied to four charactersglyphs

lines
Combines the glyphs so they fit into two lines of equal length and height, whose combined height is equal to or slightly greater than the height of the line in which they appear in.appear. The combined lines appear inline with the surrounding text. The Japanese Standard [JIS-X-4051] describes recommended guidelines for this feature.  A summary of these guidelines is provided here:
  1. This combination is restricted to two lines.The combination should be preceded and followed by bracket or parenthesis characters
  2. This combination is restricted to two lines and is rendered as a single inline box or multiple inline boxes if it does not fit in a single line box .
  3. If the combination does not fit in a single line box, it can be split across several line boxes, using multiple inline boxes. In that case, each inline box represents its own character flow subset of the combination. That is, each of these inline boxes is rendered as a two-lines inline block with characters flowing from the ending edge of the combination may be broken across several lines, eachfirst line box representing its own logical subsetto the starting edge of the combination.second line of the inline box.

The following figure shows a typical usage for this feature.

Diagram of glyph layout in warichu

Glyph layout in "Warichu "within a single line box

Diagram of glyph layout in warichu in two lines

Glyph layout in Warichu split within two line boxes

The following mark-up:styling rule:

span.warichu { text-combine: lines }

applied to the following fragment:

<span>&#x5272;&#x6ce8;(
<span class="warichu">&#x3053;&#x308c;&#x306f;
&#x308f;&#x308a;&#x3061;&#x3085;&#x3067;&#x3059;&#x3002;</span>
)&#x3067;&#x3059;&#x3002;</span>

would make the enclosed text look like the following (shown in blue for clarity):

Example of warichu in Japanese

"Warichu" applied to 10 characters

12. Properties index

In addition to the specified values, all properties take the initial and inherit values.

Property Values Initial Applies to Inh. Percentages Media
all-space-treatment preserve | collapse collapse all elements and generated content yes N/A visual
direction ltr | rtl ltr all elements and generated content, but see prose yes N/A visual
glyph-orientation-horizontal <angle> 0deg all inline-levelelements and generated content yes N/A visual
glyph-orientation-vertical <angle> | auto auto all elements and generated content yes N/A visual
hanging-punctuation none | start | end | both none block-level and inline-block elements yes N/A visual
kerning-mode none | [pair || contextual] none all elements and generated content yes N/A visual
kerning-pair-threshold auto | <length><'font-size'> auto all elements and generated content yes N/A visual
line-grid <'line-grid-mode'> || <'line-grid-progression'> not defined for shorthand properties block-level elements yes N/A visual line-grid-mode none | ideograph | all none block-level elements yes N/A visual line-grid-progression text-height | line-height | <length> normal block-level elements yes N/A visualletter-spacing normal | <length> normal all elements and generated content yes N/A visual
line-break normal | strict normal all elements and generated content yes N/A visual
linefeed-treatment auto | ignore | preserve | treat-as-space | treat-as-zero-width-space | ignore-if-after-linefeed treat-as-spaceautoall elements and generated content yes N/A visual
line-grid <'line-grid-mode'> || <'line-grid-progression'> not defined for shorthand properties block-level and inline-block elements yes N/A visual
line-grid-mode none | ideograph | allnone block-level and inline-block elements yes N/Avisual
line-grid-progression text-height | line-height | <length>text-heightblock-level and inline-block elements yes N/Avisual
max-font-size <font-size><'font-size'> | auto auto all elements and generated content yes element's computed 'font-size' visual
min-font-size <font-size><'font-size'> | auto auto all elements and generated content yes element's computed 'font-size' visual
punctuation-trim none | start none block-level elements yes N/A visual text-script auto | none | <script> auto all elementsand generated contentinline-block elements yes N/A visual
text-align start | end | left | right | center | justify | <string> start block-level and inline-block elements yes N/A visual
text-align-last autorelative | start | end | center | justify | size auto block-level and inline-block elements yes N/A visual
text-autospace none | [ideograph-numeric || ideograph-alpha || ideograph-space || ideograph-parenthesis] none all elements and generated content yes N/A visual
text-blink none | blinknoneall elements and generated content noN/Avisual
text-block-indent none | autononeblock-level and inline-block elements noN/Avisual
text-combine none | letters | lines none all elements and generated content no N/A visual
text-decoration none | [ underline || overline || line-through || blink] not defined for shorthand propertiesall elements with and generated content with textual contentno (see prose) N/A visual
text-indenttext-first-indent <length> | <percentage> 0 block-level and inline-block elements yes refers to width of containing block visual
text-indent <length> | <percentage> not defined for shorthand properties block-level and inline-block elements yes refers to width of containing block visual
text-justify auto | inter-word | inter-ideograph | distribute | newspaper | inter-cluster | kashida auto block-level and inline-block elements yes N/A visual
text-justify-trim none | punctuation | punctuation-and-kana punctuation block-level and inline-block elements yes N/A visual
text-kashida-space <percentage> 0% block-level and inline-block elements yes as described visual
text-line-through <'text-line-through-style'> || <'text-line-through-color'> || <'text-line-through-mode'> not defined for shorthand properties all elements with and generated content with textual content no N/A visual
text-line-through-color auto | <color> auto all elements with and generated content with textual content no N/A visual
text-line-through-mode continuous | wordsskip-white-space | skip-glyph | skip-glyph-and-white-space continuous all elements with and generated content with textual contentno N/A visual
text-line-through-style none | solid | double | dotted | thick | dashed | dot-dash | dot-dot-dash | wave none all elements with and generated content with textual contentno N/A visual
'text-line-through-width'auto | <normal> | <number> | <length> | <percentage> thin | medium | thickautoall elements with and generated content with textual contentno N/Acomputed 'font-size' visual
text-overflow <'text-overflow-mode'> || <'text-overflow-ellipsis'> not defined for shorthand properties allblock-level and inline-block elements no N/A visual
text-overflow-ellipsis [<ellipsis-end> | <uri> [, <ellipsis-after> | <uri>]?] "..." all<ellipsis>{1,2}U+2026 (value of)block-level and inline-block elements no N/A visual
text-overflow-mode clip | ellipsis | ellipsis-word clip allblock-level and inline-block elements no N/A visual
text-overline <'text-overline-style'> || <'text-overline-color'> || <'text-overline-mode'> not defined for shorthand properties all elements with and generated content with textual contentno N/A visual
text-overline-color auto | <color> auto all elements with and generated content with textual contentno N/A visual
text-overline-mode continuous | wordsskip-white-space | skip-glyph | skip-glyph-and-white-space continuous all elements with and generated content with textual contentno N/A visual
text-overline-style none | solid | double | dotted | thick | dashed | dot-dash | dot-dot-dash | wave none all elements with and generated content with textual contentno N/A visual
'text-overline-width'auto | <normal> | <number> | <length> | <percentage> thin | medium | thickautoall elements with and generated content with textual contentnocomputed 'font-size' visual
text-script auto | <script> auto all elements and generated content yesN/A visual
text-shadow none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] none all elements and generated content no (see prose) N/A visual
text-transform capitalize | uppercase | lowercase | none none all elements and generated content yes N/A visual
text-underline <'text-underline-style'> || <'text-underline-color'> || <'text-underline-mode'> || <'text-underline-position'> not defined for shorthand properties all elements with and generated content with textual contentno N/A visual
text-underline-color auto | <color> auto all elements with and generated content with textual contentno N/A visual
text-underline-mode continuous | wordsskip-white-space | skip-glyph | skip-glyph-and-white-spacecontinuous all elements with and generated content with textual contentno N/A visual
text-underline-position auto-posauto | before-edge | after-baseline | after-edge auto-posautoall elements with and generated content with textual contentno N/A visual
text-underline-style none | solid | double | dotted | thick |dashed | dot-dash | dot-dot-dash | wave none all elements with and generated content with textual contentno N/A visual
'text-underline-width'auto | <normal> | <number> | <length> | <percentage> thin | medium | thickautoall elements with and generated content with textual contentnocomputed 'font-size' visual
unicode-bidi normal | embed | bidi-override normal all elements and generated content, but see prose no N/A visual
white-space normal | pre | nowrap | pre-wrap | pre-linespre-linenot defined for shorthand properties all elements and generated content yes N/A visual
white-space-treatment ignore | preserve | ignore-if-before-linefeed | ignore-if-after-linefeed | ignore-if-surrounding-linefeed ignore-if-surrounding-linefeed all elements and generated content yes N/A visual
word-break <'word-break-cjk'> || <'word-break-inside'> see individual properties all elements and generated content yes N/A visual
word-break-CJKword-break-cjk normal | break-all | keep-all normal all elements and generated content yes N/A visual
word-break-inside normal | hyphenate normal all elements and generated content yes N/A visual
word-spacing normal | none |<length> normal all elements and generated content yes N/A visual
wrap-option wrap | hard-wrapno-wrap | soft-wrap | emergency wrap all elements and generated content yes N/A visual
writing-mode lr-tb | rl-tb | tb-rl | tb-lr | bt-rl | bt-lr | lr | rl | tb lr-tb all elements and generated content yes N/A visual

The following properties are defined in other specifications:

14.13. Profiles

There are 3 modules defined byThis chapter:document defines three modules: The CSS1 text model:module, the CSS2 text model:module and the CSS3 text model:module.

The CSS1 text module is made ofhas the following properties/values:properties and values:

Name Values Initial Applies to Inherited Percentages Media groups
'letter-spacing' normal | <length> normal all elements yes N/A N/A
'text-align' left | right | center | justify startdepends on user agent and writing directionblock-level elements yes N/A N/A
'text-decoration' none | [ underline || overline || line-through || blink ] none all elements no (see prose) N/A N/A
'text-indent' <length> | <percentage> | inherit 0 block-level elements yes refers to width of containing block N/A
'text-transform' capitalize | uppercase | lowercase | none | inherit none all elements yes N/A N/A
'word-spacing' normal | <length> normal all elements yes N/A N/A
'white-space' normal | pre | nowrap normal all elements yes N/A N/A

Concerning the 'text-align' property, a conforming CSS1 user agent my interpret the value 'justify' as 'left' or 'right', depending on whether the element's current text direction is left-to-right or riht-to-left respectively.

The following table describes the CSS2 text module. Because all properties have added the 'inherit''inherit' value and have a media type, all CSS1 properties have been specified below as well. The properties added are:are 'direction', 'text-shadow' and 'unicode-bidi'. In addition, the 'text-align' has a new value: <string>.

Concerning the 'text-align' property, a conforming CSS1 user agent my interpret the value 'justify' as 'left' or 'right', depending on whether the element's current text direction is left-to-right or riht-to-left respectively. Properties that applies to all elements also applies to generated content..Name Values Initial Applies to Inherited Percentages Media groups
'direction' ltr | rtl | inherit ltr all elements and generated content, but see prose yes N/A visual
'letter-spacing' normal | <length> | inherit normal all elements and generated content yes N/A visual
'text-align' left | right | center | justify | <string> | inherit startdepends on user agent and writing directionblock-level elements yes N/A visual
'text-decoration' none | [ underline || overline || line-through || blink] | inherit none all elements and generated content no (see prose) N/A visual
'text-indent' <length> | <percentage> | inherit 0 block-level elements yes refers to width of containing block visual
'text-shadow' none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit none all elements and generated content no (see prose) N/A visual
'text-transform' capitalize | uppercase | lowercase | none | inherit none all elements and generated content yes N/A visual
'unicode-bidi' normal | embed | bidi-override | inherit normal all elements and generated content, but see prose no N/A visual
'white-space' normal | pre | nowrap | inherit normal block-level elements yes N/A visual
'word-spacing' normal | <length> | inherit normal all elements and generated content N/A visual

The CSS3 module adds the following properties:

It also modifies the following properties as described:


15.14. Glossary

Hangul
Subset of the Korean writing system.system in which a few letters combine to form syllables. Visually, each written syllable occupies the same amount of space.
Hanja
Subset of the Korean writing system that utilizes ideographic characters borrowed or adapted from the Chinese writing system. Also see Kanji.
Hiragana
Japanese syllabic script, or character of that script. Rounded and cursive in appearance. Subset of the Japanese writing system, used together with kanji and katakana. In recent times, mostly used to write Japanese words when kanji are not available or appropriate, and word endings and particles. Also see Katakana.
Ideograph
A character that is used to represent an idea, word, or word component, in contrast to a character from an alphabetic or syllabic script. The most well-known ideographic script is used (with some variation) in East Asia (China, Japan, Korea,...).
Kana
Collective term for hiragana and katakana.
Kanji
Japanese term for ideographs; ideographs used in Japanese. Subset of the Japanese writing system, used together with hiragana and katakana. Also see Hanja.
Kashida
ArabicAny of a number of elongation character.glyphs that sit on the alphabetic baseline; used in Arabic and Syriac. Also a character (U+0640, Arabic tatweel) used to indicate the glyph.
Katakana
Subset of the Japanese writing system consisting of phonetic characters used to represent Romanmostly Latin words. Also see Hiragana.
Kinsoku
Japanese term for a set (or sets) of line breaking restrictions.
Kumimoji
Composite character consistingComposition of uptwo to 5 charactersfive grapheme clusters that are reduced in size and combinedarranged to fit within the space of a single character.wide-cell glyph. Some of these compositions are encoded in the Unicode Standard.
Logograph, Logogram
Character in the Chinese (or East Asian in general) writing systemor glyph that represents an entire word. Common in the Han script used in East Asia.
Ruby
A run of text that appears in the vicinity of another run of text and serves as an annotation or a pronunciation guide for that text.
Tate chu yoko
Run of horizontal text inside of a column of vertical text; frequently used in East Asian documents for displaying certain numbers, such as years.
Warichu
A run of text of reduced font size that appears inside of a line of text as two lines of equal height and length

Appendix A: Vertical Layout Effect on CSS Properties

In general, the existing [CSS2] properties that imply directionality or position are absolute, i.e. "left" means "left" and "top" means "top" regardless of the writing mode of the page. The purpose of this appendix however is to list the exceptions to that rule and clarify ambiguities. If a property does not appear in this list, it is intended to be interpreted as absolute, i.e. it does not rotate when the layout mode changes.

CSS Property Effect in vertical layout
'clear' 'float' and 'clear' property values interpretation is absolute in horizontal flow and logical in vertical flow (left is start, right is end)end).
'direction' relative (logical), i.e. ltr implies top-to-bottom character progression in vertical layoutlayout.
'display' relative (logical), i.e. the values that are directional (table-) are relative to the element orientation as specified by the writing mode.
'float' [see the notetext about 'clear']
'line-height' relative (logical), i.e. this controls the "height" of a line if horizontal, or the "width", if vertical. In other words, this controls the size of the line in the dimension perpendicular to the baseline.
'quotes' relative (logical), the concept of open-quotes and close-quotes is already used in CSS. Note(Note that the quote glyph may vary depending on the glyph-orientation. 'text-align' 'left'glyph-orientation.)
'text-align' 'left' and 'right''right' are physical in horizontal inline progressioninline-progression and UA dependentdepend on the user agent in vertical inline progression. 'start'inline-progression. 'start' and 'end''end' are always relative.
'text-decoration' relative (logical), i.e. underline and overline are parallel to the baseline. Underline appears on the left side of a vertical column and overline appears on the right'unicode-bidi' relative (logical), i.e. it affects glyph progression regardless of layoutlayout.
'vertical-align' relative (logical), topi.e. 'top' and bottom'bottom' values maps to before'before-edge' and after-edge'after-edge' values in baseline alignment propertiesproperties.

Acknowledgments

This specification would not have been possible without the help from:

Ayman Aldahleh, Stephen Deach, Martin Dürst,Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Richard Ishida, Koji Ishii, Masayasu Ishikawa, Michael Jochimsen, Eric LeVine, Chris Pratley, Rahul Sonnad, Frank Tang, Chris Thrasher, Etan Wexler, Masafumi Yabe.


References

Normative references

[UTR-24]
Mark Davis. Script Names. 1 April 2002. Unicode Technical Report #24. URL: http://www.unicode.org/unicode/reports/tr24/tr24-4.html
[UNICODE-casing]
Unicode Consortium. Case folding. March 2002. Unicode Character data base Version 3.2, case folding information. URLs: http://www.unicode.org/Public/3.2-Update/UnicodeData-3.2.0.txt and http://www.unicode.org/Public/3.2-Update/CaseFolding-3.2.0.txt
[XML1.0]
Tim Bray; Jean Paoli; C. M. Sperberg-McQueen; Eve Maler. Extensible Markup Language (XML) 1.0 (Second Edition). October 2000. W3C Recommendation. URL: http://www.w3.org/TR/2000/REC-xml-20001006

Other references

[CSS2]
Bert Bos; HåkonHÃ¥kon Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2
[CSS3-background]
Tim Boland; Bert Bos. CSS3 module: backgrounds. 19 February 2002. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2002/WD-css3-background-20020219
[CSS3-color]
Tantek Çelik;Çelik; Chris Lilley. CSS3 module: color. 5 March 2001.18 April 2002. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2001/WD-css3-color-20010305http://www.w3.org/TR/2002/WD-css3-color-20020418/
[CSS3-fonts]
Michel Suignard; Chris Lilley. CSS3 module: fonts. 31 July 2001.2 August 2002. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2001/WD-css3-fonts-20010731 [HTML40] Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.0 Specification (revised). Apr 1998. W3C Recommendation. URL: http://www.w3.org/TR/1998/REC-html40-19980424http://www.w3.org/TR/2002/WD-css3-fonts-20020802/
[HTML401]
Raggett, D.;Dave Raggett; Arnaud Le Hors, A.; Jacobs, I..Hors; Ian Jacobs. HTML 4.01 Specification. DecDecember 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[ISO15924]
Code for the representation of names of scripts. International Organization for Standardization.. 1998. ISO 15924:1998. Draft International Standard
[JIS-X-4051]
Line composition rules for Japanese documents. Japanese Standards Association. 1995. JIS X 4051-1995. In Japanese
[RFC2119]
S.Scott Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt
[SVG1.0]
Various. Scalable Vector Graphics (SVG) 1.0 Specification. SepSeptember 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904
[UAX-11]
Asmus Freytag. East Asian Width. 15 March 2002. Unicode Standard Annex #11. URL: http://www.unicode.org/unicode/reports/tr11/tr11-10
[UAX-14]
Asmus Freytag. Line Breaking Properties. 15 March 2002. Unicode Standard Annex #14. URL: http://www.unicode.org/unicode/reports/tr14/tr14-12
[UNICODE]
The Unicode Consortium. Book version: The Unicode Standard: Version 3.0. Addison Wesley Longman. 2000. ISBN 0-201-61633-5. Online version: The Unicode Standard: Version 3.2.0, URL:
http://www.unicode.org/unicode/standard/versions/enumeratedversions.html#Unicode_3_2_0
For more information, consult the Unicode Consortium's home page at http://www.unicode.org/
[UTR-24][UTR-29]
Mark Davis. Script Names. 1st AprilText Boundaries. 11th October 2002. Unicode Technical Report #24.#29. URL: http://www.unicode.org/unicode/reports/tr24/tr24-4.htmlhttp://www.unicode.org/unicode/reports/tr29/tr29-3.html
[XHTML1.0]
Steven Pemberton; et al. XHTML 1.0: The Extensible HyperText Markup Language. Jan 2000. W3C Recommendation. URL: http://www.w3.org/TR/2000/REC-xhtml1-20000126
[XHTMLMOD]
Adams, Robert; Altheim, Murray;Robert Adams; Murray Altheim; et al. Modularization of XHTML. AprApril 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410
[XML1.0] Tim Bray; Jean Paoli; C. M. Sperberg-McQueen; Eve Maler.[XML1.1]
John Cowan. Extensible Markup Language (XML) 1.0 (Second Edition). Oct 2000.1.1. October 2002. W3C Candidate Recommendation. URL: http://www.w3.org/TR/2000/REC-xml-20001006http://www.w3.org/TR/2002/CR-xml11-20021015
[XSL1.0]
Adler, Sharon; Berglund, Anders; et al. Extensible Stylesheet Language (XSL) Version 1.0. OctOctober 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-xsl-20011015