@@ -149,7 +149,11 @@ Line Breaking and Word Boundaries</h2>
149
149
<h2 id="wrapping">
150
150
Text Wrapping</h2>
151
151
152
- Text wrapping is controlled by the 'text-wrap' and overflow-wrap properties:
152
+ Text wrapping is controlled by the 'text-wrap' ,
153
+ 'wrap-before' ,
154
+ 'wrap-after' ,
155
+ 'wrap-inside' ,
156
+ and overflow-wrap properties:
153
157
154
158
Issue: Add final level 3 overflow-wrap
155
159
@@ -158,7 +162,7 @@ Text Wrap Settings: the 'text-wrap' property</h3>
158
162
159
163
<pre class="propdef">
160
164
Name : text-wrap
161
- Value : normal | nowrap | avoid | balance
165
+ Value : normal | nowrap | balance
162
166
Initial : normal
163
167
Applies to : all elements
164
168
Inherited : yes
@@ -167,30 +171,23 @@ Text Wrap Settings: the 'text-wrap' property</h3>
167
171
Media : visual
168
172
</pre>
169
173
170
- This property specifies the mode for text wrapping. Possible values:
174
+ This property specifies the mode for text wrapping.
175
+ Possible values:
171
176
172
177
<dl dfn-for=text-wrap dfn-type=value>
173
178
<dt> <dfn>normal</dfn>
174
179
<dd>
175
- Lines may break at allowed break points, as determined by the
176
- line-breaking rules in effect. Line breaking behavior defined
177
- for the WJ, ZW, and GL line-breaking classes in
178
- [[!UAX14]] must be honored.
180
+ Lines may break at allowed break points,
181
+ as determined by the line-breaking rules in effect.
182
+ Line breaking behavior defined
183
+ for the WJ, ZW, and GL line-breaking classes
184
+ in [[!UAX14]] must be honored.
179
185
180
186
<dt> <dfn>nowrap</dfn>
181
187
<dd>
182
188
Lines may not break; text that does not fit within the block container
183
189
overflows it.
184
190
185
- <dt> <dfn>avoid</dfn>
186
- <dd>
187
- Line breaking is suppressed within the element: the UA may only break
188
- within the element if there are no other valid break points in the
189
- line. If the text breaks, line-breaking restrictions are honored as for
190
- ''text-wrap/normal'' .
191
-
192
- Issue: Should this maybe be handled by 'break-inside' ?
193
-
194
191
<dt> <dfn>balance</dfn>
195
192
<dd>
196
193
Same as ''text-wrap/normal'' for inline-level elements.
@@ -220,46 +217,147 @@ Text Wrap Settings: the 'text-wrap' property</h3>
220
217
221
218
</dl>
222
219
223
- Regardless of the 'text-wrap' value, lines always break at forced breaks:
224
- for all values, line-breaking behavior defined for the BK, CR, LF, CM
225
- NL, and SG line breaking classes in [[!UAX14]] must
226
- be honored.
220
+ Regardless of the 'text-wrap' value,
221
+ lines always break at forced breaks:
222
+ for all values,
223
+ line-breaking behavior defined
224
+ for the BK, CR, LF, CM NL, and SG line breaking classes
225
+ in [[!UAX14]] must be honored.
227
226
228
- When <span class="property"> 'text-wrap' </span> is set to ''text-wrap/normal'' or
229
- ''text-wrap/avoid'' , UAs that allow breaks at punctuation other than spaces
227
+ UAs that allow breaks at punctuation other than spaces
230
228
should prioritize breakpoints.
231
- For example, if breaks after slashes have a lower priority than spaces,
232
- the sequence “check /etc” will never break between the ‘/’ and the ‘e’.
233
- The UA may use the width of the containing block, the text's language,
229
+ For example,
230
+ if breaks after slashes have a lower priority than spaces,
231
+ the sequence “check /etc”
232
+ will never break between the ‘/’ and the ‘e’.
233
+ The UA may use the width of the containing block,
234
+ the text's language,
234
235
and other factors in assigning priorities.
235
- As long as care is taken to avoid such awkward breaks, allowing breaks at
236
- appropriate punctuation other than spaces is recommended, as it results
237
- in more even-looking margins, particularly in narrow measures.</p>
236
+ As long as care is taken to avoid such awkward breaks,
237
+ allowing breaks at appropriate punctuation other than spaces
238
+ is recommended,
239
+ as it results in more even-looking margins,
240
+ particularly in narrow measures.
238
241
239
242
<!-- add a sample prioritization algorithm -->
240
243
244
+ <h3 id="wrap-before">
245
+ Inline breaks between boxes: the 'wrap-before'/'wrap-after' properties</h3>
246
+
247
+ <pre class="propdef">
248
+ Name : wrap-before, wrap-after
249
+ Value : auto | avoid | avoid-line | avoid-flex | line | flex
250
+ Initial : auto
251
+ Applies to : all elements
252
+ Inherited : no
253
+ Percentages : n/a
254
+ Computed value : as specified
255
+ Media : visual
256
+ </pre>
257
+
258
+ These properties specify modifications to break opportunities
259
+ in line and flex line breaking
260
+ Possible values:
261
+
262
+ <dl dfn-for=wrap-before dfn-type=value>
263
+ <dt> <dfn>auto</dfn>
264
+ <dd>
265
+ Lines may break at allowed break points
266
+ before and after the element,
267
+ as determined by the line-breaking rules in effect.
268
+
269
+ <dt> <dfn>avoid</dfn>
270
+ <dd>
271
+ Flex and line breaking is suppressed before/after the element:
272
+ the UA may only break before/after the element
273
+ if there are no other valid break points
274
+ in the line.
275
+ If the text breaks,
276
+ line-breaking restrictions are honored as for
277
+ ''wrap-before/auto'' .
278
+
279
+ <dt> <dfn>avoid-line</dfn>
280
+ <dd>
281
+ Same as ''wrap-before/avoid'' ,
282
+ but only for line breaks.
283
+
284
+ <dt> <dfn>avoid-flex</dfn>
285
+ <dd>
286
+ Same as ''wrap-before/avoid'' ,
287
+ but only for flex breaks.
288
+
289
+ <dt> <dfn>line</dfn>
290
+ <dd>
291
+ Force a line break before/after the element
292
+ if this is a valid line break point.
293
+
294
+ <dt> <dfn>flex</dfn>
295
+ <dd>
296
+ Force a flex break before/after the element
297
+ if this is a valid flex line break point
298
+ and the element is a flex item
299
+ in a multi-line flex container.
300
+
301
+ <h3 id="wrap-inside">
302
+ Line breaks within boxes: the 'wrap-inside' property</h3>
303
+
304
+ <pre class="propdef">
305
+ Name : wrap-inside
306
+ Value : auto | avoid
307
+ Initial : auto
308
+ Applies to : all elements
309
+ Inherited : no
310
+ Percentages : n/a
311
+ Computed value : as specified
312
+ Media : visual
313
+ </pre>
314
+
315
+ <dl dfn-for=wrap-inside dfn-type=value>
316
+ <dt> <dfn>auto</dfn>
317
+ <dd>
318
+ Lines may break at allowed break points
319
+ within the element,
320
+ as determined by the line-breaking rules in effect.
321
+
322
+ <dt> <dfn>avoid</dfn>
323
+ <dd>
324
+ Line breaking is suppressed within the element:
325
+ the UA may only break within the element
326
+ if there are no other valid break points in the line.
327
+ If the text breaks,
328
+ line-breaking restrictions are honored as for
329
+ ''wrap-inside/auto'' .
330
+
331
+ If elements with ''wrap-inside/avoid'' are nested
332
+ and the UA must break within these elements,
333
+ a break in an outer element must be used
334
+ before a break within an inner element may be used.
335
+
241
336
<h4 id="example-avoid">
242
- Example of using 'text- wrap: avoid' in presenting a footer</h4>
337
+ Example of using 'wrap-inside : avoid' in presenting a footer</h4>
243
338
244
339
<div class="example">
245
340
246
- The priority of breakpoints can be set to reflect the intended
247
- grouping of text.
341
+ The priority of breakpoints can be set
342
+ to reflect the intended grouping of text.
248
343
249
344
Given the rules
250
345
251
346
<pre>
252
- footer { text-wrap: avoid; /* inherits to all descendants */ }
347
+ footer { wrap-inside: avoid; }
348
+ venue { wrap-inside: avoid; }
349
+ date { wrap-inside: avoid; }
350
+ place { wrap-inside: avoid; }
253
351
</pre>
254
352
255
353
and the following markup:
256
354
257
355
<pre>
258
- < footer>
259
- < venue>27th Internationalization and Unicode Conference< /venue>
260
- & #8226; < date>April 7, 2005< /date> & #8226;
261
- < place>Berlin, Germany< /place>
262
- < /footer>
356
+ < footer>
357
+ < venue> 27th Internationalization and Unicode Conference< /venue>
358
+ • < date> April 7, 2005< /date> •
359
+ < place> Berlin, Germany< /place>
360
+ < /footer>
263
361
</pre>
264
362
265
363
In a narrow window the footer could be broken as
@@ -336,7 +434,7 @@ Hyphens: the 'hyphenate-character' property</h3>
336
434
</pre>
337
435
338
436
This property specifies strings that are shown between parts of
339
- hyphenated words. The <dfn for=hyphenate-character>'' auto'' </dfn> value means that the user agent should
437
+ hyphenated words. The <dfn for=hyphenate-character>auto</dfn> value means that the user agent should
340
438
find an appropriate value, preferably from the same source as the
341
439
hyphenation dictionary. If a string is specified, it appears at
342
440
the end of the line before a hyphenation break.
@@ -402,12 +500,14 @@ Hyphenation Character Limits: the 'hyphenate-limit-chars' property</h3>
402
500
the minimum for characters before the hyphenation point, and
403
501
the third value is the minimum for characters after the hyphenation
404
502
point. If the third value is missing, it is the same as the second.
405
- If the second value is missing, then it is ''auto'' . The ''auto''
503
+ If the second value is missing,
504
+ then it is ''hyphenate-limit-chars/auto'' .
505
+ The ''hyphenate-limit-chars/auto''
406
506
value means that the UA chooses a value that adapts to the current
407
507
layout.
408
508
409
509
<p class="note"> Unless the UA is able to calculate a better value, it
410
- is suggested that ''auto'' means 2 for before and after, and 5 for
510
+ is suggested that ''hyphenate-limit-chars/ auto'' means 2 for before and after, and 5 for
411
511
the word total.
412
512
413
513
<div class="example">
@@ -532,7 +632,7 @@ Alignment and Justification</h2>
532
632
<h3 id="character-alignment">
533
633
Character-based Alignment in a Table Column</h3>
534
634
535
- When multiple cells in a column have an <i> alignment character</i> specified,
635
+ When multiple cells in a column have an alignment character specified,
536
636
the alignment character of each such cell in the column is centered along
537
637
a single column-parallel axis and the rest of the text in the column
538
638
shifted accordingly. (Note that the strings do not have to be the same
@@ -693,14 +793,14 @@ Character Class Spacing: the 'text-spacing' property</h3>
693
793
<dt> <dfn>ideograph-alpha</dfn>
694
794
<dd>
695
795
Creates 1/4em extra spacing between runs of
696
- <i > ideographs</i > and <i > non-ideographic letters</i > .
796
+ <a >ideographs</a > and <a >non-ideographic letters</a > .
697
797
698
798
Note: A commonly used algorithm for determining this behavior is specified in [[JLREQ]] .
699
799
700
800
<dt> <dfn>ideograph-numeric</dfn>
701
801
<dd>
702
802
Creates 1/4em extra spacing between runs of
703
- <i > ideographs</i > and <i > non-ideographic numerals</i > glyphs.
803
+ <a >ideographs</a > and <a >non-ideographic numerals</a > glyphs.
704
804
705
805
Note: A commonly used algorithm for determining this behavior is specified in [[JLREQ]] .
706
806
@@ -716,36 +816,36 @@ Character Class Spacing: the 'text-spacing' property</h3>
716
816
717
817
<dt> <dfn>space-start</dfn>
718
818
<dd>
719
- Set <i > fullwidth opening punctuation</i > with full-width glyphs (spaced)
819
+ Set <a >fullwidth opening punctuation</a > with full-width glyphs (spaced)
720
820
at the start of each line.
721
821
722
822
<dt> <dfn>trim-start</dfn>
723
823
<dd>
724
- Set <i > fullwidth opening punctuation</i > with half-width glyphs (flush)
824
+ Set <a >fullwidth opening punctuation</a > with half-width glyphs (flush)
725
825
at the start of each line.
726
826
727
827
<dt> <dfn>allow-end</dfn>
728
828
<dd>
729
- Set <i > fullwidth closing punctuation</i > with half-width glyphs (flush)
829
+ Set <a >fullwidth closing punctuation</a > with half-width glyphs (flush)
730
830
at the end of each line
731
831
if it does not otherwise fit prior to justification;
732
832
otherwise set the punctuation with full-width glyphs.
733
833
734
834
<dt> <dfn>space-end</dfn>
735
835
<dd>
736
- Set <i > fullwidth opening punctuation</i > with full-width glyphs (spaced)
836
+ Set <a >fullwidth opening punctuation</a > with full-width glyphs (spaced)
737
837
at the start of each line.
738
838
739
839
<dt> <dfn>trim-end</dfn>
740
840
<dd>
741
- Set <i > fullwidth closing punctuation</i > with half-width glyphs (flush)
841
+ Set <a >fullwidth closing punctuation</a > with half-width glyphs (flush)
742
842
at the end of each line.
743
843
744
844
<dt> <dfn>space-adjacent</dfn>
745
845
<dd>
746
- Set <i > fullwidth opening punctuation</i > with full-width glyphs (spaced)
846
+ Set <a >fullwidth opening punctuation</a > with full-width glyphs (spaced)
747
847
when not at the start of the line.
748
- Set <i > fullwidth closing punctuation</i > with full-width glyphs (spaced)
848
+ Set <a >fullwidth closing punctuation</a > with full-width glyphs (spaced)
749
849
when not at the end of the line.
750
850
751
851
<dt> <dfn>trim-adjacent</dfn>
@@ -827,19 +927,19 @@ Fullwidth Punctuation Collapsing</h4>
827
927
828
928
<ul>
829
929
<li>
830
- Set <i > fullwidth opening punctuation</i > half-width if the previous character is
831
- a <i > fullwidth opening punctuation</i > ,
832
- <i > fullwidth middle dot punctuation</i > ,
930
+ Set <a >fullwidth opening punctuation</a > half-width if the previous character is
931
+ a <a >fullwidth opening punctuation</a > ,
932
+ <a >fullwidth middle dot punctuation</a > ,
833
933
or ideographic space (U+3000).
834
934
Else set it full-width.
835
935
<li>
836
- Set <i > fullwidth closing punctuation</i > half-width if the next character is
837
- a <i > fullwidth closing punctuation</i > ,
838
- <i > fullwidth middle dot punctuation</i > ,
936
+ Set <a >fullwidth closing punctuation</a > half-width if the next character is
937
+ a <a >fullwidth closing punctuation</a > ,
938
+ <a >fullwidth middle dot punctuation</a > ,
839
939
or ideographic space (U+3000).
840
940
Else set it full-width.
841
941
<li>
842
- Set <i > fullwidth closing punctuation</i > followed by <i > fullwidth opening punctuation</i >
942
+ Set <a >fullwidth closing punctuation</a > followed by <a >fullwidth opening punctuation</a >
843
943
each at "3/4-width", i.e. halfway between full-width and half-width.
844
944
</ul>
845
945
@@ -897,7 +997,7 @@ Text Spacing Character Classes</h4>
897
997
<li> All characters that belongs to Han Unicode Script Property [[!UAX24]] .
898
998
</ul>
899
999
900
- <dt> <dfn>ion -ideographic letters</dfn>
1000
+ <dt> <dfn>non -ideographic letters</dfn>
901
1001
<dd>
902
1002
Includes all typographic character units that
903
1003
belong to Unicode Letters [L*] and Mark [M*] category,
@@ -923,16 +1023,16 @@ Text Spacing Character Classes</h4>
923
1023
<dt> <dfn>fullwidth opening punctuation</dfn>
924
1024
<dd>
925
1025
Includes any opening punctuation character (Unicode category <code> Ps</code> )
926
- that belongs to the <i > CJK Symbols and Punctuation</i > block (U+3000–U+303F)
927
- or is categorized as <i > East Asian Fullwidth (F)</i > by [[!UAX11]] .
1026
+ that belongs to the <a >CJK Symbols and Punctuation</a > block (U+3000–U+303F)
1027
+ or is categorized as <a >East Asian Fullwidth (F)</a > by [[!UAX11]] .
928
1028
Also includes LEFT SINGLE QUOTATION MARK (U+2018) and LEFT DOUBLE QUOTATION MARK (U+201C).
929
1029
When trimmed, the left (for horizontal text) or top (for vertical text) half is kerned.
930
1030
931
1031
<dt> <dfn>fullwidth closing punctuation</dfn>
932
1032
<dd>
933
1033
Includes any closing punctuation character (Unicode category <code> Pe</code> )
934
- that belongs to the <i > CJK Symbols and Punctuation</i > block (U+3000–U+303F)
935
- or is categorized as <i > East Asian Fullwidth (F)</i > by [[!UAX11]] .
1034
+ that belongs to the <a >CJK Symbols and Punctuation</a > block (U+3000–U+303F)
1035
+ or is categorized as <a >East Asian Fullwidth (F)</a > by [[!UAX11]] .
936
1036
Also includes RIGHT SINGLE QUOTATION MARK (U+2019) and RIGHT DOUBLE QUOTATION MARK (U+201D).
937
1037
May also include fullwidth colon punctuation and/or fullwidth dot punctuation (see below).
938
1038
When trimmed, the right (for horizontal text) or bottom (for vertical text) half is kerned.
0 commit comments