@@ -2019,130 +2019,6 @@ Available Space in Orthogonal Flows</h4>
20192019
20202020 <p> See [[!CSS3-SIZING]] for further details on CSS sizing terminology and concepts.
20212021
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-
21462022<h4 id="orthogonal-pagination">
21472023Fragmenting Orthogonal Flows</h4>
21482024
@@ -2583,7 +2459,7 @@ Full-width Characters</h5>
25832459 <ul>
25842460 <li> Deferred the ''sideways-lr'' and ''sideways-rl'' values of 'writing-mode' to Level 4.
25852461 <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.
25872463 </ul>
25882464
25892465 <h3 class="no-num" id="changes-201311">
0 commit comments