@@ -2019,130 +2019,6 @@ Available Space in Orthogonal Flows</h4>
2019
2019
2020
2020
<p> See [[!CSS3-SIZING]] for further details on CSS sizing terminology and concepts.
2021
2021
2022
- <h4 id=auto-multicol>
2023
- Auto-sizing Block Containers in Orthogonal Flows</h4>
2024
-
2025
- <p>
2026
- If a box establishing an <i> orthogonal flow</i> is
2027
- either a block container or a multi-column element,
2028
- for the case where the box's <i> inline size</i> is ''width/auto'' :
2029
-
2030
- <ol>
2031
- <li><strong> Calculate the used 'column-width' :</strong>
2032
- <ul>
2033
- <li> If 'column-count' and 'column-width' are both ''column-width/auto'' ,
2034
- use the shrink-to-fit formula
2035
- <code> min(<var> max-content</var> , max(<var> min-content</var> , <var> constraint</var> ))</code> ,
2036
- where:
2037
- <dl>
2038
- <dt><var> min-content</var>
2039
- <dd> the <a href="https://www.w3.org/TR/css3-sizing/#min-content-measure">min-content inline-size</a> of the box
2040
-
2041
- <dt><var> max-content</var>
2042
- <dd> the <a href="https://www.w3.org/TR/css3-sizing/#max-content-measure">max-content inline-size</a> of the box
2043
-
2044
- <dt><var> constraint</var>
2045
- <dd> the <i> inline-axis</i> size
2046
- that would match the box's <i> inline-axis</i> <a
2047
- href="https://www.w3.org/TR/CSS22/box.html#outer-edge"> outer edges</a> to the smaller of
2048
- <ul>
2049
- <li> the <i> available space</i>
2050
- <li> the initial containing block’s <i> size</i>
2051
- </dl>
2052
-
2053
- <div class="note">
2054
- <div class=sidefigure>
2055
- <img src="images/auto-multicol.svg" width=200
2056
- alt="Diagram of automatically triggered multi-column preventing T-shaped documents">
2057
- </div>
2058
- <strong> Note that this requirement automatically triggers multi-column flow on all block containers.</strong>
2059
- This is so that overflowing content, instead of continuing off the side of the containing block,
2060
- is wrapped into columns in the flow direction of the containing block,
2061
- thus avoiding T-shaped documents.
2062
- Authors can control the <i> inline size</i> of these columns by setting 'column-width' ,
2063
- or disable this behavior by setting the <i> inline size</i> property
2064
- to a non-''width/auto'' value such as ''width/max-content'' .
2065
- <br style="clear:both;">
2066
- </div>
2067
-
2068
- <li> If 'column-count' is not ''column-count/auto'' and 'column-width' is ''column-count/auto'' ,
2069
- calculate the used 'column-width' with the same formula,
2070
- except replace <var> constraint</var> with
2071
- <var> constraint</var> − ('column-count' − 1) × 'column-gap' .
2072
-
2073
- <li> If 'column-count' and 'column-width' are both non-''column-count/auto'' ,
2074
- the used 'column-width' is the computed 'column-width' .
2075
- (This is not recommended as it can cause overflow;
2076
- instead it is better to set the 'column-width' and a max-block-size.)
2077
- </ul>
2078
-
2079
- <li><strong> Calculate the used column length:</strong>
2080
- If the computed <i> block size</i> is ''height/auto''
2081
- and the specified value of at least one of 'column-count' and 'column-width' was ''column-width/auto'' ,
2082
- use the box’s <i> block size</i> (if that is <i> definite</i> ),
2083
- else the <i> fill-available block size</i> of the box (if that is <i> definite</i> ),
2084
- else the box’s <i> max-content block size</i> .
2085
- Otherwise follow the normal rules for sizing a multi-column element.
2086
- <p class="issue">
2087
- Should we factor in the box’s <i> min-content block size</i> in this formula,
2088
- so that e.g. a large image will not overflow the box,
2089
- but cause the box to overflow the containing block?
2090
-
2091
- <li><strong> Calculate the used 'column-count' :</strong>
2092
- If the computed 'column-count' is ''column-count/auto'' , then
2093
- the used 'column-count' follows from filling the resulting multi-column layout
2094
- with the box's content.
2095
- </ol>
2096
-
2097
- <p>
2098
- The used <i> inline size</i> of the resulting multi-column element is then calculated:
2099
- <ol>
2100
- <li> If the content neither line-wraps nor fragments within the multi-column element,
2101
- then the used <i> inline size</i> is the <i> max-content inline size</i> of the box's contents.
2102
- This criteria gives the shrink-to-fit behavior for short orthogonal flow contents
2103
- without making a large blank space.
2104
- <li> Otherwise it is calculated from the used 'column-width' , 'column-count' , and 'column-gap' .
2105
- </ol>
2106
-
2107
- <p>
2108
- The used <i> block size</i> of the box is either the used column length
2109
- (if multiple columns were used)
2110
- or the <i> max-content block size</i> of the content
2111
- (if only one column was used).
2112
-
2113
- <p>
2114
- The UA may, instead of triggering multi-column layout for block containers as described above,
2115
- calculate the box's <i> block size</i> assuming infinite <i> available block space</i> ,
2116
- thus laying out its contents into a single column.
2117
- (Note that this can, however, result in content that is clipped
2118
- or otherwise inaccessible if it overflows its containing block.)
2119
-
2120
- <h4 id="orthogonal-layout">
2121
- Auto-sizing Other Orthogonal Flow Roots</h4>
2122
-
2123
- <p> In order to limit the length of lines,
2124
- block containers have special auto-sizing behavior (defined <a href="#auto-multicol">above</a> )
2125
- when their <i> available inline space</i> is infinite
2126
- (which typically occurs when they establish an <i> orthogonal flow</i> ).
2127
-
2128
- <p> Other layout models simply lay out into the infinite <i> available inline space</i>
2129
- at their <i> max-content size</i> .
2130
- However, they pass through the infinite <i> available inline space</i>
2131
- to block containers they contain,
2132
- possibly triggering that special auto-sizing behavior on those block containers
2133
- even though they do not themselves establish an <i> orthogonal flow</i> .
2134
-
2135
- <div class="example">
2136
- <p> For example,
2137
- a table or <i> flex container</i> establishing an <i> orthogonal flow</i>
2138
- is laid out into its given <i> available space</i> .
2139
- If its <i> available inline space</i> is infinite,
2140
- this effectively lays the box out at its <i> max-content size</i> .
2141
- However, any of its table cells or <i> flex items</i> that are <i> block containers</i>
2142
- are laid out assuming infinite <i> available inline space</i>
2143
- and so behave accordingly.
2144
- </div>
2145
-
2146
2022
<h4 id="orthogonal-pagination">
2147
2023
Fragmenting Orthogonal Flows</h4>
2148
2024
@@ -2583,7 +2459,7 @@ Full-width Characters</h5>
2583
2459
<ul>
2584
2460
<li> Deferred the ''sideways-lr'' and ''sideways-rl'' values of 'writing-mode' to Level 4.
2585
2461
<li> Deferred the ''digits'' value of 'text-combine-upright' to Level 4.
2586
- <li> Made the <a href="#auto-multicol"> automatic multi-column behavior</a> of orthogonal flows optional.
2462
+ <li> Made the automatic multi-column behavior of orthogonal flows optional.
2587
2463
</ul>
2588
2464
2589
2465
<h3 class="no-num" id="changes-201311">
0 commit comments