@@ -801,6 +801,11 @@ <h2>Introduction & definitions</h2>
801801the first paragraph, and so on, until the bottom (C edge) of the last
802802paragraph becomes the bottom (foot edge) of the document.
803803
804+ < p > An element is called < dfn > orthogonal</ dfn > if it either a
805+ < em > vertical</ em > element with a < em > horizontal</ em > < em > containing
806+ block</ em > or a < em > horizontal</ em > element with a < em > vertical</ em >
807+ < em > containing block.</ em > An < dfn > orthogonal flow</ dfn > is a
808+ < em > flow</ em > whose < em > flow root</ em > is an orthogonal element.
804809
805810
806811< h2 > The viewport and the canvas</ h2 >
@@ -876,10 +881,12 @@ <h2 id=flows>Flows</h2>
876881 <!-- <li>The value of 'position' is 'absolute' or 'fixed' (see
877882 [CSS3POS]). -->
878883
879- < li > The box is vertical and its parent is horizontal. < span
880- class =issue > [Add link to the relevant section.]</ span >
884+ < li > The box is < span > vertical</ span > and its parent is
885+ < span > horizontal.</ span > < span class =issue > [Add link to the relevant
886+ section.]</ span >
881887
882- < li > The box is horizontal and its parent is vertical.
888+ < li > The box is < span > horizontal</ span > and its parent is
889+ < span > vertical.</ span >
883890
884891 <!-- <li>The value of 'transform' is not 'none'. -->
885892
@@ -2964,9 +2971,111 @@ <h3 id=blockwidth>Block-level, non-replaced elements
29642971calculated from their computed values, with any ''auto'' values
29652972replaced by 0.
29662973
2967- < p > If the computed value of the < span > block flow dimension</ span > is
2974+ < div class =note >
2975+
2976+ < p > The complexity of this section comes from the fact that ''auto''
2977+ values on 'width' and 'height' are resolved differently for
2978+ < em > horizontal</ em > and for < em > vertical</ em > elements, and
2979+ differently for parallel flows then for < span > orthogonal
2980+ flows</ span > (i.e., when the < em > containing block</ em > is horizontal
2981+ and the element itself vertical, or vice-versa). In paginated
2982+ contexts, the element may further be split into boxes of unequal
2983+ sizes.
2984+
2985+ < p > The are three principles. The first is: If the element's size in
2986+ the direction of the < em title ="containing block "> containing
2987+ block's</ em > < em > inline dimension</ em > (i.e., between the < em > B
2988+ edge</ em > and the < em > D edge</ em > ) is ''auto'', then that size is
2989+ the same as the containing block (minus the element's own margins,
2990+ padding and borders, if applicable).
2991+
2992+ < p > The second principle applies to orthogonal flows only, and only
2993+ if they are not in a paginated environment: If an element is
2994+ orthogonal and its inline dimension (i.e., the distance between its
2995+ < em > A edge</ em > and < em > C edge</ em > ) is ''auto'', then it is treated
2996+ as a < a
2997+ href ="http://www.w3.org/TR/css3-multicol/#multi-column-element "
2998+ > multi-column element</ a > [[!CSS3COL]] and 'column-width', if not
2999+ already set, is set to a value derived from the containing block's
3000+ size and the < span > initial containing block</ span >
3001+
3002+ < p > The last principle applies to orthogonal flows in a paginated
3003+ environment, e.g., in paged media or inside a multi-column element:
3004+ Just like in a non-paginated environment, if an element is
3005+ orthogonal and its inline dimension is ''auto'', then it is treated
3006+ as a < a
3007+ href ="http://www.w3.org/TR/css3-multicol/#multi-column-element "
3008+ > multi-column element</ a > [[!CSS3COL]] and 'column-width', if not
3009+ already set, is set to a certain value. But, in addition, if that
3010+ means that the first column would be so wide as stick out of the
3011+ page or column (the < a
3012+ href ="http://www.w3.org/TR/css3-break/Overview.html#fragmentainer "
3013+ > “fragmentainer,”</ a > see [[CSS3-BREAK]]), then that first column is
3014+ made narrower until it fits. But not narrower than
3015+ ''min-content''. (If at that size it still doesn't fit, it may
3016+ instead be moved to the next page/column or, if that is not
3017+ possible, overflow.)
3018+
3019+ </ div >
3020+
3021+
3022+
3023+ < p > In a paginated environment, in particular inside a page or a
3024+ column with a fixed height, it may be that such a vertical element
3025+ with ''auto'' height would be too tall and would stick out below the
3026+ page or column. In that case, it is laid out with a smaller line
3027+ length, such that it doesn't stick out. (But not smaller than
3028+ ''min-content'')
3029+
3030+ < p > Whether in a paginated environment or not, such a vertical
3031+ element, including its margin, padding and border, may be too wide
3032+ for its containing block. In that case it is paginated. The
3033+ different fragments that result from that may have a different line
3034+ lengths in that case, e.g., in the case of the following figure. The
3035+ fragments each have the top and bottom margin, padding and border of
3036+ the element (although in a paginated environment, some of those
3037+ margins disappear).
3038+
3039+ < div class =figure >
3040+ < p > < img src ="paginated-ortho " alt ="Two pages of a book ">
3041+
3042+ < p class =caption > A horizontal text (represented by letters A, B, C…)
3043+ containing a section with vertical text (represented by digits 1, 2,
3044+ 3…). The document is paginated and the vertical text ends up split
3045+ over two pages. Note that the fragment of vertical text on the first
3046+ page has a longer line length (< em > inline dimension</ em > ) than the
3047+ fragment on the second page.
3048+ </ div >
3049+
3050+ < p > If the containing block is vertical, the situation is analogous,
3051+ but with width and height changing roles:
3052+
3053+ < p > The height of the element itself is either as specified, or, if
3054+ it is ''auto'', calculated from the containing block's height by
3055+ subtracting the element's own margins, padding and border. (Which of
3056+ those are subtracted is determined by 'box-sizing'.)
3057+
3058+ < p > If the element is vertical, i.e., the same as its containing
3059+ block, this height is then used as the line length (< em > inline
3060+ dimension</ em > ) for laying out the element. And if the element is
3061+ horizontal, i.e., orthogonal to the containing block, its width is
3062+ used as line length, or, if that width is ''auto'', ''max-content is
3063+ used instead.
3064+
3065+ < p > If such a horizontal element with ''auto'' width would stick out
3066+ of the side of a page or a fixed-length column when set with
3067+ ''max-content'', it is instead laid out to a smaller width (but not
3068+ narrower than ''min-content'').
3069+
3070+ < p > If a horizontal element, including its margin, padding and
3071+ border, is too tall for its containing block, it is paginated.
3072+ </ div >
3073+
3074+
3075+
3076+ < p > If the computed value of the < span > block dimension</ span > is
29683077not ''auto'', then the used value is calculated by evaluating the
2969- computed value. Otherwise, the < span > block flow dimension</ span > is
3078+ computed value. Otherwise, the < span > block dimension</ span > is
29703079the distance between two edges that are defined as follows:
29713080
29723081< ul >
0 commit comments