8000 csswg-drafts/css-text/Overview.bs at f82a21710f7c8d691940243050021bf45edf4dbf · xfq/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
2811 lines (2495 loc) · 121 KB

Overview.bs

File metadata and controls

2811 lines (2495 loc) · 121 KB
<li>UAs that allow wrapping at punctuation other than spaces should prioritize breakpoints.
For example, if breaks after slashes are given a lower priority than spaces,
the sequence "check /etc" will never break between the "/" and the "e".
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.
The UA may use the width of the containing block, the text's language,
and other factors in assigning priorities.
<li>Out-of-flow elements do not introduce a <a>forced line break</a>
or <a>soft wrap opportunity</a> in the flow.
<li>The line breaking behavior of a replaced element or other atomic inline
is equivalent to an ideographic character
(Unicode linebreaking class <code>ID</code> [[!UAX14]]),
and additionally, for Web-compatibility, introduces a <a>soft wrap opportunity</a>
between itself and any adjacent U+00A0 NO-BREAK SPACE character.
<li>For <a>soft wrap opportunities</a> created by characters that disappear at the line break (e.g. U+0020 SPACE),
properties on the element containing that character control the line breaking at that opportunity.
For <a>soft wrap opportunities</a> defined by the boundary between two characters,
the properties on the element containing the boundary control breaking.
<!-- http://lists.w3.org/Archives/Public/www-style/2008Dec/0043.html -->
<li>For <a>soft wrap opportunities</a> before the first or after the last character of a box,
the break occurs immediately before/after the box (at its margin edge)
rather than breaking the box between its content edge and the content.
<li>Line breaking in/around Ruby is defined in <a href="https://www.w3.org/TR/css-ruby-1/#line-breaks">CSS Ruby</a> [[!CSS3RUBY]].
</ul>
<h3 id="word-break-property">
Breaking Rules for Letters: the 'word-break' property</h3>
<table class="propdef">
<tr>
<th>Name:</th>
<td><dfn>word-break</dfn></td>
</tr>
<tr>
<th><a href="#values">Value</a>:
<td>normal | keep-all | break-all</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>
<tr>
<th>Animatable:
<td>no
<tr>
<th>Canonical order:
<td>N/A
</table>
<p>This property specifies <a>soft wrap opportunities</a> between letters,
i.e. where it is “normal” and permissible to break lines of text.
It does not affect rules governing the <a>soft wrap opportunities</a>
created by spaces and punctuation.
(See 'line-break' for controls affecting punctuation.)
<div class="example">
<p>For example, in some styles of CJK typesetting, English words are allowed
to break between any two letters, rather than only at spaces or hyphenation points;
this can be enabled with ''word-break:break-all''.
<div class="figure">
<img src="images/break-all.png" alt="A snippet of Japanese text with English in it. The word 'caption' is broken into 'capt' and 'ion' across two lines.">
<p class="caption">An example of English text embedded in Japanese
being broken at an arbitrary point in the word.
</div>
<p>As another example, Korean has two styles of line-breaking:
between any two Korean syllables (''word-break: normal'')
or, like English, mainly at spaces (''word-break: keep-all'').
<pre>각 줄의 마지막에 한글이 올 때 줄 나눔 기 /* break between syllables */
<!-- -->준을 “글자” 또는 “어절” 단위로 한다.</pre>
<pre>각 줄의 마지막에 한글이 올 때 줄 나눔 /* break only at spaces */
<!-- -->기준을 “글자” 또는 “어절” 단위로 한다.</pre>
</div>
<p class="note">
To enable additional break opportunities only in the case of overflow,
see 'overflow-wrap'.
<p>Values have the following meanings:</p>
<dl dfn-for=word-break dfn-type=value>
<dt><dfn>normal</dfn></dt>
View remainder of file in raw view