Skip to content

Commit c8c07ae

Browse files
howcomhowcom
committed
tweaking page float definitions
1 parent 87e91d2 commit c8c07ae

File tree

1 file changed

+158
-130
lines changed

1 file changed

+158
-130
lines changed

‎css3-gcpm/Overview.src.html‎

Lines changed: 158 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -2877,128 +2877,6 @@ <h2>Styling blank pages</h2>
28772877
</div>
28782878

28792879

2880-
<h2>Float intrusion in multicol elements</h2>
2881-
2882-
<p>In multi-colum layouts [[CSS3MULTICOL]], floats appear within columns; they never intrude into neighboring columns.
2883-
2884-
<div class=example>
2885-
2886-
<pre class=css>
2887-
img { float: left; width: 120% }
2888-
</pre>
2889-
2890-
<p>In this example, the image is wider than the column and will
2891-
therefore intrude into the neighboring column. At the bottom of the
2892-
middle column is a long word that is clipped in the middle of the
2893-
column gap.
2894-
2895-
<div class=cols>
2896-
2897-
<p>Ab cde fgh i jkl. Mno<br>
2898-
pqr stu vw xyz. A bc<br>
2899-
2900-
<br><br><br><br><br><br>
2901-
2902-
def g hij klm nopqrs<br>
2903-
tuv wxy z. Abc de fg<br>
2904-
2905-
2906-
2907-
<div class="col" style="left: 175px">
2908-
<p>hi jklmno. Pqrstu vw<br>
2909-
x yz. Abc def ghi jkl.<br>
2910-
<span style="padding-left: 30px">M nop qrst uvw</span><br>
2911-
<span style="padding-left: 30px">x yz. Ab cde fgh</span><br>
2912-
<span style="padding-left: 30px">i jkl. Mnopqr stu</span><br>
2913-
<span style="padding-left: 30px">vw xyz. A bcdef</span><br>
2914-
<span style="padding-left: 30px">ghij klm nopqrs</span><br>
2915-
<span style="padding-left: 30px">tuv wxy z. Abc</span><br>
2916-
de fghi jk klmop qrst<br>
2917-
uvwxyzabcdefghijklmn<br>
2918-
2919-
</div>
2920-
2921-
<div class="col" style="left: 350px">
2922-
<p>
2923-
Ab cde fgh i jkl. Mno<br>
2924-
pqr stu vw xyz. A bc<br>
2925-
def g hij klm nopqrs<br>
2926-
tuv wxy z. Abc de fg<br>
2927-
hi jklmno. Pqrstu vw<br>
2928-
x yz. Abc def ghi jkl.<br>
2929-
2930-
M nop qrst uv wx yz.<br>
2931-
2932-
Ab cde fgh i jkl. Mno<br>
2933-
pqr stu vw xyz.
2934-
2935-
</div>
2936-
2937-
2938-
<div class=rep style="width: 200px"></div>
2939-
<div class=gap style="left: 150px"></div>
2940-
<div class=gap style="left: 325px"></div>
2941-
</div>
2942-
2943-
</div>
2944-
2945-
2946-
2947-
2948-
2949-
<div class=example>
2950-
2951-
<pre class=css>
2952-
img { float: right; width: 120% }
2953-
</pre>
2954-
2955-
<p>In this example, the image naturally appears in the last column. Due to being floated to the right, the image will intrude into the neighboring column to the left.
2956-
2957-
<div class=cols style="height: 186px">
2958-
2959-
<p>
2960-
Ab cde fgh i jkl. Mno<br>
2961-
pqr stu vw xyz. A bc<br>
2962-
def g hij klm nopqrs<br>
2963-
tuv wxy z. Abc de fg<br>
2964-
hi jklmno. Pqrstu vw<br>
2965-
x yz. Abc def ghi j<br>
2966-
kl. M nop qrst uv wx<br>
2967-
yz. Ab cde fgh i jkl<br>
2968-
mno pqr stu vw xyz.
2969-
2970-
2971-
2972-
<div class="col" style="left: 175px">
2973-
<p>
2974-
Ab cde fgh i jkl. Mno<br>
2975-
pqr stu vw xyz. A bc<br>
2976-
def g hij klm nop<br>
2977-
qrs tuv wxy z.<br>
2978-
Rst uvw x yz. Ab<br>
2979-
c def ghi jkl m.<br>
2980-
Nop qrst uv wx<br>
2981-
yz. Ab cdef gh<br>
2982-
i jklmno pqr stu vw
2983-
2984-
</div>
2985-
2986-
<div class="col" style="left: 350px">
2987-
<p>
2988-
xyz. Abc def ghi jkl<br>
2989-
mno. Pqr stu vw xyz.<br>
2990-
<br><br><br><br><br><br>
2991-
Ab cde fgh ij klm no.
2992-
</div>
2993-
2994-
2995-
<div class=rep style="width: 200px; right: 0"></div>
2996-
<div class=gap style="left: 150px"></div>
2997-
<div class=gap style="left: 325px"></div>
2998-
</div>
2999-
3000-
</div>
3001-
30022880

30032881

30042882
<h2>Page floats</h2>
@@ -3017,8 +2895,8 @@ <h2>Page floats</h2>
30172895
<ul>
30182896
<li>horizontal keywords: left right inside outside
30192897
<li>vertical keywords: top bottom
3020-
<li>reference keywords: page multicol
3021-
<li>modifier keyword: next
2898+
<li>flow root keywords: page multicol
2899+
<li>modifier keyword: next unless-room
30222900
<li>other keywords: none hide footnote to() page()
30232901
</ul>
30242902

@@ -3034,6 +2912,8 @@ <h2>Page floats</h2>
30342912
</pre>
30352913
</div>
30362914

2915+
<!--
2916+
30372917
<p>Further, the 'float' property is extended to accept a
30382918
comma-separated list of sets of keywords. If the first set of keywords
30392919
cannot be honored with the element remaining on the current page, the
@@ -3050,6 +2930,7 @@ <h2>Page floats</h2>
30502930
</pre>
30512931
</div>
30522932
2933+
-->
30532934

30542935
<p>The new values have the following meaning:
30552936

@@ -3063,14 +2944,36 @@ <h2>Page floats</h2>
30632944
<dd>On a left page, this value is synonymous with 'left', On a right page, this value is synonymous with 'right'.
30642945

30652946
<dt>page
3066-
<dd>Indicates that the page area is the containing block for the element.
3067-
2947+
<dd>Indicates that the page area is the flow root for the element.
30682948

30692949
<dt>multicol
3070-
<dd>Indicates that the multicol element is the containing block for the element. The float may will intrude into neighboring columns.
2950+
<dd>Indicates that the multicol element is the flow root for the element.
2951+
2952+
<dt>intrude
2953+
<dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.
2954+
2955+
<dt>unless-room
2956+
<dd>if the element can be laid out in its natural position without causing a page break, it should be laid out there disregarding the 'float' property; in other cases the other values on 'float' will dertermine its floating behaviour
2957+
2958+
<div class="example">
2959+
<p>Float the figure to the top of the next page, unless it fits in its natural position without causing a page break:
2960+
2961+
<pre>
2962+
.figure {
2963+
float: top next page unless-room;
2964+
}
2965+
</pre>
2966+
</div>
30712967

3072-
<dt class=issue>intrude
3073-
<dd>if the float is in a multicol element, it may intrude into neighboring columns. (If the element is not in a multicol element, it will always intrude.)
2968+
<div class="example">
2969+
<p>Hide the element unless it fits in its natural position without causing a page break:
2970+
2971+
<pre>
2972+
.figure {
2973+
float: hide unless-room;
2974+
}
2975+
</pre>
2976+
</div>
30742977

30752978

30762979
<dt>top
@@ -3104,7 +3007,7 @@ <h2>Page floats</h2>
31043007
<ul>
31053008
<li>only one horizontal keyword can appear in a set
31063009
<li>only one vertical keyword can appear in a set
3107-
<li>at least one horizontal or vertical keyword must appear, except that 'none', 'hide', and 'footnote' must appear alone
3010+
<li>at least one horizontal or vertical keyword must appear, except that ''none'', ''hide'', and ''footnote'' must appear alone
31083011
<li>'next' may appear once along with 'page'
31093012
<li>keywords can appear in any order
31103013
</ul>
@@ -3238,6 +3141,131 @@ <h2>Page floats</h2>
32383141
width calculations are vice versa.
32393142

32403143

3144+
<h3>Float intrusion in multicol elements</h3>
3145+
3146+
<p>In multi-colum layouts [[CSS3MULTICOL]], floats appear within columns; they never intrude into neighboring columns.
3147+
3148+
<div class=example>
3149+
3150+
<pre class=css>
3151+
img { float: left; width: 120% }
3152+
</pre>
3153+
3154+
<p>In this example, the image is wider than the column and will
3155+
therefore intrude into the neighboring column. At the bottom of the
3156+
middle column is a long word that is clipped in the middle of the
3157+
column gap.
3158+
3159+
<div class=cols>
3160+
3161+
<p>Ab cde fgh i jkl. Mno<br>
3162+
pqr stu vw xyz. A bc<br>
3163+
3164+
<br><br><br><br><br><br>
3165+
3166+
def g hij klm nopqrs<br>
3167+
tuv wxy z. Abc de fg<br>
3168+
3169+
3170+
3171+
<div class="col" style="left: 175px">
3172+
<p>hi jklmno. Pqrstu vw<br>
3173+
x yz. Abc def ghi jkl.<br>
3174+
<span style="padding-left: 30px">M nop qrst uvw</span><br>
3175+
<span style="padding-left: 30px">x yz. Ab cde fgh</span><br>
3176+
<span style="padding-left: 30px">i jkl. Mnopqr stu</span><br>
3177+
<span style="padding-left: 30px">vw xyz. A bcdef</span><br>
3178+
<span style="padding-left: 30px">ghij klm nopqrs</span><br>
3179+
<span style="padding-left: 30px">tuv wxy z. Abc</span><br>
3180+
de fghi jk klmop qrst<br>
3181+
uvwxyzabcdefghijklmn<br>
3182+
3183+
</div>
3184+
3185+
<div class="col" style="left: 350px">
3186+
<p>
3187+
Ab cde fgh i jkl. Mno<br>
3188+
pqr stu vw xyz. A bc<br>
3189+
def g hij klm nopqrs<br>
3190+
tuv wxy z. Abc de fg<br>
3191+
hi jklmno. Pqrstu vw<br>
3192+
x yz. Abc def ghi jkl.<br>
3193+
3194+
M nop qrst uv wx yz.<br>
3195+
3196+
Ab cde fgh i jkl. Mno<br>
3197+
pqr stu vw xyz.
3198+
3199+
</div>
3200+
3201+
3202+
<div class=rep style="width: 200px"></div>
3203+
<div class=gap style="left: 150px"></div>
3204+
<div class=gap style="left: 325px"></div>
3205+
</div>
3206+
3207+
</div>
3208+
3209+
3210+
3211+
3212+
3213+
<div class=example>
3214+
3215+
<pre class=css>
3216+
img { float: right; width: 120% }
3217+
</pre>
3218+
3219+
<p>In this example, the image naturally appears in the last column. Due to being floated to the right, the image will intrude into the neighboring column to the left.
3220+
3221+
<div class=cols style="height: 186px">
3222+
3223+
<p>
3224+
Ab cde fgh i jkl. Mno<br>
3225+
pqr stu vw xyz. A bc<br>
3226+
def g hij klm nopqrs<br>
3227+
tuv wxy z. Abc de fg<br>
3228+
hi jklmno. Pqrstu vw<br>
3229+
x yz. Abc def ghi j<br>
3230+
kl. M nop qrst uv wx<br>
3231+
yz. Ab cde fgh i jkl<br>
3232+
mno pqr stu vw xyz.
3233+
3234+
3235+
3236+
<div class="col" style="left: 175px">
3237+
<p>
3238+
Ab cde fgh i jkl. Mno<br>
3239+
pqr stu vw xyz. A bc<br>
3240+
def g hij klm nop<br>
3241+
qrs tuv wxy z.<br>
3242+
Rst uvw x yz. Ab<br>
3243+
c def ghi jkl m.<br>
3244+
Nop qrst uv wx<br>
3245+
Ryz. Ab cdef gh<br>
3246+
i jklmno pqr stu vw
3247+
3248+
</div>
3249+
3250+
<div class="col" style="left: 350px">
3251+
<p>
3252+
xyz. Abc def ghi jkl<br>
3253+
mno. Pqr stu vw xyz.<br>
3254+
<br><br><br><br><br><br>
3255+
Ab cde fgh ij klm no.
3256+
</div>
3257+
3258+
3259+
<div class=rep style="width: 200px; right: 0"></div>
3260+
<div class=gap style="left: 150px"></div>
3261+
<div class=gap style="left: 325px"></div>
3262+
</div>
3263+
3264+
</div>
3265+
3266+
3267+
3268+
32413269
<h2>Advanced multi-column layout</h2>
32423270

32433271
<p>In paged media, it is common for figures, captions, images, and

0 commit comments

Comments
 (0)