Title: CSS Text Module Level 4
Shortname: css-text
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-text-4/
TR: https://www.w3.org/TR/css-text-4/
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Koji Ishii, Google, kojiishi@gmail.com, w3cid 45369
Editor: Alan Stearns, Adobe Systems, stearns@adobe.com, w3cid 46659
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

spec: css-text-3; type: property
	text: text-align
	text: letter-spacing
	text: word-spacing

Introduction

Transforming Text

White Space Processing

White Space Collapsing: the 'text-space-collapse' property

	Name: text-space-collapse
	Value: collapse | discard | preserve | preserve-breaks | preserve-spaces
	Initial: collapse
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	

collapse

This value directs user agents to collapse sequences of white space into a single character (or in some cases, no character).

preserve

This value prevents user agents from collapsing sequences of white space. Segment breaks are preserved as forced line breaks.

preserve-breaks

This value collapses white space as for ''collapse'', but preserves segment breaks as forced line breaks.

preserve-spaces

This value prevents user agents from collapsing sequences of white space, and converts tabs and segment breaks to spaces. (This value is intended to match the behavior of xml:space="preserve" in SVG.)

discard

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?

			@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-trim: trim-inner;
			}
		

White Space Trimming: the 'text-space-trim' property

	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
	

trim-inner

For block containers this value directs UAs to discard all whitespace at the beginning of the element up to and including the last segment break 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 segment break 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.

discard-before

This value directs the UA to collapse all collapsible whitespace immediately before the start of the element.

discard-after

This value directs the UA to collapse all collapsible whitespace immediately after the end of the element.

			dt { display: inline; }
			dt + dt:before { content: ", "; text-space-trim: discard-before; }
		

Line Breaking and Word Boundaries

Text Wrapping

Text Wrap Settings: the 'text-wrap' property

	Name: text-wrap
	Value: wrap | nowrap | balance | multi-line
	Initial: wrap
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	

wrap

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. The exact algorithm is UA-defined. The algorithm may consider multiple lines when making break decisions. The UA may bias for speed over best layout.

nowrap

Lines may not break; text that does not fit within the block container overflows it.

balance

Same as ''text-wrap/wrap'' for inline-level elements. For block-level elements that contain line boxes as direct children, line breaks are chosen to balance the remaining (empty) space in each line box, if better balance than ''text-wrap/wrap'' is possible. This must not change the number of line boxes the block would contain if 'text-wrap' were set to ''text-wrap/wrap''. The remaining space to consider is that which remains after placing floats and inline content, but before any adjustments due to text justification. Line boxes are balanced when the standard deviation from the average inline-size of the remaining space in each line box 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/wrap'' if there are more than ten lines to balance.

multi-line

Same as ''text-wrap/wrap'' for inline-level elements. Same as ''text-wrap/wrap'' for block-level elements, except as below. The exact algorithm is UA-defined. The algorithm should consider multiple lines when making break decisions. The UA should bias for best layout over speed. ISSUE: This feature does not have CSSWG consensus, it is being proposed in Issue 672.

Inline breaks between boxes: the 'wrap-before'/'wrap-after' properties

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

auto

Lines may break at allowed break points before and after the box, as determined by the line-breaking rules in effect.

avoid

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''.

avoid-line

Same as ''wrap-before/avoid'', but only for line breaks.

avoid-flex

Same as ''wrap-before/avoid'', but only for flex line breaks.

line

Force a line break immediately before/after the box if the box is an inline-level box.

flex

Force a flex line break immediately before/after the box if the box is a flex item in a multi-line flex container.

Line breaks within boxes: the 'wrap-inside' property

	Name: wrap-inside
	Value: auto | avoid
	Initial: auto
	Applies to: inline boxes
	Inherited: no
	Percentages: n/a
	Computed value: as specified
	Media: visual
	

auto

Lines may break at allowed break points within the box, as determined by the line-breaking rules in effect.

avoid

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.

Example of using 'wrap-inside: avoid' in presenting a footer

			footer { wrap-inside: avoid; }
			venue { wrap-inside: avoid; }
			date { wrap-inside: avoid; }
			place { wrap-inside: avoid; }
		

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

			27th Internationalization and Unicode Conference •
			April 7, 2005 • Berlin, Germany
		

			27th Internationalization and Unicode
			Conference • April 7, 2005 •
			Berlin, Germany
		

			27th Internationalization and Unicode Conference • April
			7, 2005 • Berlin, Germany
		

Last Line Minimum Length

Shorthand for White Space and Wrapping: the 'white-space' property

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

Breaking Within Words

Hyphens: the 'hyphenate-character' property

	Name: hyphenate-character
	Value: auto | <string>
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	

			article { hyphenate-character: "\2010" }
		

Hyphenation Size Limit: the 'hyphenate-limit-zone' property

	Name: hyphenate-limit-zone
	Value: <percentage> | <length>
	Initial: 0
	Applies to: block containers
	Inherited: yes
	Percentages: refers to width of the line box
	Computed value: as specified
	Media: visual
	

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.

Hyphenation Character Limits: the 'hyphenate-limit-chars' property

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

			p { hyphenate-limit-chars: auto 3; }
		

Hyphenation Line Limits: the 'hyphenate-limit-lines' and 'hyphenate-limit-last' properties

	Name: hyphenate-limit-lines
	Value: no-limit | <integer>
	Initial: no-limit
	Applies to: block containers
	Inherited: yes
	Percentages: n/a
	Computed value: as specified
	Media: visual
	

	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
	

none

No restrictions imposed.

always

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.

column

The last line before any column, page, or spread break inside the element should not be hyphenated.

page

The last line before page or spread break inside the element should not be hyphenated.

spread

The last line before any spread break inside the element should not be hyphenated.

			p { hyphenate-limit-last: always }
			div.chapter {	hyphenate-limit-last: spread }
		

			This is just a
			simple example
			to show Antarc-
			tica.
		

			This is just a
			simple example
			to        show
			Antarctica.
		

Alignment and Justification

<string>

The string must be a single character; otherwise the declaration must be ignored. When applied to a table cell, specifies the alignment character around which the cell's contents will align. See below for further details and how this value combines with keywords.

Character-based Alignment in a Table Column

Is this intended to say that it's the centers of the alignment characters that should be aligned? It's not clear that's what it says, but that (or a different behavior) needs to be specified, to describe what happens when different occurrences of the alignment character are in different fonts. (Further, is that the intended behavior? Probably the most significant use case to consider is bold vs. non-bold text, which only varies slightly in width.) [feedback] [minutes face-to-face 2016-02-02 10:00 AM]

			TD { text-align: "." center }
		

			<TABLE>
			<COL width="40">
			<TR> <TH>Long distance calls
			<TR> <TD> $1.30
			<TR> <TD> $2.50
			<TR> <TD> $10.80
			<TR> <TD> $111.01
			<TR> <TD> $85.
			<TR> <TD> N/A
			<TR> <TD> $.05
			<TR> <TD> $.06
			</TABLE>
		

			+---------------------+
			| Long distance calls |
			+---------------------+
			|         $1.30       |
			|         $2.50       |
			|        $10.80       |
			|       $111.01       |
			|        $85.         |
			|        N/A          |
			|          $.05       |
			|          $.06       |
			+---------------------+
		

• when character-based alignment is applied to boxes that are not table cells.
• when the text wraps to multiple lines (at unforced break points).
• 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''.
• 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).

This needs to specify what text is searched for the alignment character. Is it only in-flow text whose containing block is the cell? Or is text within any in-flow descendants in the block formatting context established by the cell considered? If so, is it considered only as long as its 'text-align' property is consistent with the cell's? (Consistent in the alignment character, or fully consistent?)

This behavior of aligning as though the alignment character had been inserted at the end of the contents of the cell, combined with center-of-character alignment, will produce gaps on the end-side of lines that are alone on a line with <string> text-alignment, when none of the lines of the column has the alignment character, or, more importantly, when some of the lines do have the alignment character, but the column is not laid out at its max-content width. This is probably undesirable.

When the alignment character is inserted at the end of the contents, which font is used? (In particular, if the alignment character might be within a descendant block, is it the font of the block or the font of the table cell? Or if the insertion is at a forced break within an inline, does it use the font of the inline or the font of the block or cell?)

This should have a formal definition of how character alignment affects the min-content and max-content intrinsic widths (of table columns and all content that can be inside table columns). Max-content intrinsic widths need to be split into three numbers (assuming that it's the centers of the alignment character that are aligned): one for widths without alignment characters, one for widths on the inline-start side of the center of the alignment character, one for widths on the inline-end side of the center of the alignment character. This operates based on all segments of text between forced breaks for max-content widths. For min-content widths, segments of text between forced breaks that contain optional breaks within them should clearly contribute only to the without-alignment-character width. However, it's less clear whether all min-content widths should work this way, or whether segments between forced breaks that do not have optional breaks (and perhaps only those that actually contain the alignment character) should contribute to start-side-of-alignment-character and end-side-of-alignment-character min-content widths instead; this choice is a tradeoff between the meaning of min-content sizing of a table meaning the narrowest reasonable size versus honoring alignment characters in more cases. Another option might be to use whether line-breaking of optional breaks is allowed as a control for which behavior to use.

Formally defining the intrinsic width contributions of column-spanning cells with <string> values of 'text-align' is a complicated (although straightforward) extension of the decisions made for intrinsic width contributions of non-column-spanning cells; this should also be formally defined. Contributions end up being made to the split intrinsic widths of the startmost or endmost column (whichever is used for alignment), and to the without-alignment-character intrinsic widths of the other spanned columns.

Spacing

Character Class Spacing: the 'text-spacing' property

normal

Specifies the baseline behavior, equivalent to ''space-start allow-end trim-adjacent''.

none

Turns off all text-spacing features. All fullwidth characters are set with full-width glyphs.

ideograph-alpha

Creates 1/4em extra spacing between runs of ideographs and non-ideographic letters. Note: A commonly used algorithm for determining this behavior is specified in [[JLREQ]].

ideograph-numeric

Creates 1/4em extra spacing between runs of ideographs and non-ideographic numerals glyphs. Note: A commonly used algorithm for determining this behavior is specified in [[JLREQ]].

punctuation

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 French typographic guidelines. Otherwise this value has no effect. However future specifications may add automatic spacing behavior for other languages.

space-start

Set fullwidth opening punctuation with full-width glyphs (spaced) at the start of each line.

trim-start

Set fullwidth opening punctuation with half-width glyphs (flush) at the start of each line.

allow-end

Set fullwidth closing punctuation 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.

space-end

Set fullwidth closing punctuation with full-width glyphs (spaced) at the end of each line.

trim-end

Set fullwidth closing punctuation with half-width glyphs (flush) at the end of each line.

space-adjacent

Set fullwidth opening punctuation with full-width glyphs (spaced) when not at the start of the line. Set fullwidth closing punctuation with full-width glyphs (spaced) when not at the end of the line.

trim-adjacent

Collapse spacing between punctuation glyphs as described below.

no-compress

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]].

Fullwidth Punctuation Collapsing

• trim (kern) the blank half of the glyphs, if they are given full-width and must be set half-width, or
• add space to the glyphs, if they are given half-width must be set full-width.

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

Text Spacing Character Classes

ideographs

Includes all typographic character units [[CSS3TEXT]] whose base character is listed below:

• All characters in the range of U+3041 to U+30FF, except those that belong to Unicode Punctuation [P*] category.
• CJK Strokes (U+31C0 to U+31EF).
• Katakana Phonetic Extensions (U+31F0 to U+31FF).
• All characters that belongs to Han Unicode Script Property [[!UAX24]].

non-ideographic letters

Includes all typographic character units that belong to Unicode Letters [L*] and Mark [M*] category, except when any of the following conditions are met:

• is defined as ideograph.
• is categorized as East Asian Fullwidth (F) by [[!UAX11]].
• is upright in vertical text flow using the 'text-orientation' property or the 'text-combine-upright' property.

non-ideographic numerals

Includes all typographic character units that belong to the Unicode Decimal Digit Number [Nd] category, except when any of the following conditions are met:

• is categorized as East Asian Fullwidth (F) by [[!UAX11]].
• is upright in vertical text flow using the 'text-orientation' property or the 'text-combine-upright' property.

fullwidth opening punctuation

Includes any opening punctuation character (Unicode category Ps) that belongs to the CJK Symbols and Punctuation block (U+3000–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.

fullwidth closing punctuation

Includes any closing punctuation character (Unicode category Pe) that belongs to the CJK Symbols and Punctuation block (U+3000–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.

fullwidth middle dot punctuation

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).

fullwidth colon punctuation

Includes FULLWIDTH COLON (U+FF1A) and FULLWIDTH SEMICOLON (U+FF1B).

fullwidth dot punctuation

Includes IDEOGRAPHIC COMMA (U+3001), IDEOGRAPHIC FULL STOP (U+3002), FULLWIDTH COMMA (U+FF0C), FULLWIDTH FULL STOP (U+FF0E).

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.

Japanese Paragraph-start Conventions in CSS

Japanese has three common start-edge typesetting schemes, which are distinguished by their handling of opening brackets.

Positioning of opening brackets at line head [[JLREQ]]

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

• Brackets flush with indent, flush with other lines (first scheme):

  					p { /* Flush alignment */
  						margin: 0;
  						text-indent: 1em;
  						text-spacing: trim-start;
  					}
  				

• Brackets preserve fullwidth spacing on all lines (second scheme):

  					p { /* Fullwidth alignment */
  						margin: 0;
  						text-indent: 1em;
  						text-spacing: normal;
  					}
  				

• Brackets hang in indent, flush with other lines (third scheme):

  					p { /* Hanging alignment */
  						margin: 0;
  						text-indent: 1em;
  						text-spacing: trim-start;
  						hanging-punctuation: first;
  					}
  				

Edge Effects

Acknowledgements