Overview.bs (64859B)
1 <!-- -*- Mode: HTML; indent-tabs-mode: nil; sgml-basic-offset: 4 -*- --> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <pre class='metadata'> 7 Title: CSS Gap Decorations 8 Shortname: css-gap-decorations 9 Level: 1 10 Status: ED 11 Work Status: exploring 12 Group: CSSWG 13 URL: https://matspalmgren.github.io/css-gap-decorations/Overview.html 14 Editor: Mats Palmgren, Mozilla Corporation http://mozilla.com, mats@mozilla.com 15 Abstract: This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations. 16 Markup Shorthands: biblio yes 17 Markup Shorthands: css yes 18 Markup Shorthands: dfn yes 19 Boilerplate: repository-issue-tracking off 20 Issue Tracking: CSSWG github issue #6748 https://github.com/w3c/csswg-drafts/issues/6748 21 </pre> 22 <pre class="link-defaults"> 23 spec:css-box-4; type:value; for:<box>; text:margin-box 24 spec:css-grid-3; type:dfn; text:masonry axis 25 spec:css-grid-2; type:dfn; text:collapsed track 26 </pre> 27 28 Introduction {#intro} 29 ===================== 30 31 <em>This section is not normative.</em> 32 33 Overview {#overview} 34 -------------------- 35 36 37 This is a proposal to add CSS features for decorating <a href="https://drafts.csswg.org/css-align#gaps">gaps</a>. 38 (Some use cases and background discussion can be found in <a href="https://github.com/w3c/csswg-drafts/issues/2748">issue #2748</a>.) 39 We propose to extend the 'column-rule-width' property with new values. 40 Add properties to support images and gradients. 41 Add properties for aligning the rule to specific anchor points, 42 specifying its extent area, and to control its position and length within that area. 43 We add support for row rules by adding the corresponding 'row-*' properties. 44 We also widen the scope of these properties so that they can be used in 45 <a>flex containers</a>, <a>grid containers</a>, 46 <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers, 47 as well as <a>multi-column containers</a>. 48 49 50 Module Interactions {#placement} 51 -------------------------------- 52 53 This module extends the definition of the 'column-rule-width' property, 54 adding <<percentage>> and ''row-rule-width/auto'' values. 55 We also generalize the existing ''column-rule-*'' properties to apply to other 56 types of containers. 57 Accordingly, we propose to move the existing ''column-rule'' properties from 58 the <a href="https://drafts.csswg.org/css-multicol">Multi-column</a> spec to 59 the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec. 60 Additionally, all new properties and shorthands in this proposal are intended 61 as additions to the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec. 62 63 64 Definitions {#definitions} 65 -------------------------------- 66 67 In this specification, we will use the term <dfn>lateral axis</dfn> to refer to 68 the axis in which the rule's thickness grows (i.e. the axis ''column-rule-width'' 69 use). The other axis is the rule's <dfn>longitudinal axis</dfn> and 70 its size in this axis is the <dfn>rule length</dfn>. 71 These definitions are relative to the rule itself and does not depend on if 72 the rule is a row or column rule, or what the 'writing-mode' is. 73 74 Rule Images and Gradients {#rule-image} 75 ======================================= 76 77 Authors may specify an image or gradient to be used in place of the ''column-rule-style''. 78 These properties are loosely modeled after the corresponding 79 <a href="https://drafts.csswg.org/css-backgrounds/#border-images">'border-image-*'</a> properties. 80 Rules are one-dimensional though, as opposed to borders which have four sides around an area. 81 A rule is like a border with just one side rendered with the other sides having ''border-style: none''. 82 83 The 'column-rule-image-source' and 'row-rule-image-source' Properties {#column-rule-image-source} 84 ------------------------------------------------------------------------------------------------- 85 86 <pre class=propdef> 87 Name: column-rule-image-source, row-rule-image-source 88 Value: none | <<image>> 89 Initial: none 90 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 91 Inherited: no 92 Percentages: N/A 93 Computed value: the keyword ''column-rule-image-source/none'' or the computed <<image>> 94 Animation type: discrete 95 </pre> 96 97 These properties specify an <<image>> to use in place of the rendering specified 98 by the ''column-rule-style''/''row-rule-style'' properties. 99 100 As for borders, a rule image is not rendered when the corresponding ''column-rule-style''/''row-rule-style'' is ''column-rule-style/none''. 101 102 The 'column-rule-image-slice' and 'row-rule-image-slice' Properties {#column-rule-image-slice} 103 ---------------------------------------------------------------------------------------------- 104 105 <pre class=propdef> 106 Name: column-rule-image-slice, row-rule-image-slice 107 Value: [<<number [0,∞]>> | <<percentage [0,∞]>>]{1,2} 108 Initial: 0 109 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 110 Inherited: no 111 Percentages: refer to image size in the rule's longitudinal axis 112 Computed value: one or two values, each either a number or percentage 113 Animation type: discrete 114 </pre> 115 116 'column-rule-image-slice' specify inward offsets from the start and end edges 117 of the image in the rule's longitudinal axis, dividing it into three regions: 118 two edge areas and one middle area. 119 120 When two values are specified, they set the offsets on the start and end sides in 121 that order. If the end value is missing, it is the same as the start value. 122 123 <dl dfn-for=column-rule-image-slice dfn-type=value> 124 <dt><dfn><<percentage [0,∞]>></dfn> 125 <dd>Percentages are relative to the image size in the rule's longitudinal axis 126 127 <dt><dfn><<number [0,∞]>></dfn> 128 <dd>Numbers represent pixels in the image (if the image is a raster 129 image) or vector coordinates (if the image is a vector image). 130 </dl> 131 132 Negative values are not allowed. 133 Computed values larger than the size of the image are interpreted as ''100%''. 134 135 If the image must be sized to determine the slices 136 (for example, for SVG images with no intrinsic size), 137 then it is sized using the [[css-images-3#default-sizing]] 138 with no [=specified size=] and the [=rule containing rectangle=] as the [=default object size=]. 139 140 The regions given by the 'column-rule-image-slice' values may overlap. 141 However if the sum of the start and end values is equal to or greater than 142 the size of the image, the middle part becomes empty. 143 144 145 The 'column-rule-image-repeat' and 'row-rule-image-repeat' Properties {#column-rule-image-repeat} 146 ------------------------------------------------------------------------------------------------- 147 148 <pre class=propdef> 149 Name: column-rule-image-repeat, row-rule-image-repeat 150 Value: stretch | repeat | round | space 151 Initial: stretch 152 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 153 Inherited: no 154 Percentages: N/A 155 Computed value: the specified keyword 156 Animation type: discrete 157 </pre> 158 159 These properties specify how the middle part of a sliced rule image is scaled and tiled. 160 Values have the following meanings: 161 162 <dl dfn-for=column-rule-image-repeat dfn-type=value> 163 <dt><dfn>stretch</dfn></dt> 164 <dd>The image is stretched to fill the area. 165 <dt><dfn>repeat</dfn></dt> 166 <dd>The image is tiled (repeated) to fill the area. 167 <dt><dfn>round</dfn></dt> 168 <dd>The image is tiled (repeated) to fill the area. If it does not 169 fill the area with a whole number of tiles, the image is rescaled 170 so that it does. 171 <dt><dfn>space</dfn></dt> 172 <dd>The image is tiled (repeated) to fill the area. If it does not 173 fill the area with a whole number of tiles, the extra space is 174 distributed around the tiles. 175 </dl> 176 177 The exact process for scaling and tiling the image parts is defined by drawing the equivalent 178 ''border-image'' with the top and bottom ''border-image-slice'' values set from the corresponding 179 ''column-rule-image-slice'' values, and the ''border-image-slice'' left value set to ''100%'' and 180 the right value set to ''0''. The ''border-image-width'' top value set to the ''column-rule-image-slice'' 181 top value. The ''border-image-width'' top value set to the ''column-rule-image-slice'' 182 bottom value. The ''border-image-width'' top value set to zero. 183 184 185 186 The 'column-rule-image' and 'row-rule-image' Shorthands {#column-rule-image} 187 ---------------------------------------------------------------------------- 188 189 <pre class='propdef shorthand'> 190 Name: column-rule-image, row-rule-image 191 Value: <<'column-rule-image-source'>> || <<'column-rule-image-slice'>> || <<'column-rule-image-repeat'>> 192 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 193 </pre> 194 195 196 <aside class=example> 197 This <a href="examples/grid-image-001.html">example</a> demonstrates the new 198 rule image properties presented above in a grid layout with spanning elements. 199 <figure> 200 <img src="media/grid-image-001.png"> 201 <figcaption> 202 Example of image rules. 203 </figcaption> 204 </figure> 205 </aside> 206 207 <aside class=example> 208 Here's a <a href="examples/grid-image-002.html">variation</a> of the example above 209 that animates the container's size and stretch the middle part of the images. 210 <figure> 211 <video src="media/grid-image-002.webm" autoplay loop></video> 212 <figcaption> 213 Example of stretching image rules when the container is resized. 214 </figcaption> 215 </figure> 216 </aside> 217 218 <aside class=example> 219 This is a similar <a href="examples/grid-gradient-001.html">example</a> using gradients. 220 <figure> 221 <img src="media/grid-gradient-001.png"> 222 <figcaption> 223 Example of gradient rules. 224 </figcaption> 225 </figure> 226 </aside> 227 228 <aside class=example> 229 Here's an <a href="examples/flexbox-coupon-rule.html">example</a> demonstrating 230 support for a use case mentioned in 231 <a href="https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931">issue #2748</a>. 232 It's a coupon with a perforation rendered by a semi-transparent rule image between two flex items. 233 <figure> 234 <img src="media/flexbox-coupon-rule.png"> 235 <figcaption> 236 An example of a semi-transparent column rule image. 237 </figcaption> 238 </figure> 239 </aside> 240 241 242 Rule Positioning and Sizing {#size} 243 =================================== 244 245 The 'column-rule-width' and 'row-rule-width' Properties {#column-rule-width} 246 ---------------------------------------------------------------------------- 247 248 <pre class='propdef partial'> 249 Name: column-rule-width 250 New Values: <<percentage>> | auto 251 Initial: medium 252 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 253 Inherited: no 254 Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=lateral axis=] 255 Computed value: absolute length if the specified value is <<line-width>>; ''0px'' if the column rule style is ''column-rule-style/none'' or ''column-rule-style/hidden''. Otherwise, the specified value. 256 Animation type: by computed value type 257 </pre> 258 259 <pre class='propdef'> 260 Name: row-rule-width 261 Value: <<line-width>> | <<percentage>> | auto 262 Initial: medium 263 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 264 Inherited: no 265 Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=lateral axis=] 266 Computed value: absolute length if the specified value is <<line-width>>; ''0px'' if the column rule style is ''row-rule-style/none'' or ''row-rule-style/hidden''. Otherwise, the specified value. 267 Animation type: by computed value type 268 </pre> 269 270 These properties sets the thickness (lateral size) of a rule in the column and row axis, respectively. 271 Negative specified values are not allowed. 272 The [=used value=] is floored at zero (in case a 'calc()' expression evaluates to a negative value for example). 273 274 See [[#resolving-position-and-size-algo]] below for how 'auto' is resolved. 275 276 277 The 'column-rule-length' and 'row-rule-length' Properties {#column-rule-length} 278 ------------------------------------------------------------------------------- 279 280 <pre class=propdef> 281 Name: column-rule-length, row-rule-length 282 Value: <<length-percentage>> | auto 283 Initial: auto 284 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 285 Inherited: no 286 Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=longitudinal axis=] 287 Computed value: the specified value 288 Animation type: by computed value type 289 </pre> 290 291 These properties sets the [=rule length=] (longitudinal size) of a rule in the column and row axis, respectively. 292 Negative specified values are not allowed. 293 The [=used value=] is floored at zero (in case a 'calc()' expression evaluates to a negative value for example). 294 295 See [[#resolving-position-and-size-algo]] below for how 'auto' is resolved. 296 297 Note: These properties work the same as the '*-rule-width' properties in the [=lateral axis=], except that they have a different initial value. 298 299 300 The Rule Lateral Inset Properties {#column-rule-lateral-inset-start} 301 -------------------------------------------------------------------- 302 303 <pre class=propdef> 304 Name: column-rule-lateral-inset-start, column-rule-lateral-inset-end, row-rule-lateral-inset-start, row-rule-lateral-inset-end 305 Value: <<length-percentage>> | auto 306 Initial: auto 307 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 308 Inherited: no 309 Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=lateral axis=] 310 Computed value: the specified value 311 Animation type: by computed value type 312 </pre> 313 314 These properties sets the lateral start/end offset of the rule in the column and row axis, respectively. 315 A positive value moves the position inward and a negative value outward from the corresponding [=rule containing rectangle's=] edge. 316 317 <aside class=example> 318 This <a href="examples/grid-lateral-002.html">example</a> demonstrates aligning a rule at the start of the gap. 319 <figure> 320 <img src="media/grid-lateral-002.png"> 321 <figcaption> 322 Examples of aligning a rule at the start of the gap with a lateral start offset. 323 </figcaption> 324 </figure> 325 </aside> 326 327 <aside class=example> 328 This <a href="examples/grid-lateral-003.html">example</a> demonstrates aligning a rule at the end of the gap. 329 <figure> 330 <img src="media/grid-lateral-003.png"> 331 <figcaption> 332 Examples of aligning a rule at the end of the gap with a lateral end offset. 333 </figcaption> 334 </figure> 335 </aside> 336 337 NOTE: The ''column-rule-lateral-inset'' and ''column-rule-width'' [=used values=] are calculated in a similar way to how 'left'/'right' and 338 'width' are <a href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width">calculated</a> for an absolutely positioned 339 box. The precise algorithm is described next. 340 341 342 Resolving a rule's position and size {#resolving-position-and-size-algo} 343 ------------------------------------------------------------------------ 344 345 Given a triplet of values: inset-start/end and a size for an axis, ''column-rule-width/auto'' values 346 are resolved so that the sum of the three values equals the [=rule containing rectangle=] size in 347 the same axis. These are the rules for resolving them: 348 <ol id=rule-sizing> 349 <li>if all the values are ''column-rule-width/auto'' then set both inset values to zero and solve for size 350 <li>if none of the values are ''column-rule-width/auto'' then the situation is over-constrained: solve by 351 treating the end inset value as ''column-rule-width/auto'' 352 <li>if both inset properties are ''column-rule-width/auto'', but the size is not, then solve with the additional constraint 353 that the inset values must have equal values (resulting in the rule being centered) 354 <li>if the size is ''column-rule-width/auto'' and only one of the inset values is ''column-rule-width/auto'' then set the ''column-rule-width/auto'' inset value to zero 355 and solve for size, if that makes size negative then set the size to zero and solve for the ''column-rule-width/auto'' 356 inset value instead (i.e. the rule is sized to fill the remaining space, until it becomes zero in 357 which case its positioned at the non-''column-rule-width/auto'' inset edge) 358 <li>if the size is ''column-rule-width/auto'' and both inset values are non-''column-rule-width/auto'' then solve for size, 359 if that makes the size negative then set the size to zero and solve again by 360 treating the end inset value as ''column-rule-width/auto'' 361 </ol> 362 363 These rules resolves the ''column-rule-width'', ''column-rule-lateral-inset-start'', and ''column-rule-lateral-inset-end'' triplet 364 of values in a rule's lateral axis. 365 366 The same rules are also used to resolve ''column-rule-length'', ''column-rule-longitudinal-[edge-]inset-start'', and ''column-rule-longitudinal-[edge-]inset-end'' triplet of values in a rule's longitudinal axis (see the <a href=#column-rule-longitudinal-inset-start>longitudinal</a> property 367 descriptions below for which of the "edge" or non-"edge" values is used). 368 369 Ditto for the corresponding ''row-rule-*'' properties. 370 371 <aside class=example> 372 This <a href="examples/grid-lateral-001.html">example</a> demonstrates the rules above. 373 Note in particular the latter two grids, which shows what happens when the sum of the 374 insets are greater than the [=rule containing rectangle's=] size. There's still 375 a zero-sized column rule there, which the row rule (purple) aligns to. 376 <figure> 377 <img src="media/grid-lateral-001.png"> 378 <figcaption> 379 Examples of lateral rule sizing with various inset values. 380 </figcaption> 381 </figure> 382 </aside> 383 384 385 The 'column-rule-lateral-inset' and 'row-rule-lateral-inset' Shorthands {#column-rule-lateral-inset} 386 ---------------------------------------------------------------------------------------------------- 387 388 <pre class='propdef shorthand'> 389 Name: column-rule-lateral-inset 390 Value: <<'column-rule-lateral-inset-start'>> <<'column-rule-lateral-inset-end'>>? 391 </pre> 392 393 <pre class='propdef shorthand'> 394 Name: row-rule-lateral-inset 395 Value: <<'row-rule-lateral-inset-start'>> <<'row-rule-lateral-inset-end'>>? 396 </pre> 397 398 These are shortands for specifying the corresponding start/end values. 399 If one value is specified it is used for both start and end. 400 401 402 The Rule Longitudinal Inset Properties {#column-rule-longitudinal-inset-start} 403 ------------------------------------------------------------------------------ 404 405 <pre class=propdef> 406 Name: column-rule-longitudinal-inset-start, column-rule-longitudinal-inset-end, row-rule-longitudinal-inset-start, row-rule-longitudinal-inset-end 407 Value: <<length-percentage>> | auto 408 Initial: 0 409 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 410 Inherited: no 411 Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=longitudinal axis=] 412 Computed value: the specified value 413 Animation type: by computed value type 414 </pre> 415 416 These properties sets the longitudinal start/end inset of the rule in the column 417 and row axis, respectively. They are only used on a rule's edges that are interior. 418 The <a href=#column-rule-longitudinal-edge-inset-start>*-rule-longitudinal-edge-inset</a> 419 properties are used for rule edges that are on the outer edges of an axis. 420 The [=used values=] are calculated the same as for the lateral properties above. 421 422 <aside class=example> 423 This <a href="examples/grid-lateral-004.html">example</a> shows the default rule alignment and size in both axes. 424 <figure> 425 <img src="media/grid-lateral-004.png"> 426 <figcaption> 427 Example of a rule with default rule alignment and size in both axes. 428 </figcaption> 429 </figure> 430 </aside> 431 432 Note: These have a different initial value than the lateral inset properties, meaning the rule will stretch to fill the [=rule containing rectangle=] in this axis. The initial values as specified above are backward compatible with how column rules are sized and positioned in legacy <a spec=css-multicol>multi-column layout</a>. 433 434 <aside class=example> 435 Here's a few simple <a href="examples/grid-longitudinal-001.html">examples</a> of 436 the rule sizing and inset properties. 437 Note that the grid items have ''opacity: 0.5'' to show any rules underneath them. 438 <figure> 439 <img src="media/grid-longitudinal-001.png"> 440 <figcaption> 441 Examples of rule sizing and inset values. 442 </figcaption> 443 </figure> 444 </aside> 445 446 <aside class=example> 447 This <a href="examples/grid-longitudinal-002.html">example</a> demonstrates 448 that the inset properties can be animated and that they are relative the [=rule containing rectangle=], 449 which itself depends on the <a href="#rule-align">rule's alignment</a> in its longitudinal axis. 450 Note that the longitudinal insets in this example are definite and not animated. The reason 451 they follow the animated lateral position of the rule in the orthogonal axis is that they have 452 <a href="#column-rule-align">''column-rule-align/rule'' alignment</a>. 453 <figure> 454 <video src="media/grid-longitudinal-002.webm" autoplay loop></video> 455 <figcaption> 456 Example of rule alignment and animated inset values. 457 </figcaption> 458 </figure> 459 </aside> 460 461 462 The 'column-rule-longitudinal-inset' and 'row-rule-longitudinal-inset' Shorthands {#column-rule-longitudinal-inset} 463 ------------------------------------------------------------------------------------------------------------------- 464 465 <pre class='propdef shorthand'> 466 Name: column-rule-longitudinal-inset 467 Value: <<'column-rule-longitudinal-inset-start'>> <<'column-rule-longitudinal-inset-end'>>? 468 </pre> 469 470 <pre class='propdef shorthand'> 471 Name: row-rule-longitudinal-inset 472 Value: <<'row-rule-longitudinal-inset-start'>> <<'row-rule-longitudinal-inset-end'>>? 473 </pre> 474 475 These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end. 476 477 478 The Rule Longitudinal Edge Inset Properties {#column-rule-longitudinal-edge-inset-start} 479 ------------------------------------------------------------------------------ 480 481 <pre class=propdef> 482 Name: column-rule-longitudinal-edge-inset-start, column-rule-longitudinal-edge-inset-end, row-rule-longitudinal-edge-inset-start, row-rule-longitudinal-edge-inset-end 483 Value: <<length-percentage>> | auto 484 Initial: 0 485 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 486 Inherited: no 487 Percentages: refer to the [=rule containing rectangle's=] size in the rule's [=longitudinal axis=] 488 Computed value: the specified value 489 Animation type: by computed value type 490 </pre> 491 492 These properties are identical to their non-"edge" counter-parts. These properties are used 493 on the start edge of the first rule that on the container's start edge in its 494 [=longitudinal axis=], and the end edge of the last rule at the end of the container. 495 For interior rule edges, the <a href=#column-rule-longitudinal-inset-start>non-"edge" properties</a> are used. 496 In other words, these properties are used together with the <a href=#column-rule-edge-align>''*-rule-edge-align''</a> 497 properties (defined below) and the ''*-rule-longitudinal-inset'' properties are used together with <a href=#column-rule-align>''*-rule-align''</a>. 498 499 500 The 'column-rule-longitudinal-edge-inset' and 'row-rule-longitudinal-edge-inset' Shorthands {#column-rule-longitudinal-edge-inset} 501 ------------------------------------------------------------------------------------------------------------------- 502 503 <pre class='propdef shorthand'> 504 Name: column-rule-longitudinal-edge-inset 505 Value: <<'column-rule-longitudinal-edge-inset-start'>> <<'column-rule-longitudinal-edge-inset-end'>>? 506 </pre> 507 508 <pre class='propdef shorthand'> 509 Name: row-rule-longitudinal-edge-inset 510 Value: <<'row-rule-longitudinal-edge-inset-start'>> <<'row-rule-longitudinal-edge-inset-end'>>? 511 </pre> 512 513 These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end. 514 515 516 Row Rule Style and Color {#row-rule-props} 517 =============================================== 518 519 The 'row-rule-style' and 'row-rule-color' Properties {#row-rule-style} 520 -------------------------------------------------- 521 522 <pre class=propdef> 523 Name: row-rule-style 524 Value: <<line-style>> 525 Initial: none 526 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 527 Inherited: no 528 Percentages: N/A 529 Computed value: specified keyword 530 Animation type: discrete 531 </pre> 532 533 <pre class=propdef> 534 Name: row-rule-color 535 Value: <<color>> 536 Initial: currentcolor 537 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 538 Inherited: no 539 Percentages: N/A 540 Computed value: computed color 541 Animation type: by computed value type 542 </pre> 543 544 These properties are the same as the ''column-'' properties but for the row rules. 545 546 The 'row-rule' Shorthand {#row-rule} 547 -------------------------------------------------- 548 549 This shorthand works the same as ''column-rule''. 550 551 <pre class="propdef shorthand"> 552 Name: row-rule 553 Value: <<'row-rule-width'>> || <<'row-rule-style'>> || <<'row-rule-color'>> 554 </pre> 555 556 ISSUE: lots of new possible shorthands... we now have many 557 properties (and shorthands) with a ''column-rule'' and ''row-rule'' prefix. 558 Should we add shorthands for some of those with a 'rule' prefix to specify 559 both axes, like so: 'rule-foo: <<row-rule-foo>> <<column-rule-foo>>?'. 560 As usual, we have to be careful with the separator though, to make it 561 forward-compatible with any changes we might want to make... 562 563 564 Rule Alignment {#rule-align} 565 ============================ 566 567 The 'column-rule-align' and 'row-rule-align' Properties {#column-rule-align} 568 -------------------------------------------------- 569 570 <pre class=propdef> 571 Name: column-rule-align, row-rule-align 572 Value: [gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2} 573 Initial: gap 574 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 575 Inherited: no 576 Percentages: N/A 577 Computed value: the specified value 578 Animation type: discrete 579 </pre> 580 581 These properties specify the start/end attachment point of the [=rule containing rectangle=] 582 in the [=longitudinal axis=]. The start value is specified first, the end value second. 583 If only one value is specified it is used for both start and end. 584 These properties are only used for interior edges. The '*-rule-edge-align' properties 585 described below specify the alignment on the outer edges. The initial value, ''column-rule-align/gap'', 586 means that, by default, a rule will stretch its longitudinal size to fill the space 587 from the end of the gap "above" to the start of the gap "below" ("above" meaning the gap 588 in the orthogonal axis on the rule's start side). 589 590 <aside class=example> 591 This <a href="examples/grid-align-001.html">example</a> illustrates a few alignment options. 592 Note that the row rules all have a 1px longitudinal inset 593 to separate the individual rule segments. (''column-rule-align/rule-center'', 594 for example, would otherwise look like one long rule) 595 596 Note also that the column rule is intentionally not centered in 597 the gap (to separate the ''row-rule-align/rule-center'' position 598 from the ''row-rule-align/gap-center'' position) 599 <figure> 600 <img src="media/grid-align-001.png"> 601 <figcaption> 602 Example of 'row-rule-align' in a grid container. 603 </figcaption> 604 </figure> 605 606 You might be wondering if there's a bug in the bottom-right example. 607 Why is the ''row-rule-align-start/gap-over'' not honored there? 608 That's a non-interior rule edge and it's controlled separately with ''row-rule-edge-align'', see below. 609 </aside> 610 611 The 'column-rule-edge-align' and 'row-rule-edge-align' Properties {#column-rule-edge-align} 612 ------------------------------------------------------------ 613 614 <pre class=propdef> 615 Name: column-rule-edge-align, row-rule-edge-align 616 Value: [gap | gap-center | gap-over]{1,2} 617 Initial: gap 618 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 619 Inherited: no 620 Percentages: N/A 621 Computed value: the specified value 622 Animation type: discrete 623 </pre> 624 625 These properties specify the start/end attachment point of the [=rule containing rectangle=] 626 in the [=longitudinal axis=] for the outer edges only. That is, the start edge of the first rule 627 and the end edge of the last rule (which may be the same rule). 628 The start value is specified first, the end value second. If only one value is specified it 629 is used for both start and end. (Attachment points for the interior rule edges are 630 specified with the <a href=#column-rule-align>'*-rule-align'</a> properties above.) 631 632 Note: The ''column-rule-align/rule''/''column-rule-align/rule-center''/''column-rule-align/rule-over'' 633 keywords are omitted here (compared with 634 ''column-rule-align'') since there are no rules in the edge gutters. 635 636 637 The figure below illustrates the alignment values. 638 The red values are used for the top column rule's start edge and the yellow 639 values are used for its end edge. The yellow values are also used for the bottom 640 column rule's start edge. However, in this 641 case the roles of ''column-rule-align/gap'' / ''column-rule-align/gap-over'' and 642 ''column-rule-align/rule'' / ''column-rule-align/rule-over'' are swapped. It's only the 643 center values that are shared. Also note that ''column-rule-align/gap-center'' 644 isn't necessarily aligned with ''column-rule-align/rule-center''. In this case they aren't 645 aligned because the row rule (purple) is using a lateral start inset. The cyan colored 646 values are used for the bottom column border's end edge. (If the top border were to 647 stretch over the entire grid, then they would be used for its end edge.) 648 649 ''column-rule-edge-align'' controls which of the red and cyan colored 650 attachment points should be used. ''column-rule-edge-align'' the yellow colored 651 ones (and all other interior edges if there were more rows). 652 653 <figure> 654 <img src="media/rule-alignment-values.png"> 655 <figcaption> 656 Illustration of rule alignment values. 657 </figcaption> 658 </figure> 659 660 Here's the rule styling used for the above example: 661 ```css 662 column-rule: 14px solid blue; 663 column-rule-align: rule-center rule; 664 column-rule-edge-align: gap-center gap-over; 665 666 row-rule: 16px solid #7000ff; 667 row-rule-lateral-inset-start: 30px; 668 ``` 669 670 The alignment points follow the same pattern in the other axis for the row rules. 671 In this case the row rule is using the initial values (''column-rule-align/gap'') 672 so they align with the inline axis gap edges. 673 674 ISSUE: Are there use cases for other box-related edge attachment points? 675 e.g. 'padding | padding-center | padding-over | border...' 676 677 678 Rule Extent {#rule-extent} 679 ============================== 680 681 The 'column-rule-extent' and 'row-rule-extent' Properties {#column-rule-extent} 682 ------------------------------------------------------------------------------- 683 684 <pre class=propdef> 685 Name: column-rule-extent, row-rule-extent 686 Value: [segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap? 687 Initial: long 688 Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>, <a spec=css-tables>table</a> and <a spec=css-tables>table-row-group</a> containers 689 Inherited: no 690 Percentages: N/A 691 Computed value: the specified value 692 Animation type: discrete 693 </pre> 694 695 ISSUE: perhaps make ''all'' a separate keyword? like so: ''[segment | [[start | end | short | long] all?] ] allow-overlap?'' 696 697 These properties specify the extent of the rule in its [=longitudinal axis=]. 698 <dfn>segment</dfn> is an abstract term to describe the distance between two consecutive gaps. 699 An extent can cover one or more segments and the <dfn>extent size</dfn> is the distance between 700 the start position of the first of those segments and the end position of the last segment. 701 We'll define ''column-rule-extent/segment'' in more detail in the container-specific sub-sections that follow. 702 703 The ''column-rule-extent/allow-overlap'' only affects rules in grid and table layout with spanning items/cells. 704 It controls whether a rule should continue through such a span. 705 706 Note: It's only an item's <a href="https://drafts.csswg.org/css-grid/#grid-span">grid span</a> 707 that are considered when determining if an item is spanning or not, not its layout position or size. 708 709 The ''column-rule-extent/all-*'' values makes a rule extend over all segments in an axis, 710 subject to not being interrupted by a span. In grid and table layout, where the tracks/table groups/rows 711 all have the same length in a rule's longitudinal axis, all the ''column-rule-extent/all-*'' have 712 the same behavior. They are intended for flexbox and masonry layout, where the gaps may fall at different 713 positions in adjacent flex lines and masonry tracks. 714 715 The lateral position of a rule is determined by its first segment. 716 717 The following sub-sections will describe the rule extent for each type of layout container in more detail. 718 719 720 ### Grid Containers ### {#rule-extent-grid} 721 722 In a [=grid container=], gaps are placed between tracks, so the ''column-rule-extent/segment'' 723 value maps to the extent of a [=grid cell=]. 724 725 This <a href="examples/grid-segment-001.html">example</a> illustrates ''column-rule-extent/segment'' rules. 726 Note that rules are generated in all gaps, whether there are items in a grid cell or not. 727 728 <aside class=example> 729 <figure> 730 <img src="media/grid-segment-001.png"> 731 <figcaption> 732 Example of column and row rules with ''column-rule-extent/segment'' extent in a grid container. 733 </figcaption> 734 </figure> 735 </aside> 736 737 [=Collapsed tracks=] don't count -- they don't generate gaps and thus don't have gap rules. 738 They generally behave as if they don't exist as far as rules are concerned. 739 The <a href="examples/grid-segment-002.html">example</a> below also 740 illustrates that the position and size of the items don't affect the rules; it's only the position and size 741 of the [=grid cells=] that count. 742 <aside class=example> 743 <figure> 744 <img src="media/grid-segment-002.png"> 745 <figcaption> 746 Example of column and row rules with in a grid container with [=collapsed tracks=]. 747 </figcaption> 748 </figure> 749 </aside> 750 751 Rules behave symmetrically in the grid axes, but a [=masonry axis=] in a 752 <a href="https://drafts.csswg.org/css-grid-3">masonry grid layout</a> behaves 753 differently; we'll cover that case in a separate <a href=#rule-extent-masonry>section</a> later. 754 755 In a grid axis, rules are created between adjacent (non-collapsed) tracks and their [=extent sizes=] 756 are controlled by the ''column-rule-extent''/''row-rule-extent'' values as follows: 757 <dl dfn-for=row-rule-extent dfn-type=value> 758 <dt><dfn>segment</dfn></dt> 759 <dd>the [=extent size=] is the size of [=grid cell=] in the relevant axis 760 <dt><dfn>start</dfn></dt> 761 <dd>the [=extent size=] is the size of the [=next grid cell span=] in the start-most of the two adjacent tracks 762 <dt><dfn>end</dfn></dt> 763 <dd>the [=extent size=] is the size of the [=next grid cell span=] in the end-most of the two adjacent tracks 764 <dt><dfn>short</dfn></dt> 765 <dd>the [=extent size=] is the smaller of the [=next grid cell span=] sizes of the two adjacent tracks 766 <dt><dfn>long</dfn></dt> 767 <dd>the [=extent size=] is the larger of the [=next grid cell span=] sizes of the two adjacent tracks 768 <dt><dfn>all-start</dfn>, <dfn>all-end</dfn>, <dfn>all-short</dfn>, <dfn>all-long</dfn></dt> 769 <dd>the [=extent size=] is the length of the track in the relevant axis 770 (they all behave the same because all tracks in a [=grid=] axis have the same size) 771 <dt><dfn>allow-overlap</dfn></dt> 772 <dd>controls whether the [=next grid cell span=] stops short of a cell which has an item spanning 773 over the gap (see the <a href="#rule-extent-grid-algorithm">algorithm</a> below) 774 </dl> 775 776 The following algorithm determines the rule segments to create in an axis and their [=extent sizes=]. 777 For each pair of adjacent tracks, we first find the <dfn>next grid cell span</dfn> for 778 each track. Then select one of those per the property values above. 779 780 For each pair of adjacent tracks, start by setting each track's <var>current cell</var> to 781 be its first cell in the [=implicit grid=], then: 782 783 <ol id="rule-extent-grid-algorithm"> 784 <li>if ''column-rule-extent/allow-overlap'' was not specified, and the <var>current cell</var> in 785 the start-most of the pair of tracks contains an item that spans into the end-most of the tracks, 786 then skip this cell and let the <var>current cell</var> of each track be the cell after it, 787 then go to step 1 or exit if there are no more cells 788 <li>if the ''*-rule-extent'' is one of the ''column-rule-extent/all-*'' values, 789 then the [=next grid cell span=] is the span of cells from the <var>current cell</var> to 790 last cell in the track (inclusive); if ''column-rule-extent/allow-overlap'' was not specified, 791 then stop before the first (opposite axis) track that contains an item spanning between this 792 pair of tracks 793 <li>otherwise, if the <var>current cell</var> is empty, or ''*-rule-extent'' is ''column-rule-extent/segment'', 794 then the [=next grid cell span=] of that track is the <var>current cell</var> 795 <li>otherwise, if the <var>current cell</var> contains items that are spanning in the same axis, 796 then that track's [=next grid cell span=] is the longest of those spans; 797 if ''column-rule-extent/allow-overlap'' was not specified, then stop before 798 the first (opposite axis) track that contains an item spanning between this pair of tracks 799 <li>create a rule segment with the following [=extent size=]: 800 <ol type="lower-alpha"> 801 <li>for ''column-rule-extent/short''(''column-rule-extent/long''), 802 the [=extent size=] is the length of the shortest(longest) of 803 the two [=next grid cell spans=] 804 <li>for ''column-rule-extent/start''(''column-rule-extent/end''), 805 the [=extent size=] is the length of the [=next grid cell span=] 806 of the start-most(end-most) track 807 <li>for ''column-rule-extent/all-*'', 808 the [=extent size=] is the length of the [=next grid cell span=] 809 (which is always the same for the two tracks) 810 </ol> 811 <li>set the <var>current cell</var> to the next cell, in each track, that is after the last cell 812 of the [=next grid cell span=] that we picked in the steps above; exit if there are no more cells; 813 otherwise, go to step 1. 814 </ol> 815 816 <aside class=example> 817 This <a href="examples/grid-extent-001.html">example</a> demonstrates the difference between 818 the ''row-rule-extent'' values in a grid with spanning items. The grid has seven columns. 819 The grid items are semi-transparent to show any rules or overlapping items under them. 820 Item 7 for example has ''grid-column: 2 / span 3'' and item 3 has ''grid-row: 1 / span 2''. 821 They are both forced to span into the cell in row 2, column 4 to illustrate what happens 822 when items span like this. 823 <figure> 824 <img src="media/grid-extent-001.png"> 825 <figcaption> 826 Examples of ''row-rule-extent'' in a grid container. 827 </figcaption> 828 </figure> 829 </aside> 830 831 832 #### Subgrid #### {#rule-extent-subgrid} 833 834 A subgrid creates its own set of gap rules. It uses its own gaps, which are centered with, but 835 may have a different size than the ancestor grid(s), as described in 836 <a href="https://drafts.csswg.org/css-grid/#subgrids">subgrids</a>. 837 Other than that, rules are created inside a subgrid in the same way as in a regular grid. 838 839 A grid item that is a subgrid affects its parent grid's rule formation exactly as 840 a regular non-subgrid item would (whether the parent is also a subgrid or not), 841 i.e. its span (if any) affects the <a href="#rule-extent-grid-algorithm">algorithm</a> 842 above in the same way. 843 844 ''column-rule-extent/allow-overlap'' can be used in the parent to extend its rules under 845 the subgrid. The subgrid's rules, if any, are rendered by the subgrid and thus render 846 on top of the parent, as usual. 847 848 When the subgrid determines its rule extents, it does not consider any items that 849 aren't its own grid items, i.e. any items in an ancestor grid that have been placed into 850 the same grid cell that the subgrid occupies are not considered. Furthermore, it only uses 851 its own local gap and rule metrics for positioning and sizing its rules. It doesn't 852 consider any gaps or rules that originate outside of the subgrid. 853 854 <aside class=example> 855 This <a href="examples/grid-subgrid-001.html">example</a> illustrates that 856 a subgrid uses its own local gap and rule metrics for positioning and sizing 857 its rules. It also shows what happens when a parent rule crosses a subgrid item. 858 859 Note that the parent's column rule passing through the subgrid is not used for 860 the ''row-rule-align: rule'' in the subgrid. The subgrid is in fact completely 861 unaware of any parent rules. 862 <figure> 863 <img src="media/grid-subgrid-001.png"> 864 <figcaption> 865 Example of gap rules in a subgrid. 866 </figcaption> 867 </figure> 868 </aside> 869 870 871 #### Masonry #### {#rule-extent-masonry} 872 873 Masonry layout has one grid axis (which may be [=subgridded=]) and one [=masonry axis=]. 874 The grid axis works the same as has been described above. The masonry axis is special 875 since an item is placed into a grid track based on the layout size of the items before 876 it, so they are typically not aligned over the tracks. Furthermore, 877 the grid tracks may have a different start position 878 (due to [=masonry axis=] <a href="https://drafts.csswg.org/css-grid-3/#tracks-alignment">alignment</a>) 879 and size. 880 881 <aside class=example> 882 This <a href="examples/grid-masonry-001.html">example</a> illustrates a few 883 variations of rules in a masonry grid layout. All the grids have 884 ''column-rule-edge-align: gap-over'' to extend the edge rules out to 885 the content-box edge. 886 <figure> 887 <img src="media/grid-masonry-001.png"> 888 <figcaption> 889 Example of gap rules in a masonry grid. 890 </figcaption> 891 </figure> 892 </aside> 893 894 <aside class=example> 895 This <a href="examples/grid-masonry-002.html">example</a> illustrates 896 some of the ''column-rule-extent: all-*'' values. 897 <figure> 898 <img src="media/grid-masonry-002.png"> 899 <figcaption> 900 Example of gap rules in a masonry grid. 901 </figcaption> 902 </figure> 903 </aside> 904 905 ISSUE: TODO: add definition list and algorithm here... 906 907 ISSUE: is it useful to be able to create a rule extent for the <i>intersection</i> or <i>union</i> between two tracks, like so: <img style="display:block" src="media/masonry-all-shorter.png">It's pretty easy to implement, fwiw... (I accidently implemented ''column-rule-extent/short''/''column-rule-extent/long'' like that before I realized it was inconsistent with how they work elsewhere). I think it's a case that is unique to a masonry axis though, at least <i>currently</i>... 908 909 ### Flex Containers ### {#rule-extent-flexbox} 910 911 In a <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">row-oriented flex container</a>, 912 the ''row-rule-*'' properties creates rules between flex lines, 913 and the ''column-rule-*'' properties creates rules between <a href=css-flexbox>flex items</a> 914 within a <a href=cs-flexbox>flex line</a>. 915 916 In <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">column-oriented flex container</a>, 917 the roles of ''row-rule-extent'' and ''column-rule-extent'' are swapped. For the rest of this sub-section we 918 will describe the row-oriented case (just swap column/row in the text below to get the column-oriented case). 919 920 Flex items can't span multiple lines so there are no collisions possible for the main axis rules, 921 hence the ''column-rule-extent/allow-overlap'' keyword is ignored in flex layout in the main axis. 922 A subsequent flex line is considered as a collision for the cross axis rules, i.e. a cross axis rule 923 has the extent of one flex line, unless ''column-rule-extent/allow-overlap'' is used (together with 924 one the ''column-rule-extent/all-*'' values). The reason is that items in different lines 925 typically don't line up in a way that the gaps between items are aligned across the lines 926 (unless an author is very careful to arrange that), so this is to have a safe default behavior. 927 928 ''column-rule-extent/all-long allow-overlap'' can be used to override that and 929 the [=extent size=] is then from the cross axis start edge of the first flex line 930 to the cross axis end edge of the last flex line (all the ''all-*'' behave the same). 931 Only the first flex line creates column rules in this case, 932 and the rule's lateral position is taken from the gap in the first line. 933 934 Advisement: Authors are advised to <strong>not</strong> use the ''column-rule-extent/allow-overlap'' value in 935 the main axis of a multi-line flex container since it's likely to make items 936 on subsequent lines overlap the rules. It may be used when all flex items are 937 guaranteed to have the exact same main axis [=outer size=] and align such that 938 the gaps are aligned between all the lines. 939 940 Rules are created between adjacent flex lines, and their [=extent sizes=] are controlled by 941 the ''row-rule-extent'' values defined as follows: 942 <dl dfn-for=row-rule-extent dfn-type=value> 943 <dt>segment</dt> 944 <dd>behaves as ''row-rule-extent/short'' 945 <dt>start</dt> 946 <dd>use the [=outer size=] of the items in the flex line on the block axis start side 947 <dt>end</dt> 948 <dd>use the [=outer size=] of the items in the flex line on the block axis end side 949 <dt>short</dt> 950 <dd>use the [=outer size=] of the [=next flex line item=] which has the smaller size (see detailed algorithm below) 951 <dt>long</dt> 952 <dd>use the [=outer size=] of the [=next flex line item=] which has the larger size (see detailed algorithm below) 953 <dt>all-start</dt> 954 <dd>the distance between the start position of the first item to the end position of the last item on the start side flex line 955 <dt>all-end</dt> 956 <dd>the distance between the start position of the first item to the end position of the last item on the end side flex line 957 <dt>all-short</dt> 958 <dd>the distance between the end-most start position of the first item on each flex line to the start-most end position of the last item on each flex line 959 <dt>all-long</dt> 960 <dd>the distance between the start-most start position of the first item on each flex line to the end-most end position of the last item on each flex line 961 <dt>allow-overlap</dt> 962 <dd>is ignored in this axis since flex items can't span between flex lines so there are no collisions (as defined in this spec) 963 </dl> 964 965 The <dfn>next flex line item</dfn> is assigned by the following algorithm. 966 For each pair of adjacent flex lines, start with assigning the [=next flex line item=] to 967 the first item (in [=order-modified document order=]) on the respective line, then: 968 969 <ol id="rule-extent-flexbox-algorithm" start=0> 970 <li>exit if neither line has a [=next flex line item=] 971 <li> 972 <ol type="lower-alpha"> 973 <li>if only one line has a [=next flex line item=] then pick that item and go to 2 974 <li>if either of the two [=next flex line items=] has a start position that is 975 beyond the other item's end position, then pick the start-most item and go to 2. 976 <li>otherwise, pick the item with the smallest(largest) [=outer size=] 977 for ''row-rule-extent/short''(''row-rule-extent/long'') 978 </ol> 979 <li>use the picked item's [=outer size=] as this rule segment's [=extent size=], then change 980 the [=next flex line item=] for the picked item's line to the next item on its line 981 <li>assign the [=next flex line item=] for the other line to the next item on this line 982 that has an inline start position that is greater than the end position of the picked item 983 </ol> 984 985 (start/end position and sizes above are referring to the item's margin-box in 986 the rule's longitudinal axis; the phrase "next item" refers to the next item 987 in [=order-modified document order=]) 988 989 990 <aside class=example> 991 Here are a few examples to illustrate the ''row-rule-extent'' values. 992 <figure> 993 <img src="media/flexbox-extent-start-001.png"> 994 <figcaption> 995 A ''row-rule-extent: start'' <a href="examples/flexbox-extent-start-001.html">example</a>. 996 </figcaption> 997 </figure> 998 <figure> 999 <img src="media/flexbox-extent-end-001.png"> 1000 <figcaption> 1001 A ''row-rule-extent: end'' <a href="examples/flexbox-extent-end-001.html">example</a>. 1002 </figcaption> 1003 </figure> 1004 <figure> 1005 <img src="media/flexbox-extent-long-001.png"> 1006 <figcaption> 1007 A ''row-rule-extent: long'' <a href="examples/flexbox-extent-long-001.html">example</a>. 1008 </figcaption> 1009 </figure> 1010 <figure> 1011 <img src="media/flexbox-extent-all-short-001.png"> 1012 <figcaption> 1013 A ''row-rule-extent: all-short'' <a href="examples/flexbox-extent-all-short-001.html">example</a>. 1014 </figcaption> 1015 </figure> 1016 <figure> 1017 <img src="media/flexbox-extent-all-long-001.png"> 1018 <figcaption> 1019 A ''row-rule-extent: all-long'' <a href="examples/flexbox-extent-all-long-001.html">example</a>. 1020 </figcaption> 1021 </figure> 1022 </aside> 1023 1024 <aside class=example> 1025 This is an <a href="examples/flexbox-extent-all-long-allow-overlap-001.html">example</a> to illustrate 1026 what happens when an ''column-rule-extent: all-long allow-overlap'' rule is 1027 used and the gaps aren't aligned. (The flex items are semi-transparent 1028 to show the column rules underneath). 1029 <figure> 1030 <img src="media/flexbox-extent-all-long-allow-overlap-001.png"> 1031 <figcaption> 1032 A ''column-rule-extent: all-long allow-overlap'' example. 1033 </figcaption> 1034 </figure> 1035 </aside> 1036 1037 1038 ### Table Containers ### {#rule-extent-table} 1039 1040 A <a spec=css-tables>table</a> container creates rules between its 1041 <a spec=css-tables>table-column-groups</a> and <a spec=css-tables>table-row-groups</a>. 1042 <a href="https://drafts.csswg.org/css-tables/#visibility-collapse-rendering">Collapsed</a> 1043 column-groups and row-groups are treated as if they don't exist. 1044 Column rules (between <a spec=css-tables>table-column-groups</a>) collide with <a spec=css-tables>table-row-groups</a>. 1045 Row rules (between <a spec=css-tables>table-row-groups</a>) collide with <a spec=css-tables>table-column-groups</a>. 1046 The ''column-rule-extent/allow-overlap'' can be used to create rules that extend over 1047 the entire column/row length. Given that all <a spec=css-tables>table-column-groups</a> have the same block 1048 axis size and all <a spec=css-tables>table-row-groups</a> have same the inline axis size, 1049 the ''column-rule-extent/short''/''column-rule-extent/long''/''column-rule-extent/start''/''column-rule-extent/end'' 1050 keywords behave the same. Ditto for the ''column-rule-extent/all-*'' keywords. 1051 1052 <aside class=example> 1053 Note, column 2 is collapsed in this example. 1054 <figure> 1055 <img src="media/table-rules-001.png"> 1056 <figcaption> 1057 An <a href="examples/table-rules-001.html">example</a> of table rules. 1058 </figcaption> 1059 </figure> 1060 </aside> 1061 1062 ISSUE: sort out if non-collapsed column-groups that only contain collapsed columns should generate rules, ditto row-groups/rows 1063 1064 1065 ### Table Row Group Containers ### {#rule-extent-table-row-group} 1066 1067 A <a spec=css-tables>table-row-group</a> container creates rules between its <a spec=css-tables>table-rows</a> and between each 1068 <a spec=css-tables>table-cell</a> in a row. Collapsed <a spec=css-tables>table-rows</a> are treated as if they don't exist. 1069 Collapsed <a spec=css-tables>table-columns</a> are treated as if they don't exist. 1070 1071 Row rules (between <a spec=css-tables>table-rows</a>) collide with cells that have 1072 a row <a spec=css-tables>span</a> crossing it. 1073 Column rules (between <a spec=css-tables>table-cells</a>) collide with cells that have 1074 a column <a spec=css-tables>span</a> crossing it. 1075 ''column-rule-extent/allow-overlap'' can be used to create rules that 1076 extend over such spanning cells. 1077 1078 <aside class=example> 1079 This <a href="examples/table-row-group-rules-001.html">example</a> illustrates rules between 1080 table rows and cells. And also what happens when the table rules from 1081 the last example is also applied. 1082 <figure> 1083 <img src="media/table-row-group-rules-001.png"> 1084 <figcaption> 1085 Example of table row and cell rules. 1086 </figcaption> 1087 </figure> 1088 </aside> 1089 1090 ''visibility:collapse'' on <a>table-cells</a> does not affect the rules in any way. 1091 1092 1093 ### Multi-Column Containers ### {#rule-extent-multicol} 1094 1095 <a>Multi-column containers</a> already support rendering column rules between their columns. 1096 That's now extended with all the new features described above. The changes described 1097 above are backwards-compatible with existing web content that use <i>valid</i> ''column-rule'' 1098 style values. Some previously <i>invalid</i> ''column-rule'' values are now <i>valid</i> 1099 though, which could cause problems. For example, ''column-rule-width: 100%'', which 1100 previously would not parse, will now start doing something. 1101 1102 The ''row-rule-*'' properties apply to <a>multi-column containers</a>, and create 1103 row rules between <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-line">multicol lines</a> and <a>spanners</a>, 1104 separating them in the block axis. 1105 1106 The [=segments=] are the columns and the ''margin-box'' of <a>spanners</a>. 1107 1108 ISSUE: this proposal makes the assumption that the related proposal that 1109 ''row-gap'' should apply to multi-column containers is also adopted 1110 (<a href=https://github.com/w3c/csswg-drafts/issues/6746>issue #6746</a>). 1111 1112 <aside class=example> 1113 This <a href="examples/multicol-row-rule-001.html">example</a> illustrates rules in 1114 a multi-column container. 1115 <figure> 1116 <img src="media/multicol-row-rule-001.png"> 1117 <figcaption> 1118 Example of column and row rules in a multi-column. 1119 </figcaption> 1120 </figure> 1121 </aside> 1122 1123 1124 <aside class=example> 1125 If <a>multi-column containers</a> add support for 1126 'column-span: <<integer>>' some time in the future, 1127 this is how row rules will work: 1128 <figure> 1129 <img src="media/multicol-colspan-2.png"> 1130 <figcaption> 1131 Example of ''column-span: 2'' in a multi-column with column and row rules. 1132 </figcaption> 1133 </figure> 1134 </aside> 1135 1136 1137 1138 The Rule Containing Rectangle {#rule-containing-rectangle} 1139 ========================================================== 1140 1141 The <dfn>rule containing rectangle</dfn> is formed by the <a href="#rule-extent">rule extent</a> 1142 and <a href="#rule-align">alignment</a> in the [=longitudinal axis=], and by the size of the 1143 <a href="https://drafts.csswg.org/css-align/#gutter">gutter</a> in the [=lateral axis=]. 1144 (For clarity, the size of the gutter is calculated from the <a href="https://drafts.csswg.org/css-align/#gaps">gap</a> 1145 properties plus any extra space contributed by <a href="https://drafts.csswg.org/css-align/#distribution-values">alignment distribution</a> 1146 but does not include any item margins.) 1147 1148 It is important to note that the [=rule containing rectangle's=] size in an axis isn't affected by any of 1149 the <a href="#column-rule-lateral-inset">inset properties</a> <i>in the same axis</i> as that would lead to a circular 1150 dependency when resolving inset percentage values. (The [=rule containing rectangle=] is the percentage basis 1151 for all the rule properties which take percentage values.) However, a rule that uses 1152 ''column-rule-align: rule | rule-center | rule-over'' is affected by the <a href="#column-rule-lateral-inset">lateral inset properties</a> 1153 of the rule it aligns to in the <i>opposite axis</i>. 1154 1155 Here's an illustration of the [=rule containing rectangle=] (the dashed green rectangle) for the top blue rule. 1156 This is a 2x2 grid using the default extent, so the [=extent size=] is the row's block size. 1157 It has the following non-default rule properties: 1158 ```css 1159 column-rule: 14px solid blue; 1160 column-rule-align: rule; 1161 column-rule-edge-align: gap-center; 1162 column-rule-longitudinal-inset-end: 8px; 1163 1164 row-rule: 6px solid black; 1165 row-rule-lateral-inset-start: 20px; 1166 ``` 1167 1168 <figure> 1169 <img src="media/rule-containing-rectangle.png"> 1170 <figcaption> 1171 The Rule Containing Rectangle 1172 </figcaption> 1173 </figure> 1174 1175 Note that the [=rule containing rectangle=] extends to the start of the black horizontal rule, which has a ''row-rule-lateral-inset-start/20px'' 1176 lateral inset (making it non-centered). We align to its start with ''column-rule-align: rule''. From there, 1177 we move the bottom edge of the blue rule up by ''column-rule-longitudinal-inset-end/8px'' with ''column-rule-longitudinal-inset-end: 8px''. 1178 The default ''column-rule-length: auto'' then fills the resulting area. If we were to use 1179 ''column-rule-length: 100%'' here instead, then the rule would fill the [=rule containing rectangle=] 1180 vertically, since that's its percentage basis. (The end inset would then be ignored since the start inset 1181 is zero by default so the situation is over-constrained, and we resolve by ignoring the end inset, per the 1182 <a href=#rule-sizing>sizing rules</a>.) 1183 1184 1185 Rule Painting Order {#rule-painting-order} 1186 ========================================== 1187 1188 Column and row rules are painted in the same layer as the element's border. 1189 They are painted after (on top of) the element's border. 1190 All column rules for an element are painted first, then all of its row rules. 1191 The rules for an axis are painted in the order they were generated by 1192 the <a href="#rule-extent">rule extent</a> algorithms described above. 1193 Typically from the logical start to the end of the axis. 1194 1195 For table layout, all the <a spec=css-tables>table</a> rules (in both axes) 1196 are painted before the rules for the row-groups. The painting order between 1197 multiple row-groups is whatever the <a href="https://drafts.csswg.org/css-tables">table spec</a> 1198 specifies. For an individual row-group, the rules are painted in logical 1199 start to end order in both axes. 1200 1201 Again, note that for a specific fragment, 1202 <strong>all the column rules are painted before all the row rules</strong>, 1203 the above merely tries to clarify the painting order of the rules for 1204 a specific axis. 1205 1206 1207 Rule Overflow {#rule-overflow} 1208 ============================== 1209 1210 The column and row rule areas contributes to a fragment's [=ink overflow=]. 1211 Note that they can overflow an fragment's border-box due to negative inset 1212 values etc. 1213 1214 <aside class=example> 1215 Here's an <a href="examples/grid-longitudinal-003.html">example</a> showing 1216 rules that overflow their container and how they are clipped. 1217 Both grids have large negative insets to extend the rules outside of the container. 1218 The right grid has ''overflow: hidden'' which clips its rules at the padding area edge. 1219 <figure> 1220 <img src="media/grid-longitudinal-003.png"> 1221 <figcaption> 1222 Examples of rule overflow and clipping. 1223 </figcaption> 1224 </figure> 1225 </aside> 1226 1227 For clarity, none of the properties in this spec affects layout in any way. 1228 Column and row rules are purely a painting effect.