Overview.src.html

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

    <table class="propdef">
      <tbody>
        <tr>
          <th>Name:</th>
          <td><dfn>text-space-collapse</dfn></td>
        </tr>
        <tr>
          <th>Value:</th>
          <td>collapse | discard | [ [preserve | preserve-breaks] && [ trim-inner || consume-before || consume-after ]</td>
        </tr>
        <tr>
          <th>Initial:</th>
          <td>collapse</td>
        </tr>
        <tr>
          <th>Applies to:</th>
          <td>all elements</td>
        </tr>
        <tr>
          <th>Inherited:</th>
          <td>yes</td>
        </tr>
        <tr>
          <th>Percentages:</th>
          <td>N/A</td>
        </tr>
        <tr>
          <th>Media:</th>
          <td>visual</td>
        </tr>
        <tr>
          <th>Computed&#160;value:</th>
          <td>specified value</td>
        </tr>
      </tbody>
    </table>

    <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 <a href="#white-space-rules">white space processing
      rules</a>:</p>

    <dl>
      <dt><dfn title="white-space:collapse">''collapse''</dfn></dt>
      <dd>This value directs user agents to collapse sequences of white space
        into a single character (or <a href="#line-break-transform">in some
        cases</a>, no character).</dd>
      <dt><dfn title="white-space:preserve">''preserve''</dfn></dt>
      <dd>This value prevents user agents from collapsing sequences
      of white space. Line feeds are preserved as forced line breaks.</dd>
      <dt><dfn title="white-space:preserve-breaks">''preserve-breaks''</dfn></dt>
      <dd>This value collapses white space as for ''collapse'', but preserves
        line feeds as forced line breaks.</dd>
      <dt><dfn title="white-space:discard">''discard''</dfn></dt>
      <dd>This value directs user agents to "discard" all white space in the
        element.
      <dt><dfn title="white-space:trim-inner">''trim-inner''</dfn></dt>
      <dd>For block containers this value directs UAs to discard all whitespace
        at the beginning of the element up to and including the last line feed
        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 line feed 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.</dd>
      <dt><dfn title="white-space:consume-before">''consume-before''</dfn></dt>
      <dd>This value directs the UA to collapse all collapsible whitespace
        immediately before the start of the element.
      <dt><dfn title="white-space:consume-after">''consume-after''</dfn></dt>
      <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 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>


    <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: consume-before; }</pre>
    </div>

    <p class="issue">It's been pointed out that ''trim-inner'', ''consume-before'',
    and ''consume-after'' won't work well because 'text-space-collapse' is
    inherited, meaning that inserting a &lt;span> or &gt;div> would cause more
    white space to be removed than otherwise.

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

    <table class="propdef">
      <tbody>
        <tr>
          <th>Name:</th>
          <td><dfn>white-space</dfn></td>
        </tr>
        <tr>
          <th>Value:</th>
          <td>normal | pre | nowrap | pre-wrap | pre-line</td>
        </tr>
        <tr>
          <th>Initial:</th>
          <td>not defined for shorthand properties</td>
        </tr>
        <tr>
          <th>Applies to:</th>
          <td>all elements</td>
        </tr>
        <tr>
          <th>Inherited:</th>
          <td>yes</td>
        </tr>
        <tr>
          <th>Percentages:</th>
          <td>N/A</td>
        </tr>
        <tr>
          <th>Media:</th>
          <td>visual</td>
        </tr>
        <tr>
          <th>Computed&#160;value:</th>
          <td>see individual properties</td>
        </tr>
      </tbody>
    </table>

    <p>The 'white-space' property is a shorthand for the
      'text-space-collapse' and 'text-wrap' properties.
      Not all combinations are represented.
      Values have the following meanings:</p>

    <dl>
      <dt><dfn title="white-space:normal">''normal''</dfn></dt>
      <dd>Sets 'text-space-collapse' to ''collapse'' and
        'text-wrap' to ''normal''</dd>
      <dt><dfn title="white-space:pre">''pre''</dfn></dt>
      <dd>Sets 'text-space-collapse' to ''preserve'' and
        'text-wrap' to ''none''</dd>
      <dt><dfn title="white-space:nowrap">''nowrap''</dfn></dt>
      <dd>Sets 'text-space-collapse' to ''collapse'' and
        'text-wrap' to ''none''</dd>
      <dt><dfn title="white-space:pre-wrap">''pre-wrap''</dfn></dt>
      <dd>Sets 'text-space-collapse' to ''preserve'' and
        'text-wrap' to ''normal''</dd>
      <dt><dfn title="white-space:pre-line">''pre-line''</dfn></dt>
      <dd>Sets 'text-space-collapse' to ''preserve-breaks'' and
        'text-wrap' to ''normal''</dd>
    </dl>

    <p>The following informative table summarizes the behavior of various
      'white-space' values:</p>

    <table class="data">
      <colgroup class="header"></colgroup>
      <colgroup span=3></colgroup>
      <thead>
        <tr>
          <th></th>
          <th>New Lines</th>
          <th>Spaces and Tabs</th>
          <th>Text Wrapping</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>normal</th>
          <td>Collapse</td>
          <td>Collapse</td>
          <td>Wrap</td>
        </tr>
        <tr>
          <th>pre</th>
          <td>Preserve</td>
          <td>Preserve</td>
          <td>No wrap</td>
        </tr>
        <tr>
          <th>nowrap</th>
          <td>Collapse</td>
          <td>Collapse</td>
          <td>No wrap</td>
        </tr>
        <tr>
          <th>pre-wrap</th>
          <td>Preserve</td>
          <td>Preserve</td>
          <td>Wrap</td>
        </tr>
        <tr>
          <th>pre-line</th>
          <td>Preserve</td>
          <td>Collapse</td>
          <td>Wrap</td>
      </tbody>
    </table>

<h2 id="hyphenation">Hyphenation</h2>

    <p>Hyphenation allows the controlled splitting of words to improve the
      layout of paragraphs. CSS3 Text does not define the exact rules for
      hyphenation, but defines six properties and an at-rule that influence
      hyphenation.

    <p>Whether hyphenation is applied can controlled with the 'hyphens' property.

    <p>The following author controls are not required to be supported for
      the UA to claim conformance to CSS Text Level 4:
    <ul>
      <li>'hyphenate-limit-zone'
      <li>'hyphenate-limit-chars'
      <li>'hyphenate-limit-lines'
    </ul>

    <p>Nonetheless, UAs are strongly encouraged to optimize their line-breaking
      implementation to choose good break points and appropriate hyphenation
      points.

    <p class="note">These controls are optional because for a low-end
      implementation of hyphenation, they are not critical enough; and for
      a high-end implementation of paragraph breaking (such as in
      T<span style="font-variant: small-caps">e</span>&chi;) they are not
      considered especially useful.</p>

    <p>Hyphenation opportunities are not considered when calculating
      ''min-content'' intrinsic sizes.

  <h3 id="hyphens">Hyphenation Control: the 'hyphens' property</h3>

    <table class=propdef>
      <tr>
        <td>Name:
        <td><dfn>hyphens</dfn>
      <tr>
        <th>Value:
        <td>none | manual | auto
      <tr>
        <th>Initial:
        <td>manual
      <tr>
        <th>Applies to:
        <td>all elements
      <tr>
        <th>Inherited:
        <td>yes
      <tr>
        <th>Percentages:
        <td>N/A
      <tr>
        <th>Media:
        <td>visual
      <tr>
        <th>Computed&nbsp;value:
        <td>specified value
    </table>

    <p>This property controls whether hyphenation is allowed to create more
      break opportunities within a line of text. Values have the following
      meanings:

    <dl>
      <dt><dfn title="hyphens:none">''none''</dfn>
        <dd>Words are not broken at line breaks, even if characters inside
          the word suggest line break points.
      <dt><dfn title="hyphens:manual">''manual''</dfn>
        <dd>Words are only broken at line breaks where there are characters
          inside the word that suggest line break opportunities. Characters
          can be explicit or conditional.
        <div class="example">
        <p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an
          explicit hyphen. Unicode Standard Annex #14 describes the
          <a href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens in</a>
          Unicode line breaking. [[!UAX14]]
        </div>

        <div class="example">
          <p>In HTML, &amp;shy; represents the soft hyphen character which
            suggests a line break opportunity.
          <pre>ex&amp;shy;ample</pre>
        </div>
      <dt><dfn title="hyphens:auto">''auto''</dfn>
        <dd>Words can be broken at appropriate hyphenation points either as
          determined by hyphenation characters inside the word or as
          determined automatically by a language-appropriate hyphenation
          resource.
          Conditional hyphenation characters inside a word, if present,
          take priority over automatic resources when determining
          hyphenation points within the word.
    </dl>

    <p>Correct automatic hyphenation requires a hyphenation resource
      appropriate to the language of the text being broken. The UA is
      therefore only required to automatically hyphenate text for which
      the author has declared a language (e.g. via HTML <code>lang</code>
      or XML <code>xml:lang</code>) and for which it has an appropriate
      hyphenation resource.

    <p>When shaping scripts such as Arabic are allowed to break within words
      due to hyphenation, the characters must still be shaped as if the word
      were not broken.</p>

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

    <table class=propdef>
        <tr>
          <th>Name:
          <td><dfn>hyphenate-character</dfn>
        <tr>
          <th>Value:
          <td>auto | &lt;string>
        <tr>
          <th>Initial:
          <td>auto
        <tr>
          <th>Applies to:
          <td>all elements
        <tr>
          <th>Inherited:
          <td>yes
        <tr>
          <th>Percentages:
          <td>N/A
        <tr>
          <th>Media:
          <td>visual
        <tr>
          <th>Computed&nbsp;value:
          <td>specified value
    </table>

    <p>This property specifies strings that are shown between parts of
      hyphenated words. The 'auto' 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">
      <p>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>

    <table class=propdef>
      <tr>
        <th>Name:
        <td><dfn>hyphenate-limit-zone</dfn>
      <tr>
        <th>Value:
        <td>&lt;percentage> | &lt;length>
      <tr>
        <th>Initial:
        <td>0
      <tr>
        <th>Applies to:
        <td>block containers
      <tr>
        <th>Inherited:
        <td>yes
      <tr>
        <th>Percentages:
        <td>refers to width of the line box
      <tr>
        <th>Media:
        <td>visual
      <tr>
        <th>Computed&nbsp;value:
        <td>specified value
    </table>

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

    <p>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>

    <table class=propdef>
      <tr>
        <th>Name:
        <td><dfn>hyphenate-limit-chars</dfn>
      <tr>
        <th>Value:
        <td>[auto | &lt;integer&gt;]{1,3}
      <tr>
        <th>Initial:
        <td>auto
      <tr>
        <th>Applies to:
        <td>all elements
      <tr>
        <th>Inherited:
        <td>yes
      <tr>
        <th>Percentages:
        <td>N/A
      <tr>
        <th>Media:
        <td>visual
      <tr>
        <th>Computed&nbsp;value:
        <td>specified value
    </table>

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

    <p>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 ''auto''. The ''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 ''auto'' means 2 for before and after, and 5 for
      the word total.

    <div class="example">
      <p>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>

    <table class=propdef>
      <tr>
        <th>Name:
        <td><dfn>hyphenate-limit-lines</dfn>
      <tr>
        <th>Value:
        <td>no-limit | &lt;integer>
      <tr>
        <th>Initial:
        <td>no-limit
      <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&nbsp;value:
        <td>specified value
    </table>

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

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

    <table class=propdef>
      <tr>
        <th>Name:
        <td><dfn>hyphenate-limit-last</dfn>
      <tr>
        <th>Value:
        <td>none | always | column | page | spread
      <tr>
        <th>Initial:
        <td>none
      <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&nbsp;value:
        <td>specified value
    </table>

    <p>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>
      <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>
      <p>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>

      <p>With 'hyphenate-limit-last: always' one would get:

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

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

  <p>Text wrapping is controlled by the 'text-wrap' and 'overflow-wrap' properties:</p>

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

    <table class="propdef">
      <tbody>
        <tr>
          <th>Name:</th>
          <td><dfn>text-wrap</dfn></td>
        </tr>
        <tr>
          <th>Value:</th>
          <td>normal | none | avoid</td>
        </tr>
        <tr>
          <th>Initial:</th>
          <td>normal</td>
        </tr>
        <tr>
          <th>Applies to:</th>
          <td>all elements</td>
        </tr>
        <tr>
          <th>Inherited:</th>
          <td>yes</td>
        </tr>
        <tr>
          <th>Percentages:</th>
          <td>N/A</td>
        </tr>
        <tr>
          <th>Media:</th>
          <td>visual</td>
        </tr>
        <tr>
          <th>Computed&#160;value:</th>
          <td>specified value</td>
        </tr>
      </tbody>
    </table>

    <p>This property specifies the mode for text wrapping. Possible values:</p>

    <dl>
    <dt><dfn title="text-wrap:normal">''normal''</dfn></dt>
    <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.
    <dt><dfn title="text-wrap:none">''none''</dfn></dt>
    <dd>Lines may not break; text that does not fit within the block container
      overflows it.</dd>
    <dt><dfn title="text-wrap:avoid">''avoid''</dfn></dt>
    <dd>Line breaking is suppressed within the element: the UA may only break
      within the element if there are no other valid break points in the
      line. If the text breaks, line-breaking restrictions are honored as for
      'normal'.
    </dl>

    <p>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.</p>

    <p>When <span class="property">'text-wrap'</span> is set to 'normal' or
      'avoid', 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.</p>

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

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

    <div class="example">
      <p>The priority of breakpoints can be set to reflect the intended
        grouping of text.</p>

      <p>Given the rules</p>
      <pre>
<!-- -->footer { text-wrap: avoid; /* inherits to all descendants */ }
      </pre>
      <p>and the following markup:</p>
      <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>

      <p>In a narrow window the footer could be broken as</p>
      <pre>
<!-- -->27th Internationalization and Unicode Conference &#8226;
<!-- -->April 7, 2005 &#8226; Berlin, Germany
      </pre>
      <p>or in a narrower window as</p>
      <pre>
<!-- -->27th Internationalization and Unicode
<!-- -->Conference &#8226; April 7, 2005 &#8226;
<!-- -->Berlin, Germany
      </pre>
      <p>but not as</p>
      <pre>
<!-- -->27th Internationalization and Unicode Conference &#8226; April
<!-- -->7, 2005 &#8226; Berlin, Germany
      </pre>
    </div>