Overview.bs

<h1>CSS Text Module Level 4</h1>

<pre class='metadata'>
Shortname: css-text
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: http://dev.w3.org/csswg/css-text-4/
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
Editor: Koji Ishii, Invited Expert, kojiishi@gluesoft.co.jp
Editor: Alan Stearns, Adobe Systems, stearns@adobe.com
Abstract: This module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.
Ignored terms: segment break, segment breaks
At Risk: The ''preserve-trim'' of the 'text-space-collapse' property
</pre>

<h2 id="intro">
Introduction</h2>

	Issue: Add final level 3 content

<h2 id="transforming">
Transforming Text</h2>

	Issue: Add final level 3 content

<h2 id="white-space-processing">
White Space Processing</h2>

	Issue: Add final level 3 tab-size and processing details

<h3 id="white-space-collapsing">
White Space Collapsing: the 'text-space-collapse' property</h3>

	<p class="issue">This section is still under discussion and may change in future drafts.</p>

	<pre class="propdef">
	Name: text-space-collapse
	Value: collapse | discard | preserve | preserve-auto | preserve-trim | preserve-breaks | preserve-spaces
	Initial: collapse
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	<p class="issue">Need a property name</p>

	This property declares whether and how
	<a href="#white-space-processing">white space</a> inside the element is
	collapsed. Values have the following meanings, which must be interpreted
	according to the white space processing rules:

	<dl dfn-for=text-space-collapse dfn-type=value>
		<dt><dfn>collapse</dfn>
		<dd>
			This value directs user agents to collapse sequences of white space
			into a single character
			(or <a href="http://www.w3.org/TR/css-text/#line-break-transform">in some cases</a>, no character).

		<dt><dfn>preserve</dfn>
		<dd>
			This value prevents user agents
			from collapsing sequences of white space.
			<a>Segment breaks</a> are preserved as forced line breaks.

		<dt><dfn>preserve-auto</dfn>
		<dd>
			This value preserves white space and <a>segment breaks</a> as for ''preserve''.
			However, in order to match platform conventions for editable text fields,
			the UA <em>may</em> visually collapse
			the advance widths of preserved white space
			that occurs at the end of a line,
			and is not required to honor soft wrap opportunities between such spaces.

		<dt><dfn>preserve-trim</dfn>
		<dd>
			This value preserves white space and <a>segment breaks</a> as for ''preserve''.
			However, the UA <em>must</em> visually collapse to 0
			the advance widths of all preserved white space
			that occur at the end of a line.

			Note: the ''preserve-trim'' value is at risk.

			Issue: The CSSWG would appreciate feedback
			on the use cases for this value,
			to evaluate whether
			this value is needed at all
			and if so, if trimming leading spaces
			could be needed as well.

		<dt><dfn>preserve-breaks</dfn>
		<dd>
			This value collapses white space as for ''collapse'', but preserves
			<a>segment breaks</a> as forced line breaks.

		<dt><dfn>preserve-spaces</dfn>
		<dd>
			This value prevents user agents
			from collapsing sequences of white space, 
			and converts tabs and <a>segment breaks</a> to spaces. 
			(This value is intended to match the behavior 
			of <code>xml:space="preserve"</code> in SVG.)

		<dt><dfn>discard</dfn>
		<dd>
			This value directs user agents to “discard”
			all white space in the element.

			Issue: Does this preserve line break opportunities or no? Do we need a "hide" value?
	</dl>

	<div class="example">

		The following style rules implement MathML's white space processing:

		<pre>
			@namespace m "http://www.w3.org/1998/Math/MathML";
			m|* {
				text-space-collapse: discard;
			}
			m|mi, m|mn, m|mo, m|ms, m|mtext {
				text-space-collapse: trim-inner;
			}
		</pre>
	</div>

	<p class="issue">This section is still under discussion and may change in future drafts.</p>

<h3 id="white-space-trim">
White Space Trimming: the 'text-space-trim' property</h3>

	<pre class="propdef">
	Name: text-space-trim
	Value: none | trim-inner || discard-before || discard-after
	Initial: none
	Applies to: all elements
	Inherited: no
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	This property allows authors to specify trimming behavior
	at the beginning and end of a box.
	Values have the following meanings,
	which must be interpreted according to the white space processing rules:

	<dl dfn-for=text-space-trim dfn-type=value>
		<dt><dfn>trim-inner</dfn>
		<dd>
			For block containers this value directs UAs to discard all whitespace
			at the beginning of the element up to and including the last <a>segment break</a>
			before the first non-white-space character in the element as well as
			to discard all white space at the end of the element starting with the
			first <a>segment break</a> after the last non-white-space character in the element.
			For other elements this value directs UAs to discard all whitespace
			at the beginning and end of the element.

		<dt><dfn>discard-before</dfn>
		<dd>
			This value directs the UA to collapse all collapsible whitespace
			immediately before the start of the element.

		<dt><dfn>discard-after</dfn>
		<dd>
			This value directs the UA to collapse all collapsible whitespace
			immediately after the end of the element.
	</dl>

	<div class="example">
		<p>The following style rules render DT elements as a comma-separated list:
		<pre>
			dt { display: inline; }
			dt + dt:before { content: ", "; text-space-collapse: discard-before; }
		</pre>
	</div>

<h2 id="line-breaking">
Line Breaking and Word Boundaries</h2>

	Issue: Add final level 3 content

<h2 id="wrapping">
Text Wrapping</h2>

	Text wrapping is controlled by the 'text-wrap',
	'wrap-before',
	'wrap-after',
	'wrap-inside',
	and overflow-wrap properties:

	Issue: Add final level 3 overflow-wrap

<h3 id="text-wrap">
Text Wrap Settings: the 'text-wrap' property</h3>

	<pre class="propdef">
	Name: text-wrap
	Value: normal | nowrap | balance
	Initial: normal
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	This property specifies the mode for text wrapping.
	Possible values:

	<dl dfn-for=text-wrap dfn-type=value>
		<dt><dfn>normal</dfn>
		<dd>
			Lines may break at allowed break points,
			as determined by the line-breaking rules in effect.
			Line breaking behavior defined
			for the WJ, ZW, and GL line-breaking classes
			in [[!UAX14]] must be honored.

			Issue: Should this be called ''wrap'' for consistency with 'flex-wrap'?

		<dt><dfn>nowrap</dfn>
		<dd>
			Lines may not break; text that does not fit within the block container
			overflows it.

		<dt><dfn>balance</dfn>
		<dd>
			Same as ''text-wrap/normal'' for inline-level elements.
			For block-level elements that
			contain line boxes as direct children,
			line breaks are chosen to balance
			the <a>inline-size</a> those line boxes consume,
			if better balance than ''text-wrap/normal'' is possible.
			This must not change the number of line boxes
			the block would contain
			if 'text-wrap' were set to ''text-wrap/normal''.

			For balancing purposes,
			the <a>inline-size</a> to consider includes
			any length taken up
			by floats that shorten the line box.
			The <a>inline-size</a> to consider comes before
			any adjustments for justification.
			Line boxes are balanced when the standard deviation
			from the average <a>inline-size</a> consumed
			is reduced over the block
			(including lines that end in a forced break).

			The exact algorithm is UA-defined.

			UAs may treat this value as ''text-wrap/normal'' if there are more than ten lines to balance.

	</dl>

	Regardless of the 'text-wrap' value,
	lines always break at forced breaks:
	for all values,
	line-breaking behavior defined
	for the BK, CR, LF, CM NL, and SG line breaking classes
	in [[!UAX14]] must be honored.

	UAs that allow breaks at punctuation other than spaces
	should prioritize breakpoints.
	For example,
	if breaks after slashes have a lower priority than spaces,
	the sequence “check /etc”
	will never break between the ‘/’ and the ‘e’.
	The UA may use the width of the containing block,
	the text's language,
	and other factors in assigning priorities.
	As long as care is taken to avoid such awkward breaks,
	allowing breaks at appropriate punctuation other than spaces
	is recommended,
	as it results in more even-looking margins,
	particularly in narrow measures.

	<!-- add a sample prioritization algorithm -->

<h3 id="wrap-before">
Inline breaks between boxes: the 'wrap-before'/'wrap-after' properties</h3>

	<pre class="propdef">
	Name: wrap-before, wrap-after
	Value: auto | avoid | avoid-line | avoid-flex | line | flex
	Initial: auto
	Applies to: <a>inline-level</a> boxes and <a>flex items</a>
	Inherited: no
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	These properties specify modifications to break opportunities
	in line breaking (and <a>flex line</a> breaking [[CSS3-FLEXBOX]]).
	Possible values:

	<dl dfn-for="wrap-before, wrap-after" dfn-type=value>
		<dt><dfn>auto</dfn>
		<dd>
			Lines may break at allowed break points
			before and after the box,
			as determined by the line-breaking rules in effect.

		<dt><dfn>avoid</dfn>
		<dd>
			Line breaking is suppressed immediately before/after the box:
			the UA may only break there
			if there are no other valid break points
			in the line.
			If the text breaks,
			line-breaking restrictions are honored as for
			''wrap-before/auto''.

		<dt><dfn>avoid-line</dfn>
		<dd>
			Same as ''wrap-before/avoid'',
			but only for line breaks.

		<dt><dfn>avoid-flex</dfn>
		<dd>
			Same as ''wrap-before/avoid'',
			but only for flex line breaks.

		<dt><dfn>line</dfn>
		<dd>
			Force a line break immediately before/after the box
			if box is an <a>inline-level</a> box.

		<dt><dfn>flex</dfn>
		<dd>
			Force a <a>flex line</a> break immediately before/after the box
			if the box is a <a>flex item</a>
			in a <a href="http://www.w3.org/TR/css-flexbox-1/#multi_line">multi-line flex container</a>.
	</dl>

	Forced line breaks on <a>inline-level</a> boxes propagate upward
	through any parent <a>inline boxes</a>
	the same way forced breaks on <a>block-level</a> boxes propagate upward
	through any parent <a>block boxes</a>
	in the same <a>fragmentation context</a>.
	[[!CSS3-BREAK]]

<h3 id="wrap-inside">
Line breaks within boxes: the 'wrap-inside' property</h3>

	<pre class="propdef">
	Name: wrap-inside
	Value: auto | avoid
	Initial: auto
	Applies to: <a>inline boxes</a>
	Inherited: no
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	<dl dfn-for=wrap-inside dfn-type=value>
		<dt><dfn>auto</dfn>
		<dd>
			Lines may break at allowed break points
			within the box,
			as determined by the line-breaking rules in effect.

		<dt><dfn>avoid</dfn>
		<dd>
			Line breaking is suppressed within the box:
			the UA may only break within the box
			if there are no other valid break points in the line.
			If the text breaks,
			line-breaking restrictions are honored as for
			''wrap-inside/auto''.

			If boxes with ''wrap-inside/avoid'' are nested
			and the UA must break within these boxes,
			a break in an outer box must be used
			before a break within an inner box may be used.
	</dl>

<h4 id="example-avoid">
Example of using 'wrap-inside: avoid' in presenting a footer</h4>

	<div class="example">

		The priority of breakpoints can be set
		to reflect the intended grouping of text.

		Given the rules

		<pre>
			footer { wrap-inside: avoid; }
			venue { wrap-inside: avoid; }
			date { wrap-inside: avoid; }
			place { wrap-inside: avoid; }
		</pre>

		and the following markup:

		<pre>
			&lt;footer>
			&lt;venue>27th Internationalization and Unicode Conference&lt;/venue>
			&amp;#8226; &lt;date>April 7, 2005&lt;/date> &amp;#8226;
			&lt;place>Berlin, Germany&lt;/place>
			&lt;/footer>
		</pre>

		In a narrow window the footer could be broken as

		<pre>
			27th Internationalization and Unicode Conference &#8226;
			April 7, 2005 &#8226; Berlin, Germany
		</pre>

		or in a narrower window as

		<pre>
			27th Internationalization and Unicode
			Conference &#8226; April 7, 2005 &#8226;
			Berlin, Germany
		</pre>

		but not as

		<pre>
			27th Internationalization and Unicode Conference &#8226; April
			7, 2005 &#8226; Berlin, Germany
		</pre>
	</div>

<h2 id="last-line-limits">
Last Line Minimum Length</h2>

	<div class="issue">
		See <a href="http://www.w3.org/mid/0BD85DFF-A147-44EF-B18A-FF03C3D67EF0@verou.me">thread</a>.
		Issue is about requiring a minimum length for lines.
		Common measures seem to be

		<ul>
			<li>At least as long as the text-indent.
			<li>At least X characters.
			<li>Percentage-based.
		</ul>

		Suggestion for value space is ''match-indent | <<length>> | <<percentage>>''
		(with ''Xch'' given as an example to make that use case clear).
		Alternately <<integer>> could actually count the characters.

		It's unclear how this would interact with text balancing (above);
		one earlier proposal had them be the same property
		(with ''100%'' meaning full balancing).

		People have requested word-based limits, but since this is really
		dependent on the length of the word, character-based is better.
	</div>

<h2 id="white-space-property">
Shorthand for White Space and Wrapping: the 'white-space' property</h2>


	<pre class="propdef">
	Name: white-space
	Value: normal | pre | nowrap | pre-wrap | pre-wrap-auto | pre-line
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	This property is a shorthand for 'text-space-collapse', 'text-wrap', and 'text-space-trim'.

	Note: This shorthand combines both inheritable and non-inheritable properties.
	If this is a problem, please inform the CSSWG.

	The following table gives the mapping of the values of the shorthand to its longhands.

	<table class="data">
		<colgroup class="header"></colgroup>
		<colgroup span=3></colgroup>
		<thead>
			<tr>
				<th>'white-space'
				<th>'text-space-collapse'
				<th>'text-wrap'
				<th>'text-space-trim'
		</thead>
		<tbody>
		<tr>
			<th>''white-space/normal''
			<td>''text-space-collapse/collapse''
			<td>''text-wrap/normal''
			<td>''text-space-trim/none''
		<tr>
			<th>''pre''
			<td>''text-space-collapse/preserve''
			<td>''text-wrap/nowrap''
			<td>''text-space-trim/none''
		<tr>
			<th>''nowrap''
			<td>''text-space-collapse/collapse''
			<td>''text-wrap/nowrap''
			<td>''text-space-trim/none''
		<tr>
			<th>''pre-wrap''
			<td>''text-space-collapse/preserve''
			<td>''text-wrap/normal''
			<td>''text-space-trim/none''
		<tr>
			<th>''pre-wrap-auto''
			<td>''text-space-collapse/preserve-auto''
			<td>''text-wrap/normal''
			<td>''text-space-trim/none''
		<tr>
			<th>''pre-line''
			<td>''text-space-collapse/preserve-breaks''
			<td>''text-wrap/normal''
			<td>''text-space-trim/none''
		</tbody>
	</table>

	Issue: Add details from level 3

<h2 id="hyphenation">
Breaking Within Words</h2>

	Issue: Add final level 3 content

<h3 id="hyphenate-character">
Hyphens: the 'hyphenate-character' property</h3>

	<pre class="propdef">
	Name: hyphenate-character
	Value: auto | &lt;string&gt;
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	This property specifies strings that are shown between parts of
	hyphenated words. The <dfn for=hyphenate-character>auto</dfn> value means that the user agent should
	find an appropriate value, preferably from the same source as the
	hyphenation dictionary. If a string is specified, it appears at
	the end of the line before a hyphenation break.

	<div class="example">
		In Latin scripts, the hyphen character (U+2010) is often used to
		indicate that a word has been split. Normally, it will not be
		necessary to set it explicitly. However, this can easily be done:
		<pre>
			article { hyphenate-character: "\2010" }
		</pre>
	</div>

	<p class="note">
		Both hyphens triggered by automatic hyphenation and
		hyphens triggered by soft hyphens are rendered according to
		'hyphenate-character'.

<h3 id="hyphenate-size-limits">
Hyphenation Size Limit: the 'hyphenate-limit-zone' property</h3>

	<pre class="propdef">
	Name: hyphenate-limit-zone
	Value: &lt;percentage&gt; | &lt;length&gt;
	Initial: 0
	Applies to: block containers
	Inherited: yes
	Percentages: refers to width of the line box
	Computed value: as specified
	Media: visual
	</pre>

	<p class="issue">Is 'hyphenate-limit-zone' a good name? Comments/suggestions?

	This property specifies the maximum amount of unfilled space (before
	justification) that may be left in the line box before hyphenation is
	triggered to pull part of a word from the next line back up into the
	current line.

<h3 id="hyphenate-char-limits">
Hyphenation Character Limits: the 'hyphenate-limit-chars' property</h3>

	<pre class="propdef">
	Name: hyphenate-limit-chars
	Value: [ auto | <<integer>> ]{1,3}
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	This property specifies the minimum number of characters in a
	hyphenated word. If the word does not meet the required minimum
	number of characters in the word / before the hyphen / after the
	hyphen, then the word must not be hyphenated. Nonspacing combining
	marks (<span class="issue">Unicode class</span>) and intra-word
	punctuation (Unicode classes P*) do not count towards the minimum.

	If three values are specified, the first value is the required
	minimum for the total characters in a word, the second value is
	the minimum for characters before the hyphenation point, and
	the third value is the minimum for characters after the hyphenation
	point. If the third value is missing, it is the same as the second.
	If the second value is missing,
	then it is ''hyphenate-limit-chars/auto''.
	The ''hyphenate-limit-chars/auto''
	value means that the UA chooses a value that adapts to the current
	layout.

	<p class="note">Unless the UA is able to calculate a better value, it
		is suggested that ''hyphenate-limit-chars/auto'' means 2 for before and after, and 5 for
		the word total.

	<div class="example">
		In the example below, the minimum size of a hyphenated word is
		left to the UA (which means it may vary depending on the language,
		the length of the line, or other factors), but the minimum number
		of characters before and after the hyphenation point is set to 3.
		<pre>
			p { hyphenate-limit-chars: auto 3; }
		</pre>
	</div>

<h3 id="hyphenate-line-limits">
Hyphenation Line Limits: the 'hyphenate-limit-lines' and 'hyphenate-limit-last' properties</h3>

	<pre class="propdef">
	Name: hyphenate-limit-lines
	Value: no-limit | &lt;integer&gt;
	Initial: no-limit
	Applies to: block containers
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>

	This property indicates the maximum number of successive hyphenated
	lines in an element. The ''no-limit'' value means that there is no limit.

	In some cases, user agents may not be able to	honor the specified value.
	(See overflow-wrap.) It is not defined whether hyphenation introduced by
	such emergency breaking influences nearby hyphenation points.

	<pre class="propdef">
	Name: hyphenate-limit-last
	Value: none | always | column | page | spread
	Initial: none
	Applies to: block containers
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	</pre>


	This property indicates hyphenation behavior at the end of elements,
	column, pages and spreads. A spread is a set of two pages that are
	visible to the reader at the same time. Values are:

	<dl dfn-for=hyphenate-limit-lines dfn-type=value>
		<dt><dfn>none</dfn>
		<dd>
			No restrictions imposed.

		<dt><dfn>always</dfn>
		<dd>
			The last full line of the element, or the last line before any
			column, page, or spread break inside the element should not be
			hyphenated.

		<dt><dfn>column</dfn>
		<dd>
			The last line before any column, page, or spread break inside
			the element should not be hyphenated.

		<dt><dfn>page</dfn>
		<dd>
			The last line before page or spread break inside the element
			should not be hyphenated.

		<dt><dfn>spread</dfn>
		<dd>
			The last line before any spread break inside the element should
			not be hyphenated.
	</dl>

	<div class=example>
		<pre>
			p { hyphenate-limit-last: always }
			div.chapter {	hyphenate-limit-last: spread }
		</pre>
	</div>

	<div class=example>

		A paragraph may be formatted like this when 'hyphenate-limit-last: none' is set:
		<pre>
			This is just a
			simple example
			to show Antarc-
			tica.
		</pre>

		With 'hyphenate-limit-last: always' one would get:

		<pre>
			This is just a
			simple example
			to        show
			Antarctica.
		</pre>
	</div>

<h2 id="alignment">
Alignment and Justification</h2>

	Issue: Add final level 3 content

	Add this value to text-align

	<dl dfn-for=text-align dfn-type=value>
		<dt><dfn>&lt;string&gt;</dfn></dt>
		<dd>
			The string must be a single character; otherwise the declaration must
			be <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
			When applied to a table cell, specifies the <dfn>alignment character</dfn>
			around which the cell's contents will align. See
			<a href="#character-alignment">below</a> for further details and
			how this value combines with keywords.
	</dl>

<h3 id="character-alignment">
Character-based Alignment in a Table Column</h3>

	When multiple cells in a column have an alignment character specified,
	the alignment character of each such cell in the column is centered along
	a single column-parallel axis and the rest of the text in the column
	shifted accordingly. (Note that the strings do not have to be the same
	for each cell, although they usually are.)

	<div class="example">

		The following style sheet:

		<pre>
			TD { text-align: "." center }
		</pre>

		will cause the column of dollar figures in the following HTML table:

		<pre class="html-example">
			&lt;TABLE&gt;
			&lt;COL width="40"&gt;
			&lt;TR&gt; &lt;TH&gt;Long distance calls
			&lt;TR&gt; &lt;TD&gt; $1.30
			&lt;TR&gt; &lt;TD&gt; $2.50
			&lt;TR&gt; &lt;TD&gt; $10.80
			&lt;TR&gt; &lt;TD&gt; $111.01
			&lt;TR&gt; &lt;TD&gt; $85.
			&lt;TR&gt; &lt;TD&gt; N/A
			&lt;TR&gt; &lt;TD&gt; $.05
			&lt;TR&gt; &lt;TD&gt; $.06
			&lt;/TABLE&gt;
		</pre>

		to align along the decimal point. The table might be rendered as
		follows:

		<pre>
			+---------------------+
			| Long distance calls |
			+---------------------+
			|        $11.30       |
			|        $22.50       |
			|         $0.80       |
			|    $200567.01       |
			|        $85.         |
			|        N/A          |
			|          $.05       |
			|          $.06       |
			+---------------------+
		</pre>
	</div>

	A keyword value may be specified in conjunction with the &lt;string&gt;
	value; if it is not given, it defaults to ''text-align/right''. This value is used:

	<ul>
		<li>
			when character-based alignment is applied to boxes that are not table
			cells.
		<li>
			when the text wraps to multiple lines (at unforced break points).
		<li>
			when a character-aligned cell spans more than one column. In this
			case the keyword alignment value is used to determine which column's
			axis to align with: the leftmost column for ''text-align/left'', the rightmost
			column for ''text-align/right'' and ''text-align/center'', the startmost column for ''text-align/start'',
			the endmost column for ''text-align/end''.
		<li>
			when the column is wide enough that the character alignment alone does
			not determine the positions of its character-aligned contents. In this
			case the keyword alignment of the first cell in the column with a
			specified alignment character is used to slide the position of the
			character-aligned contents to match the keyword alignment insofar as
			possible without changing the width of the column.
			For ''text-align/center'', the UA may center
			the aligned contents using its extremes, center the alignment axis
			itself (insofar as possible), or optically center the aligned contents
			some other way (such as by taking a weighted average of the extent of
			the cells' contents to either side of the axis).
	</ul>

	<p class="note">
		Right alignment is used by default for character-based
		alignment because numbering systems are almost all left-to-right even
		in right-to-left writing systems, and the primary use case of
		character-based alignment is for numerical alignment.
	</p>

	If the alignment character appears more than once in the text, the first
	instance is used for alignment. If the alignment character does not appear
	in a cell at all, the string is aligned as if the alignment character had
	been inserted at the end of its contents.

	Character-based alignment occurs before table cell width computation so
	that auto width computations can leave enough space for alignment.
	Whether column-spanning cells participate in the alignment prior to
	or after width computation is undefined.
	If width constraints on the cell contents prevent full alignment
	throughout the column, the resulting alignment is undefined.


<h2 id="spacing">
Spacing</h2>

	Issue: Add final level 3 word-spacing, letter-spacing

<h3 id="text-spacing-property">
Character Class Spacing: the 'text-spacing' property</h3>

	<table class="propdef">
		<tr>
			<th>Name:
			<td><dfn>text-spacing</dfn>
		<tr>
			<th>Value:
			<td>normal | none |
					[ trim-start | space-start ] ||
					[ trim-end | space-end | allow-end ] ||
					[ trim-adjacent | space-adjacent ] ||
					no-compress ||
					ideograph-alpha ||
					ideograph-numeric ||
					punctuation
		<tr>
			<th>Initial:
			<td>normal
		<tr>
			<th>Applies to:
			<td>block containers
		<tr>
			<th>Inherited:
			<td>yes
		<tr>
			<th>Percentages:
			<td>N/A
		<tr>
			<th>Media:
			<td>visual
		<tr>
			<th>Computed&#160;value:
			<td>specified value
	</table>

	This property controls spacing between adjacent characters
	on the same line within the same inline formatting context
	using a set of character-class-based rules.
	Such spacing can either be created between or trimmed from the affected glyphs.
	Values are defined as follows:

	<dl dfn-for=text-spacing dfn-type=value>
		<dt><dfn>normal</dfn>
		<dd>
			Specifies the baseline behavior,
			equivalent to ''space-start allow-end trim-adjacent''.

		<dt><dfn>none</dfn>
		<dd>
			Turns off all text-spacing features.
			All fullwidth characters are set with full-width glyphs.

		<dt><dfn>ideograph-alpha</dfn>
		<dd>
			Creates 1/4em extra spacing between runs of
			<a>ideographs</a> and <a>non-ideographic letters</a>.

			Note: A commonly used algorithm for determining this behavior is specified in [[JLREQ]].

		<dt><dfn>ideograph-numeric</dfn>
		<dd>
			Creates 1/4em extra spacing between runs of
			<a>ideographs</a> and <a>non-ideographic numerals</a> glyphs.

			Note: A commonly used algorithm for determining this behavior is specified in [[JLREQ]].

		<dt><dfn>punctuation</dfn>
		<dd>
			Creates extra non-breaking spacing around punctuation as required by language-specific typographic conventions.

			In this level, if the element's content language is French,
			narrow no-break space (U+202F) and no-break space (U+00A0) is inserted
			where required by <a href="http://unicode.org/udhr/n/notes_fra.html">French typographic guidelines</a>.
			Otherwise this value has no effect.
			However future specifications may add automatic spacing behavior for other languages.

		<dt><dfn>space-start</dfn>
		<dd>
			Set <a>fullwidth opening punctuation</a> with full-width glyphs (spaced)
			at the start of each line.

		<dt><dfn>trim-start</dfn>
		<dd>
			Set <a>fullwidth opening punctuation</a> with half-width glyphs (flush)
			at the start of each line.

		<dt><dfn>allow-end</dfn>
		<dd>
			Set <a>fullwidth closing punctuation</a> with half-width glyphs (flush)
			at the end of each line
			if it does not otherwise fit prior to justification;
			otherwise set the punctuation with full-width glyphs.

		<dt><dfn>space-end</dfn>
		<dd>
			Set <a>fullwidth opening punctuation</a> with full-width glyphs (spaced)
			at the start of each line.

		<dt><dfn>trim-end</dfn>
		<dd>
			Set <a>fullwidth closing punctuation</a> with half-width glyphs (flush)
			at the end of each line.

		<dt><dfn>space-adjacent</dfn>
		<dd>
			Set <a>fullwidth opening punctuation</a> with full-width glyphs (spaced)
			when not at the start of the line.
			Set <a>fullwidth closing punctuation</a> with full-width glyphs (spaced)
			when not at the end of the line.

		<dt><dfn>trim-adjacent</dfn>
		<dd>
			Collapse spacing between punctuation glyphs
			<a href="#fullwidth-collapsing">as described below</a>.

		<dt><dfn>no-compress</dfn>
		<dd>
			Justification may not compress text-spacing.
			(If this value is not specified, the justification process may reduce autospacing
			except when the spacing is at the start or end of the line.)

			Note: An example of compression rules is given for Japanese
			in 3.8 Line Adjustment in [[JLREQ]].
	</dl>

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

	At element boundaries, the amount of extra spacing introduced between characters
	is determined by and rendered within the innermost element that contains the boundary.
	If the extra spacing is applied to a particular glyph,
	then the spacing is determined by the innermost element containing that glyph.

	Note: Values other than ''text-spacing/normal'', ''text-spacing/none'', ''trim-start'', ''trim-end'', and ''space-end''
	are at-risk and may be dropped from this level of CSS.
	They are defined here currently to help work out a complete design of this feature.

	Support for this property is <em>optional</em>.
	It is strongly recommended for UAs that wish to support CJK typography.

	Issue: It was requested to add a value for doubling the space after periods.

<h4 id="fullwidth-collapsing">
Fullwidth Punctuation Collapsing</h4>

	Typically, fullwidth characters have glyphs with the same advance width
	as a standard Han character (e.g. 水 U+6C34).
	However, many fullwidth punctuation glyphs only take up part of the fullwidth design space.
	Thus such punctuation are not always set fullwidth.
	Several values of 'text-spacing' allow the author to control
	when such characters are set half-width (typically half the width of an ideograph)
	and when they are set full-width.

	In order to set the text as specified, the UA will need to either
	<ul>
		<li>
			trim (kern) the blank half of the glyphs,
			if they are given full-width and must be set half-width, or
		<li>
			add space to the glyphs,
			if they are given half-width must be set full-width.
	</ul>

	Some fonts use proportional glyphs for fullwidth punctuation characters.
	For such proportional glyphs, the given advance width is considered
	simultaneously full-width and half-width: no space is added or removed.

	<p class="note">
		The advance width of a standard Han character
		can be determined either from font metrics
		such as the OpenType <code>ideo</code> and <code>idtp</code> baselines for the opposite writing mode,
		or by taking the advance width of a Han character such as 水 U+6C34.
		(The opposite writing mode must be used because some fonts are compressed
		so that the characters are not square.)
		More information on OpenType metrics can be found
		<a href="http://www.microsoft.com/typography/otspec/baselinetags.htm#ideoembox">in the OpenType spec</a>.
		Note that if 水 U+6C34, 卜 U+535C, and 一 U+4E00 do not all have the same advance width,
		the font has proportional ideographs
		and the fullwidth advance width cannot be reliably determined by measuring glyphs.

	Unless 'text-spacing' is set to ''space-adjacent'' or ''text-spacing/none''
	(or the font has proportional fullwidth punctuation glyphs),
	the UA must collapse the space typically associated with such full width glyphs
	as follows:

	<ul>
		<li>
			Set <a>fullwidth opening punctuation</a> half-width if the previous character is
			a <a>fullwidth opening punctuation</a>,
			<a>fullwidth middle dot punctuation</a>,
			or ideographic space (U+3000).
			Else set it full-width.
		<li>
			Set <a>fullwidth closing punctuation</a> half-width if the next character is
			a <a>fullwidth closing punctuation</a>,
			<a>fullwidth middle dot punctuation</a>,
			or ideographic space (U+3000).
			Else set it full-width.
		<li>
			Set <a>fullwidth closing punctuation</a> followed by <a>fullwidth opening punctuation</a>
			each at "3/4-width", i.e. halfway between full-width and half-width.
	</ul>

	<div class="example">
		The following example table lists the punctuation pairs
		affected by adjancent-pairs trimming.
		It uses halfwidth equivalents to approximate the trimming effect.

		<table class="data">
			<caption>Demonstration of adjacent-pairs punctuation trimming</caption>
			<thead>
				<tr><th>Combination
						<th>Sample Pair
						<th>Looks Like
			<tbody>
				<tr><th scope=row>Opening&#8212;Opening
						<td><samp lang="ja" class="char">〔</samp>+<samp lang="ja" class="char">（</samp>
						<td><samp lang="ja" class="char">〔</samp><samp lang="ja" class="char half-r">(</samp>
				<tr><th scope=row>Middle Dot&#8212;Opening
						<td><samp lang="ja" class="char">・</samp>+<samp lang="ja" class="char">（</samp>
						<td><samp lang="ja" class="char">・</samp><samp lang="ja" class="char">(</samp>
				<tr><th scope=row>Closing&#8212;Opening
						<td><samp lang="ja" class="char">〕</samp>+<samp lang="ja" class="char">（</samp>
						<td><samp lang="ja" class="char">)<span class="quarter">&#x3000;</span></samp><samp lang="ja" class="char"><span class="quarter">&#x3000;</span>(</samp>
				<tr><th scope=row>Ideographic Space&#8212;Opening
						<td><samp lang="ja" class="char">　</samp>+<samp lang="ja" class="char">（</samp>
						<td><samp lang="ja" class="char">　</samp><samp lang="ja" class="char">(</samp>
				<tr><th scope=row>Closing&#8212;Closing
						<td><samp lang="ja" class="char">）</samp>+<samp lang="ja" class="char">〕</samp>
						<td><samp lang="ja" class="char">)</samp><samp lang="ja" class="char">〕</samp>
				<tr><th scope=row>Closing&#8212;Middle Dot
						<td><samp lang="ja" class="char">）</samp>+<samp lang="ja" class="char">・</samp>
						<td><samp lang="ja" class="char">)</samp><samp lang="ja" class="char">・</samp>
				<tr><th scope=row>Closing&#8212;Ideographic Space
						<td><samp lang="ja" class="char">）</samp>+<samp lang="ja" class="char">　</samp>
						<td><samp lang="ja" class="char">)</samp><samp lang="ja" class="char">　</samp>
		</table>
	</div>

<h4 id="text-spacing-classes">
Text Spacing Character Classes</h4>

	In the context of this property the following definitions apply:

	Issue: Classes and Unicode code points need to be reviewed.

	<dl>
		<dt><dfn>ideographs</dfn>
		<dd>Includes all typographic character units [[CSS3TEXT]] whose base character is listed below:
			<ul>
				<li>All characters in the range of U+3041 to U+30FF,
					except those that belong to Unicode Punctuation [P*] category.
				<li>CJK Strokes (U+31C0 to U+31EF).
				<li>Katakana Phonetic Extensions (U+31F0 to U+31FF).
				<li>All characters that belongs to Han Unicode Script Property [[!UAX24]].
			</ul>

		<dt><dfn>non-ideographic letters</dfn>
		<dd>
			Includes all typographic character units that
			belong to Unicode Letters [L*] and Mark [M*] category,
			except when any of the following conditions are met:
			<ul>
				<li>is defined as <a>ideograph</a>.
				<li>is categorized as East Asian Fullwidth (F) by [[!UAX11]].
				<li>is upright in vertical text flow using the 'text-orientation' property
					or the 'text-combine-upright' property.
			</ul>

		<dt><dfn>non-ideographic numerals</dfn>
		<dd>
			Includes all typographic character units that
			belong to the Unicode Decimal Digit Number [Nd] category,
			except when any of the following conditions are met:
			<ul>
				<li>is categorized as East Asian Fullwidth (F) by [[!UAX11]].
				<li>is upright in vertical text flow using the 'text-orientation' property
					or the 'text-combine-upright' property.
			</ul>

		<dt><dfn>fullwidth opening punctuation</dfn>
		<dd>
			Includes any opening punctuation character (Unicode category <code>Ps</code>)
			that belongs to the CJK Symbols and Punctuation block (U+3000&#8211;U+303F)
			or is categorized as East Asian Fullwidth (F) by [[!UAX11]].
			Also includes LEFT SINGLE QUOTATION MARK (U+2018) and LEFT DOUBLE QUOTATION MARK (U+201C).
			When trimmed, the left (for horizontal text) or top (for vertical text) half is kerned.

		<dt><dfn>fullwidth closing punctuation</dfn>
		<dd>
			Includes any closing punctuation character (Unicode category <code>Pe</code>)
			that belongs to the CJK Symbols and Punctuation block (U+3000&#8211;U+303F)
			or is categorized as East Asian Fullwidth (F) by [[!UAX11]].
			Also includes RIGHT SINGLE QUOTATION MARK (U+2019) and RIGHT DOUBLE QUOTATION MARK (U+201D).
			May also include fullwidth colon punctuation and/or fullwidth dot punctuation (see below).
			When trimmed, the right (for horizontal text) or bottom (for vertical text) half is kerned.

		<dt><dfn>fullwidth middle dot punctuation</dfn>
		<dd>
			Includes MIDDLE DOT (U+00B7), HYPHENATION POINT (U+2027), and KATAKANA MIDDLE DOT (U+30FB).
			May also include fullwidth colon punctuation and/or fullwidth dot punctuation (see below).

		<dt><dfn>fullwidth colon punctuation</dfn>
		<dd>
			Includes FULLWIDTH COLON (U+FF1A) and FULLWIDTH SEMICOLON (U+FF1B).

		<dt><dfn>fullwidth dot punctuation</dfn>
		<dd>
			Includes
			IDEOGRAPHIC COMMA (U+3001),
			IDEOGRAPHIC FULL STOP (U+3002),
			FULLWIDTH COMMA (U+FF0C),
			FULLWIDTH FULL STOP (U+FF0E).
	</dl>

	Whether fullwidth colon punctuation and fullwidth dot punctuation
	should be considered fullwidth closing punctuation or fullwidth middle dot punctuation
	depends on where in the glyph's box the punctuation is drawn.
	If the punctuation is centered,
	then it should be considered middle dot punctuation.
	If the punctuation is drawn to one side (left in horizontal text, top in vertical text)
	and the other half is therefore blank
	then the punctuation should be considered closing punctuation and trimmed accordingly.

	The UA must classify fullwidth colon punctuation and fullwidth dot punctuation
	under either the fullwidth closing punctuation category or the fullwidth middle dot punctuation category
	as appropriate.
	The UA may rely on language conventions and the writing mode (horizontal vs. vertical),
	and/or font information to determine this categorization.
	The UA may also add additional characters to any category as appropriate.

	<div class="note">
		The following informative table summarizes language conventions
		for classifying fullwidth colon and dot punctuation:

		<table class="data">
			<colgroup class="header"></colgroup>
			<colgroup span=2></colgroup>
			<thead>
				<tr><td> <th>colon punctuation <th>dot punctuation
			<tbody>
				<tr><th>Simplified Chinese (horizontal) <td>closing <td>closing
				<tr><th>Simplified Chinese (vertical) <td>closing <td>closing
				<tr><th>Traditional Chinese <td>middle dot <td>middle dot
				<tr><th>Korean <td>middle dot <td>closing
				<tr><th>Japanese <td>middle dot <td>closing
		</table>

		Note that for Chinese fonts at least,
		the author observes that the standard convention is often not followed.
	</div>

<h4 id="japanese-start-edges">
Japanese Paragraph-start Conventions in CSS</h4>

	<div class="example">
		Japanese has three common start-edge typesetting schemes,
		which are distinguished by their handling of opening brackets.

		<div class="figure">
			<img src="opening-brackets-at-line-head.png"
				width="646" height="360"
				alt="The first scheme aligns opening brackets flush with the indent edge
						 on the first line and with the start edge of other lines.
						 The second scheme gives the opening bracket its full width,
						 so that it is effectively indented half an em from the indent edge
						 and from the start edge of other lines.
						 The third scheme aligns the opening brackets flush with the
						 start edge of lines, but hangs them inside the indent on the
						 first line (resulting in an effective half-em indent instead
						 of the full em for paragraphs that begin with an opening bracket).">
			<p class="caption">Positioning of opening brackets at line head [[JLREQ]]
		</div>

		Assuming a UA style sheet of <code>p { margin: 1em 0; }</code>,
		CSS can achieve the Japanese typesetting styles with the following rules:

		<ul>
			<li>
				Brackets flush with indent, flush with other lines (first scheme):
				<pre>
					p { /* Flush alignment */
						margin: 0;
						text-indent: 1em;
						text-spacing: trim-start;
					}
				</pre>

			<li>
				Brackets preserve fullwidth spacing on all lines (second scheme):
				<pre>
					p { /* Fullwidth alignment */
						margin: 0;
						text-indent: 1em;
						text-spacing: normal;
					}
				</pre>

			<li>
				Brackets hang in indent, flush with other lines (third scheme):
				<pre>
					p { /* Hanging alignment */
						margin: 0;
						text-indent: 1em;
						text-spacing: trim-start;
						hanging-punctuation: first;
					}
				</pre>

		</ul>
	</div>

<h2 id="edge-effects">
Edge Effects</h2>

	<p class="note">Add final level 3 content</p>

<h2 class="no-num" id="acknowledgements">
Acknowledgements</h2>

	<p class="note">Add final level 3 list, with Randy Edmunds and Florian Rivoal added</p>