FFFF [css-page-floats] make it clearer that inline floats are not influenc… · xfq/csswg-drafts@81276ee · GitHub
Skip to content

Commit 81276ee

Browse files
committed
[css-page-floats] make it clearer that inline floats are not influenced in their behavior, add clear=both and equiv. and add issue for secondary direction of page float
1 parent 8b0719c commit 81276ee

1 file changed

Lines changed: 117 additions & 75 deletions

File tree

css-page-floats/Overview.bs

Lines changed: 117 additions & 75 deletions
< 923 tr class="diff-line-row">
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ Terminology</h2>
5656
<dt><dfn>Float</dfn>
5757
<dd>
5858
An element which has float set to something else than none.
59+
<dt><dfn>Inline float</dfn>
60+
<dd>
61+
A float which has float set to inline.
62+
<dt><dfn>Page float</dfn>
63+
<dd>
64+
A float which has float set to something else than inline or none.
5965
<dt><dfn>Float block formatting context</dfn>
6066
<dd>
6167
The block formatting context which is generated by a float and which contains
@@ -67,7 +73,7 @@ Terminology</h2>
6773
margins, borders or padding.
6874
<dt><dfn>Float containing block formatting context</dfn>
6975
<dd>
70-
The block formatting context inside of which the float is embedded.
76+
The block formatting context inside of which an float is embedded.
7177
<dt><dfn>Initial float reference</dfn>
7278
<dd>
7379
The entity to which the float is aligned initially, before float
@@ -114,6 +120,8 @@ Floating to the inline-start/inline-end and block-start/block-end</h2>
114120
The <a>float containing block formatting context</a> is the same as that of the
115121
<a>float anchor</a>.
116122

123+
The float is an <a>inline float</a>.
124+
117125
<dt><dfn>column</dfn>
118126
<dd>
119127
The <a>float reference</a> is the column in a multi column environment in
@@ -123,6 +131,9 @@ Floating to the inline-start/inline-end and block-start/block-end</h2>
123131

124132
The <a>float containing block formatting context</a> is a new block formatting
125133
context with the same dimensions and placement as the <a>float reference</a>.
134+
135+
The float is a <a>page float</a>.
136+
126137
<dt><dfn>region</dfn>
127138
<dd>
128139
The <a>float reference</a> is the region in a region-chain within which the
@@ -133,14 +144,18 @@ Floating to the inline-start/inline-end and block-start/block-end</h2>
133144
The <a>float containing block formatting context</a> is a new block formatting
134145
context with the same dimensions and placement as the <a>float reference</a>.
135146

147+
The float is a <a>page float</a>.
148+
136149
<dt><dfn>page</dfn>
137150
<dd>
138151
The <a>float reference</a> of the float is the page within which the <a>float
139152
anchor</a> is placed. If the <a>float anchor</a> is not inside a page, the
140153
<a>float reference</a> is the line box of the <a>float anchor</a>.
141154

142155
The <a>float containing block formatting context</a> is a new block formatting
143-
context with the same dimensions and placement as the <a>float reference</a>
156+
context with the same dimensions and placement as the <a>float reference</a>.
157+
158+
The float is a <a>page float</a>.
144159
</dl>
145160

146161
<div class="issue">
@@ -150,8 +165,8 @@ Floating to the inline-start/inline-end and block-start/block-end</h2>
150165
</div>
151166

152167
<div class="issue">
153-
It is not possible to directly specify which element to use as the reference
154-
element. This may be of interest to have.
168+
It is not possible to specify a block element which element to use as the
169+
reference element. This has been requested.
155170

156171
Maybe something like:
157172

@@ -239,17 +254,17 @@ And some more text&lt;/p>
239254
If the <a>float reference</a> is a line box, behaves like inline-start or
240255
inline-end, whichever corresponds to line-left for the float reference.
241256

242-
Otherwise, behaves like block-end, inline-start or inline-end depending on the float
243-
containing block’s 'direction' and 'writing-mode'.
257+
Otherwise, behaves like block-end, inline-start or inline-end depending on
258+
the float containing block’s 'direction' and 'writing-mode'.
244259

245260
<dt><dfn>right</dfn>
246261

247262
<dd>
248263
If the <a>float reference</a> is a line box, behaves like inline-start or
249264
inline-end, whichever corresponds to line-right for the float reference.
250265

251-
Otherwise, behaves like block-start, inline-start or inline-end depending on the float
252-
containing block’s 'direction' and 'writing-mode'.
266+
Otherwise, behaves like block-start, inline-start or inline-end depending on
267+
the float containing block’s 'direction' and 'writing-mode'.
253268

254269
<dt><dfn>top</dfn>
255270

@@ -265,44 +280,41 @@ And some more text&lt;/p>
265280

266281
<dt><dfn>snap-block(&lt;length> [, start | end | near ]?)</dfn>
267282
<dd>
268-
Makes the element float to the start or the end of the block if it
269-
naturally appears within a certain distance from either one. The length
270-
value(s) specifies the maximum distance from the start/end that an element
271-
must be within in order to be floated; one length value specifies the
272-
distance from both the start and the end, two length values specify the
273-
distance from the start and end, respectively.
283+
Has no effect if the element is an <a>inline float</a>.
284+
285+
If the element is a <a>page float</a>, it makes the element float to the
286+
start or the end of the block if it naturally appears within a certain
287+
distance from either one. The length value(s) specifies the maximum
288+
distance from the start/end that an element must be within in order to be
289+
floated; one length value specifies the distance from both the start and
290+
the end, two length values specify the distance from the start and end,
291+
respectively.
274292

275293
The optional keyword value specifies where the element is floated: start,
276294
end, or the nearest of the two. The initial value is 'near'. If 'near'
277295
is in effect and the element is within the specified distance both from
278296
the start and the end, end wins.
279297

280-
An element is considered to be a float if it ha 8027 s a snap-block() value,
281-
even if the element does not appear within the specified distance. This
282-
way, it can be determined whether an element is float or not without
283-
laying out the document.
284-
285298
<dt><dfn>snap-block</dfn>
286299
<dd>same as <code>snap-block(2em, near)</code>
287300

288301
<dt><dfn>snap-inline(&lt;length> [, left | right | near ]?)</dfn>
289302
<dd>
290-
Makes the element float to the line start or line end if it naturally
291-
appears within a certain distance from the start or end of the line. The
292-
length value(s) specifies the maximum distance from the start/end that an
293-
element must be within in order to be floated; one length value specifies
294-
the distance from both the start and the end, two length values specify the
295-
distance from the start and end, respectively.
303+
Has no effect if the element is an <a>inline float</a>.
304+
305+
If the element is a <a>page float</a>, it makes the element float to the
306+
line start or line end if it naturally appears within a certain distance
307+
from the start or end of the line. The length value(s) specifies the
308+
maximum distance from the start/end that an element must be within in
309+
order to be floated; one length value specifies the distance from both the
310+
start and the end, two length values specify the distance from the start
311+
and end, respectively.
296312

297313
The optional keyword value specifies where the element is floated: line
298314
start, line end, or the nearest of the two. The initial value is 'near'.
299315
If 'near' is in effect and the element is within the specified distance
300316
both from the start and the end, end wins.
301317

302-
An element is considered to be a float if it has a snap-inline() value,
303-
even if the element does not appear within the specified distance. This
304-
way, it can be determined whether an element is float or not without laying
305-
out the document.
306318

307319
<dt><dfn>snap-inline</dfn>
308320
<dd>same as <code>snap-inline(2em, near)</code>
@@ -441,37 +453,36 @@ The 'clear' property</h2>
441453
with an inline-start-float-reference that resulted from elements earlier
442454
in the source document.
443455

444-
If applied to a page float, the <a>float reference</a> in which the page float
445-
is placed will be seen as full when determining whether it can host
446-
subsequent page floats that float in the inline-start direction.
456+
If applied to a <a>page float</a>, the <a>float reference</a> in which the
457+
page float is placed will be seen as full when determining whether it can
458+
host subsequent page floats that float in the inline-start direction.
447459

448460
<dt><dfn>inline-end</dfn>
449461
<dd>
450-
If applied to a block-level element or a float with a 'float-reference' set
451-
to inline, requires that the block-start outer edge of the box comes after
452-
the block-end outer edge of any inline-end-floats with an
453-
inline-end-float-reference that resulted from elements earlier in the
454-
source document.
462+
If applied to a block-level element or an <a>inline float</a>, requires
463+
that the block-start outer edge of the box comes after the block-end outer
464+
edge of any inline-end-floats with an inline-end-float-reference that
465+
resulted from elements earlier in the source document.
455466

456-
If applied to a page float, the <a>float reference</a> in which the page float
457-
is placed will be seen as full when determining whether it can host
458-
subsequent page floats that float in the inline-end direction.
467+
If applied to a <a>page float</a>, the <a>float reference</a> in which the
468+
page float is placed will be seen as full when determining whether it can
469+
host subsequent page floats that float in the inline-end direction.
459470

460471

461472
<dt><dfn>block-start</dfn>
462473
<dd>
463-
If applied to a block-level element or a float with a 'float-reference' set
464-
to inline, behave like inline-start.
474+
If applied to a block-level element or an <a>inline float</a>, behaves like
475+
inline-start.
465476

466-
If applied to a page float, the <a>float reference</a> in which the page float
467-
is placed will be seen as full when determining whether it can host
477+
If applied to a page float, the <a>float reference</a> in which the page
478+
float is placed will be seen as full when determining whether it can host
468479
subsequent page floats that float in the block-start direction.
469480

470481
<dt><dfn>block-end</dfn>
471482

472483
<dd>
473-
If applied to a block-level element or a float with a 'float-reference' set
474-
to inline, behave like inline-end.
484+
If applied to a block-level element or an <a>inline float</a>, behaves
485+
like inline-end.
475486

476487
If applied to a page float, the <a>float reference</a> in which the page float
477488
is placed will be seen as full when determining whether it can host
@@ -501,6 +512,26 @@ The 'clear' property</h2>
501512
Behave like block-end or inline-end depending on the float
502513
containing block’s 'direction' and 'writing-mode'.
503514

515+
<dt><dfn>both-inline</dfn>
516+
517+
<dd>
518+
Behave like inline-start and inline-end.
519+
520+
<dt><dfn>both-block</dfn>
521+
522+
<dd>
523+
Behave like block-start and block-end.
524+
525+
<dt><dfn>both</dfn>
526+
527+
<dd>
528+
Behave like both-inline.
529+
530+
<dt><dfn>all</dfn>
531+
532+
<dd>
533+
Behave like both-block and both-inline.
534+
504535
</dl>
505536

506537

@@ -586,14 +617,17 @@ The 'clear' property</h2>
586617

587618
</div>
588619

589-
<h2 id="deferring_floats">Deferring floats</h2>
620+
<h2 id="deferring_floats">Deferring page floats</h2>
621+
622+
Users can influence the placement of a <a>page float</a> by deferring them to
623+
another <a>fragmentation container</a> than where the <a>float anchor</a> is
624+
placed.
590625

591-
Users can influence the placement of a page float by deferring them to another
592-
<a>fragmentation container</a> than where the <a>float anchor</a> is placed.
626+
A float that is an <a>inline float</a> cannot be deferred.
593627

594-
Float deferring assigns an <a>initial float reference</a>, yet float stacking can
595-
lead page floats being moved to a subsequent <a>fragmentation container</a> if
596-
their <a>initial float reference</a> lacks the space to host them.
628+
Float deferring assigns an <a>initial float reference</a>, yet float stacking
629+
can lead page floats being moved to a subsequent <a>fragmentation container</a>
630+
if their <a>initial float reference</a> lacks the space to host them.
597631

598632< 8026 /td>
The 'float-defer' property is introduced to control deferring floats:
599633

@@ -612,9 +646,13 @@ The 'clear' property</h2>
612646
</pre>
613647

614648

615-
This property specifies whether the <a>initial float reference</a> of a page
616-
float is the <a>fragmentation container</a> in which the <a>float anchor</a> is placed
617-
after previous page floats have been placed, or in another one. Values are:
649+
This property specifies whether the <a>initial float reference</a> of a <a>page
650+
float</a> is the <a>fragmentation container</a> in which the <a>float anchor</a>
651+
is placed after previous page floats have been placed, or in another one.
652+
653+
This property is ignored if the element is an <a>inline float</a>.
654+
655+
Values are:
618656

619657
<dl>
620658
<dt>none
@@ -723,11 +761,11 @@ The 'clear' property</h2>
723761
<img alt="sample rendering" src="images/6.png">
724762
</div>
725763

726-
<h2 id="wrapping-around-page-floats">Wrapping around floats</h2>
764+
<h2 id="wrapping-around-page-floats">Wrapping around page floats</h2>
727765

728-
Floats have their 'wrap-flow' property set to 'both' initially and are treated
729-
like exclusions. This specification does not make any further specification about
730-
wrapping contents around floats.
766+
Page floats have their 'wrap-flow' property set to 'both' initially and are
767+
treated like exclusions. This specification does not make any further
768+
specification about wrapping contents around page floats.
731769

732770
<div class="issue">
733771
Should the 'wrap-flow' really be set to both, or should the flow be restricted
@@ -748,11 +786,13 @@ The 'clear' property</h2>
748786
Animatable: no
749787
</pre>
750788

751-
This property pushes a float in direction opposite of the where it has been
789+
This property pushes a <a>page float</a> in direction opposite of the where it has been
752790
floated with 'float'.
753791

754-
This property can only influence a page float along an axis along which it has
755-
been floated.
792+
If the element is an <a>inline float</a>, this property is ignored.
793+
794+
This property can only influence a <a>page float</a> along an axis along which
795+
it has been floated.
756796

757797
<dl>
758798
<dt>&lt;percentage></dt>
@@ -766,8 +806,6 @@ The 'clear' property</h2>
766806
</dd>
767807
</dl>
768808

769-
770-
771809
<div class="example">
772810

773811
<pre>
@@ -796,11 +834,8 @@ img {
796834

797835
<img alt="sample rendering" src="images/14.png">
798836

799-
800-
801837
</div>
802838

803-
804839
<div class="example">
805840
Pull quotes are often centered in a column. In this example, the pull quote is
806841
floated to the right, and then pushed back into the center.
@@ -882,7 +917,7 @@ img {
882917
Float references can grow up to the their `max-height` and `max-width` or their
883918
`available size`, whichever is the lowest, in order to accommodate page floats.
884919

885-
<h3 id="float-stacking">Rules for Float stacking</h3>
920+
<h3 id="float-stacking">Rules for page float stacking</h3>
886921

887922
Page floats are stacked within a given <a>float reference</a> in the order of their
888923
placement and in the direction of the inline- and flow-directions of the
@@ -891,19 +926,26 @@ floats with the same <a>float reference</a> and by keeping a distance N between
891926
the page float's margin edge and the padding edge of the <a>float reference</a>
892927
as well as between the page float's margin edge and the margin edge of the last
893928
previously placed page float with the same <a>float reference</a> and the same
894-
'float' value, where N is the 'float-offset' value of the page float. For the
895-
placement it is assumed that the page floats in the block directions fill the
896-
entire line size of the <a>float reference</a> and page floats in the inline
897-
direction fill the entire block size of the <a>float reference</a>.
929+
'float' value, where N is the 'float-offset' value of the page float.
930+
931+
For the purpose of calculating whether enough space is available for a page floats
932+
within the <a>float reference</a>, it is assumed that the page floats in the block
933+
directions fill the entire line size of the <a>float reference</a> and page floats
934+
in the inline direction fill the entire block size of the <a>float reference</a>.
935+
936+
For the purpose of placement, page floats in the block-start direction are also
937+
placed at the inline-start edge of the float reference and vice versa, and page
938+
floats in the block-end direction are placed at the inline-end edge of the float
939+
reference and vice versa.
898940

899941
If the page float has a defined 'clear'-value, then the <a>float reference</a> in
900942
which the page float is placed is closed for all subsequent page floats that
901943
floating in the direction specified by the 'clear'-value.
902944

903945
<p class="issue">
904-
This definition may be a bit too simple, as it does not allow for page floats
905-
that go in the line direction and block direction within the same
906-
<a>fragmentation container</a>.
946+
We can effectively currently float to two corners: inline-start/block-start and
947+
inline-end/block-end. We should augment this with the option to have a secondary
948+
float direction to allow basic 2D floating.
907949

908950

909951
<h2 id="relation_to_absolutely_positioned_exclusions">

0 commit comments

Comments
 (0)