Mon, 06 Aug 2012 17:42:01 -0700
Add one example.
dbaron@6470 | 1 | <!DOCTYPE html> |
dbaron@6470 | 2 | <html lang="en"> |
dbaron@6470 | 3 | <head> |
dbaron@6470 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
dbaron@6474 | 5 | <title>CSS Region Styling Module Level 3</title> |
dbaron@6470 | 6 | <link rel=contents href="#contents"> |
dbaron@6470 | 7 | <link rel=index href="#index"> |
dbaron@6470 | 8 | <link rel="stylesheet" type="text/css" href="../default.css"> |
dbaron@6470 | 9 | <link rel="stylesheet" type="text/css" |
dbaron@6470 | 10 | href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css"> |
dbaron@6475 | 11 | <style> |
dbaron@6475 | 12 | .in-cards-demo { |
dbaron@6475 | 13 | width: 13em; |
dbaron@6475 | 14 | height: 8em; |
dbaron@6475 | 15 | |
dbaron@6475 | 16 | padding: 4px; |
dbaron@6475 | 17 | border: medium solid blue; |
dbaron@6475 | 18 | margin: 6px; |
dbaron@6475 | 19 | |
dbaron@6475 | 20 | font: medium/1.3 Times New Roman, Times, serif; |
dbaron@6475 | 21 | white-space: nowrap; |
dbaron@6475 | 22 | } |
dbaron@6475 | 23 | </style> |
dbaron@6470 | 24 | </head> |
dbaron@6470 | 25 | |
dbaron@6470 | 26 | <div class="head"> |
dbaron@6470 | 27 | <!--logo--> |
dbaron@6470 | 28 | |
dbaron@6474 | 29 | <h1>CSS Region Styling Module Level 3</h1> |
dbaron@6470 | 30 | |
dbaron@6470 | 31 | <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> |
dbaron@6470 | 32 | <dl> |
dbaron@6470 | 33 | <dt>This version: |
dbaron@6474 | 34 | <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-region-styling-[CDATE]/</a> |
dbaron@6470 | 35 | |
dbaron@6470 | 36 | <dt>Latest version: |
dbaron@6470 | 37 | <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a> |
dbaron@6470 | 38 | |
dbaron@6470 | 39 | <dt>Editor's draft: |
dbaron@6470 | 40 | <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> |
dbaron@6470 | 41 | |
dbaron@6470 | 42 | <!-- |
dbaron@6470 | 43 | <dt>Previous version: |
dbaron@6470 | 44 | <dd><a href="http://www.w3.org/PreviousVersionURI"> |
dbaron@6470 | 45 | http://www.w3.org/PreviousVersionURI</a> |
dbaron@6470 | 46 | --> |
dbaron@6470 | 47 | |
dbaron@6470 | 48 | <dt>Issue Tracking:</dt> |
dbaron@6470 | 49 | <dd>Maintained in document (only editor's draft is current) |
dbaron@6470 | 50 | |
dbaron@6470 | 51 | <dt>Feedback:</dt> |
dbaron@6470 | 52 | <dd><a href="http://lists.w3.org/Archives/Public/www-style/">[email protected]</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” |
dbaron@6470 | 53 | |
dbaron@6470 | 54 | <dt>Editors: |
dbaron@6470 | 55 | <dd class="h-card vcard"> |
dbaron@6470 | 56 | <a class="p-name fn u-url url" rel="author" |
dbaron@6470 | 57 | href="http://dbaron.org/">L. David Baron</a>, |
dbaron@6470 | 58 | <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a> |
dbaron@6470 | 59 | </dl> |
dbaron@6470 | 60 | |
dbaron@6470 | 61 | <!--copyright--> |
dbaron@6470 | 62 | |
dbaron@6470 | 63 | <hr title="Separator for header"> |
dbaron@6470 | 64 | </div> |
dbaron@6470 | 65 | |
dbaron@6470 | 66 | <h2 class="no-num no-toc" id="abstract">Abstract</h2> |
dbaron@6470 | 67 | |
dbaron@6470 | 68 | <p> |
dbaron@6470 | 69 | <a href="http://www.w3.org/TR/CSS/">CSS</a> is |
dbaron@6470 | 70 | a language for describing |
dbaron@6470 | 71 | the rendering of structured documents (such as HTML and XML) |
dbaron@6470 | 72 | on screen, on paper, in speech, etc. |
dbaron@6470 | 73 | This module contains the features of CSS |
dbaron@6470 | 74 | relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). |
dbaron@6470 | 75 | In interactive media, |
dbaron@6470 | 76 | it describes features that allow the overflow |
dbaron@6470 | 77 | from a fixed size container |
dbaron@6470 | 78 | to be handled by pagination (displaying one page at a time). |
dbaron@6470 | 79 | It also describes features, applying to all visual media, |
dbaron@6470 | 80 | that allow the contents of an element |
dbaron@6470 | 81 | to be spread across multiple containers, |
dbaron@6470 | 82 | allowing the contents to flow across multiple regions of a page |
dbaron@6470 | 83 | or to have different styles for different parts. |
dbaron@6470 | 84 | </p> |
dbaron@6470 | 85 | |
dbaron@6470 | 86 | <h2 class="no-num no-toc" id="status">Status of this document</h2> |
dbaron@6470 | 87 | |
dbaron@6470 | 88 | <!--status--> |
dbaron@6470 | 89 | |
dbaron@6470 | 90 | <p>The following features are at risk: … |
dbaron@6470 | 91 | |
dbaron@6470 | 92 | <h2 class="no-num no-toc" id="contents"> |
dbaron@6470 | 93 | Table of contents</h2> |
dbaron@6470 | 94 | |
dbaron@6470 | 95 | <!--toc--> |
dbaron@6470 | 96 | |
dbaron@6470 | 97 | <h2 id="intro"> |
dbaron@6470 | 98 | Introduction</h2> |
dbaron@6470 | 99 | |
dbaron@6470 | 100 | <p> |
dbaron@6470 | 101 | In CSS Level 1 [[CSS1]], placing more content than would fit |
dbaron@6470 | 102 | inside an element with a specified size |
dbaron@6470 | 103 | was generally an authoring error. |
dbaron@6470 | 104 | Doing so caused the content to extend |
dbaron@6470 | 105 | outside the bounds of the element, |
dbaron@6470 | 106 | which would likely cause |
dbaron@6470 | 107 | that content to overlap with other elements. |
dbaron@6470 | 108 | </p> |
dbaron@6470 | 109 | |
dbaron@6470 | 110 | <p> |
dbaron@6470 | 111 | CSS Level 2 [[CSS21]] introduced the 'overflow' property, |
dbaron@6470 | 112 | which allows authors to have overflow be handled by scrolling, |
dbaron@6470 | 113 | which means it is no longer an authoring error. |
dbaron@6470 | 114 | It also allows authors to specify |
dbaron@6470 | 115 | that overflow is handled by clipping, |
dbaron@6470 | 116 | which makes sense when the author's intent |
dbaron@6470 | 117 | is that the content not be shown. |
dbaron@6470 | 118 | </p> |
dbaron@6470 | 119 | |
dbaron@6470 | 120 | <p> |
dbaron@6470 | 121 | However, scrolling is not the only way |
dbaron@6470 | 122 | to present large amounts of content, |
dbaron@6470 | 123 | and may even not be the optimal way. |
dbaron@6470 | 124 | After all, the codex replaced the scroll |
dbaron@6470 | 125 | as the common format for large written works |
dbaron@6470 | 126 | because of its advantages. |
dbaron@6470 | 127 | </p> |
dbaron@6470 | 128 | |
dbaron@6470 | 129 | <p> |
dbaron@6470 | 130 | This specification introduces |
dbaron@6470 | 131 | a mechanism for Web pages to specify |
dbaron@6470 | 132 | that a region of a page should handle overflow |
dbaron@6470 | 133 | through pagination rather than through scrolling. |
dbaron@6470 | 134 | </p> |
dbaron@6470 | 135 | |
dbaron@6470 | 136 | <p> |
dbaron@6470 | 137 | This specification also extends the concept of overflow |
dbaron@6470 | 138 | in another direction. |
dbaron@6470 | 139 | Instead of requiring that authors specify a single region |
dbaron@6470 | 140 | into which the content of an element must flow, |
dbaron@6470 | 141 | this specification allows authors to specify multiple regions, |
dbaron@6470 | 142 | each with their own dimensions and styles, |
dbaron@6470 | 143 | so that the content of the element can flow from one to the next, |
dbaron@6470 | 144 | using as many as needed to place the content without overflowing. |
dbaron@6470 | 145 | </p> |
dbaron@6470 | 146 | |
dbaron@6470 | 147 | <p> |
dbaron@6470 | 148 | In both of these cases, implementations must |
dbaron@6470 | 149 | break the content in the block-progression dimension. |
dbaron@6470 | 150 | Implementations must do this is described |
dbaron@6470 | 151 | in the CSS Fragmentation Module [[!CSS3-BREAK]]. |
dbaron@6470 | 152 | </p> |
dbaron@6470 | 153 | |
dbaron@6470 | 154 | |
dbaron@6470 | 155 | <h2 id="paginated-overflow">Paginated overflow</h2> |
dbaron@6470 | 156 | |
dbaron@6470 | 157 | <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as css3-gcpm has?)</p> |
dbaron@6470 | 158 | |
dbaron@6470 | 159 | <p class="issue">Ability to display N pages at once |
dbaron@6470 | 160 | rather than just one page at once?</p> |
dbaron@6470 | 161 | |
dbaron@6470 | 162 | <h2 id="region-overflow">Region overflow</h2> |
dbaron@6470 | 163 | |
dbaron@6470 | 164 | <p> |
dbaron@6470 | 165 | This section introduces and defines the meaning of |
dbaron@6470 | 166 | the new ''regions'' (<span class="issue">or ''repeat''?</span>) |
dbaron@6470 | 167 | value of the 'overflow' property. |
dbaron@6470 | 168 | </p> |
dbaron@6470 | 169 | |
dbaron@6470 | 170 | <p> |
dbaron@6470 | 171 | When the computed value of 'overflow' for an element is ''regions'', |
dbaron@6470 | 172 | and implementations would otherwise have created a box for the element, |
dbaron@6470 | 173 | then implementations must create at least one box for that element. |
dbaron@6470 | 174 | Each box created for the element is called a <dfn>region box</dfn> |
dbaron@6470 | 175 | for that element. |
dbaron@6470 | 176 | (If an element with ''overflow: regions'' generates only one box, |
dbaron@6470 | 177 | that box is a <i>region box</i>. |
dbaron@6470 | 178 | However, if an element's computed 'overflow' is not ''regions'', |
dbaron@6470 | 179 | then its box is not a <i>region box</i>.) |
dbaron@6470 | 180 | Every <i>region box</i> is a fragmentation container, |
dbaron@6471 | 181 | and for each <i>region box</i> which ends with a fragmentation break, |
dbaron@6471 | 182 | (which could happen |
dbaron@6471 | 183 | because breakable content overflows in the block dimension |
dbaron@6471 | 184 | or because of a forced break), |
dbaron@6470 | 185 | there must be another <i>region box</i> created as a next sibling |
dbaron@6470 | 186 | of the previous one. |
dbaron@6470 | 187 | <span class="issue">Or is it as though it's a next sibling of |
dbaron@6470 | 188 | the element? Need to figure out exactly how this interacts with |
dbaron@6470 | 189 | other box-level fixup.</span> |
dbaron@6470 | 190 | (Breakable content might overflow in the box dimension either |
dbaron@6470 | 191 | because of a specified size on the region box |
dbaron@6470 | 192 | or because the region box is within a fragmentation context |
dbaron@6470 | 193 | in which it is being broken. |
dbaron@6470 | 194 | In other words, a single region box is never broken |
dbaron@6470 | 195 | across columns or pages; |
dbaron@6470 | 196 | the pieces that are in separate columns or pages |
dbaron@6470 | 197 | are always distinct region boxes.) |
dbaron@6470 | 198 | </p> |
dbaron@6470 | 199 | |
dbaron@6470 | 200 | <p class="issue"> |
dbaron@6470 | 201 | We also want '':nth-region()'' pseudo-elements |
dbaron@6470 | 202 | to be able to apply to the pieces of an element |
dbaron@6470 | 203 | split within a fragmentation context. |
dbaron@6470 | 204 | Should we require that authors who want to use |
dbaron@6470 | 205 | '':nth-region()'' in this way specify ''overflow:regions'' |
dbaron@6470 | 206 | (even if they don't specify a constrained height), |
dbaron@6470 | 207 | or should it work automatically for all elements |
dbaron@6470 | 208 | even if they don't have ''overflow: regions''? |
dbaron@6470 | 209 | </p> |
dbaron@6470 | 210 | |
dbaron@6475 | 211 | <div class="example"> |
dbaron@6475 | 212 | <table style="width: 100%"><tr><td><pre> |
dbaron@6475 | 213 | <!DOCTYPE HTML> |
dbaron@6475 | 214 | <title>Breaking content into |
dbaron@6475 | 215 | equal-sized cards</title> |
dbaron@6475 | 216 | <style> |
dbaron@6475 | 217 | .in-cards { |
dbaron@6475 | 218 | overflow: regions; |
dbaron@6475 | 219 | |
dbaron@6475 | 220 | width: 13em; |
dbaron@6475 | 221 | height: 8em; |
dbaron@6475 | 222 | |
dbaron@6475 | 223 | padding: 4px; |
dbaron@6475 | 224 | border: medium solid blue; |
dbaron@6475 | 225 | margin: 6px; |
dbaron@6475 | 226 | |
dbaron@6475 | 227 | font: medium/1.3 Times New |
dbaron@6475 | 228 | Roman, Times, serif; |
dbaron@6475 | 229 | } |
dbaron@6475 | 230 | </style> |
dbaron@6475 | 231 | <div class="in-cards"> |
dbaron@6475 | 232 | In this example, the text in the div |
dbaron@6475 | 233 | is broken into a series of cards. |
dbaron@6475 | 234 | These cards all have the same style. |
dbaron@6475 | 235 | The presence of enough content to |
dbaron@6475 | 236 | overflow one of the cards causes |
dbaron@6475 | 237 | another one to be created. The second |
dbaron@6475 | 238 | card is created just like it's the |
dbaron@6475 | 239 | next sibling of the first. |
dbaron@6475 | 240 | </div> |
dbaron@6475 | 241 | </pre></td><td> |
dbaron@6475 | 242 | <div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards. These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div> |
dbaron@6475 | 243 | <div class="in-cards-demo">one to be created. The second<br>card is created just like it's the<br>next sibling of the first.</div> |
dbaron@6475 | 244 | </td></tr></table> |
dbaron@6475 | 245 | </div> |
dbaron@6475 | 246 | |
dbaron@6470 | 247 | <h3 id="region-styling">Region styling</h3> |
dbaron@6470 | 248 | |
dbaron@6470 | 249 | <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4> |
dbaron@6470 | 250 | |
dbaron@6470 | 251 | <p> |
dbaron@6470 | 252 | The ::nth-region() pseudo-element is a pseudo-element |
dbaron@6470 | 253 | that describes some of the region boxes generated by an element. |
dbaron@6470 | 254 | The argument to the pseudo-element takes the same syntax |
dbaron@6470 | 255 | as the argument to the :nth-child() pseudo-class |
dbaron@6470 | 256 | defined in [[!SELECT]], and has the same meaning |
dbaron@6470 | 257 | except that the number is relative to |
dbaron@6470 | 258 | <i>region boxes</i> generated by the element |
dbaron@6470 | 259 | instead of siblings of the element. |
dbaron@6470 | 260 | </p> |
dbaron@6470 | 261 | |
dbaron@6470 | 262 | <p class="issue"> |
dbaron@6470 | 263 | If we go with a name for the 'overflow' value other than |
dbaron@6470 | 264 | ''overflow: regions'', |
dbaron@6470 | 265 | then we should probably rename this pseudo-element, |
dbaron@6470 | 266 | perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance(). |
dbaron@6470 | 267 | </p> |
dbaron@6470 | 268 | |
dbaron@6470 | 269 | <p class="note"> |
dbaron@6470 | 270 | Selectors that allow addressing regions |
dbaron@6470 | 271 | by counting from the end rather than the start |
dbaron@6470 | 272 | are intentionally not provided. |
dbaron@6470 | 273 | Such selectors would interfere with determining |
dbaron@6470 | 274 | the number of regions. |
dbaron@6470 | 275 | </p> |
dbaron@6470 | 276 | |
dbaron@6470 | 277 | <h4 id="style-of-regions">Styling of regions</h4> |
dbaron@6470 | 278 | |
dbaron@6470 | 279 | <p class="issue"> |
dbaron@6470 | 280 | Should this apply to region overflow only, |
dbaron@6470 | 281 | or also to paginated overflow? |
dbaron@6470 | 282 | (If it applies, |
dbaron@6470 | 283 | then stricter property restrictions would be needed |
dbaron@6470 | 284 | for paginated overflow.) |
dbaron@6470 | 285 | </p> |
dbaron@6470 | 286 | |
dbaron@6470 | 287 | <p> |
dbaron@6470 | 288 | In the absence of rules with ''::nth-region()'' pseudo-elements, |
dbaron@6470 | 289 | the computed style for each <i>region box</i> |
dbaron@6470 | 290 | is the computed style for the element |
dbaron@6470 | 291 | for which the <i>region box</i> was created. |
dbaron@6470 | 292 | However, the style for a <i>region box</i> is also influenced |
dbaron@6470 | 293 | by rules whose selector's <i>subject</i> [[!SELECT]] |
dbaron@6470 | 294 | has an ''::nth-region()'' pseudo-element, |
dbaron@6470 | 295 | if the 1-based number of the region box matches |
dbaron@6470 | 296 | that ''::nth-region()'' pseudo-element |
dbaron@6470 | 297 | and the selector (excluding the ''::nth-region()'' pseudo-element) |
dbaron@6470 | 298 | matches the element generating the regions. |
dbaron@6470 | 299 | </p> |
dbaron@6470 | 300 | |
dbaron@6470 | 301 | <p> |
dbaron@6470 | 302 | Styling an '':nth-region()'' pseudo-element with the 'overflow' |
dbaron@6470 | 303 | property has no effect; |
dbaron@6470 | 304 | the computed value of 'overflow' for the region box |
dbaron@6470 | 305 | remains the same as the computed value of overflow for the element. |
dbaron@6470 | 306 | </p> |
dbaron@6470 | 307 | |
dbaron@6470 | 308 | <p> |
dbaron@6470 | 309 | Specifying ''display: none'' for a region box causes |
dbaron@6470 | 310 | the region box with that index not to be generated. |
dbaron@6470 | 311 | However, in terms of the indices |
dbaron@6470 | 312 | used for matching '':nth-region()'' pseudo-elements |
dbaron@6470 | 313 | of later region boxes, |
dbaron@6470 | 314 | it still counts as though it was generated. |
dbaron@6470 | 315 | However, since it is not generated, it does not contain any content. |
dbaron@6470 | 316 | </p> |
dbaron@6470 | 317 | |
dbaron@6470 | 318 | <p class="issue"> |
dbaron@6470 | 319 | Would it make more sense to forbid ''display:none''? |
dbaron@6470 | 320 | Or perhaps to forbid 'display', 'position', 'float', |
dbaron@6470 | 321 | and similar (in addition to 'overflow')? |
dbaron@6470 | 322 | </p> |
dbaron@6470 | 323 | |
dbaron@6470 | 324 | <p> |
dbaron@6470 | 325 | To match the model for other pseudo-elements |
dbaron@6470 | 326 | where the pseudo-elements live inside their corresponding element, |
dbaron@6470 | 327 | declarations in ''::nth-region()'' pseudo-elements override |
dbaron@6470 | 328 | declarations in rules without the pseudo-element. |
dbaron@6470 | 329 | The relative priority within such declarations is determined |
dbaron@6470 | 330 | by normal cascading order (see [[!CSS21]]). |
dbaron@6470 | 331 | </p> |
dbaron@6470 | 332 | |
dbaron@6470 | 333 | <p> |
dbaron@6470 | 334 | Styles specified on ''::nth-region()'' pseudo-elements |
dbaron@6470 | 335 | do affect inheritance to content within the <i>region box</i>. |
dbaron@6470 | 336 | In other words, the content within the <i>region box</i> must |
dbaron@6470 | 337 | inherit from the region box's style (i.e., the pseudo-element style) |
dbaron@6470 | 338 | rather than directly from the element. |
dbaron@6470 | 339 | This means that elements split between region boxes may |
dbaron@6470 | 340 | have different styles for different parts of the element. |
dbaron@6470 | 341 | </p> |
dbaron@6470 | 342 | |
dbaron@6472 | 343 | <p class="issue"> |
dbaron@6472 | 344 | This inheritance rule allows specifying styles indirectly |
dbaron@6472 | 345 | (by using explicit ''inherit'' or using default inheritance |
dbaron@6472 | 346 | on properties that don't apply to '':first-letter'') |
dbaron@6472 | 347 | that can't be specified directly |
dbaron@6472 | 348 | (based on the rules in the next section). |
dbaron@6472 | 349 | This is a problem. |
dbaron@6472 | 350 | The restrictions that apply to styling inside regions |
dbaron@6472 | 351 | should also apply to inheritance from regions. |
dbaron@6472 | 352 | </p> |
dbaron@6472 | 353 | |
dbaron@6470 | 354 | <h4 id="style-in-regions">Styling inside regions</h4> |
dbaron@6470 | 355 | |
dbaron@6470 | 356 | <p class="issue"> |
dbaron@6470 | 357 | Should this apply to region overflow only, |
dbaron@6470 | 358 | or also to paginated overflow, |
dbaron@6470 | 359 | or even to pagination across pages? |
dbaron@6470 | 360 | </p> |
dbaron@6470 | 361 | |
dbaron@6470 | 362 | <p> |
dbaron@6470 | 363 | The '':nth-region()'' pseudo-element |
dbaron@6470 | 364 | can also be used to style |
dbaron@6470 | 365 | content inside of a <i>region box</i>. |
dbaron@6470 | 366 | Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements, |
dbaron@6470 | 367 | the '':nth-region()'' pseudo-element can be applied |
dbaron@6470 | 368 | to parts of the selector other than the subject: |
dbaron@6470 | 369 | in particular, it can match ancestors of the subject. |
dbaron@6470 | 370 | However, the only CSS properties applied |
dbaron@6470 | 371 | by rules with such selectors |
dbaron@6470 | 372 | are those that apply |
dbaron@6470 | 373 | to the ''::first-letter'' pseudo-element. |
dbaron@6470 | 374 | </p> |
dbaron@6470 | 375 | |
dbaron@6470 | 376 | <p> |
dbaron@6470 | 377 | To be more precise, |
dbaron@6470 | 378 | when a rule's selector has ''::nth-region()'' pseudo-elements |
dbaron@6470 | 379 | attached to parts of the selector other than the subject, |
dbaron@6470 | 380 | the declarations in that rule apply to |
dbaron@6470 | 381 | a fragment (or pseudo-element thereof) when: |
dbaron@6470 | 382 | </p> |
dbaron@6470 | 383 | <ol> |
dbaron@6470 | 384 | <li> |
dbaron@6470 | 385 | the declarations are for properties that apply to the |
dbaron@6470 | 386 | ''::first-letter'' pseudo-element, |
dbaron@6470 | 387 | </li> |
dbaron@6470 | 388 | <li> |
dbaron@6470 | 389 | the declarations would apply to |
dbaron@6470 | 390 | that fragment (or pseudo-element thereof) |
dbaron@6470 | 391 | had those ''::nth-region()'' pseudo-elements been removed, |
dbaron@6470 | 392 | with a particular association between |
dbaron@6470 | 393 | each sequence of simple selectors and the element it matched, |
dbaron@6470 | 394 | and |
dbaron@6470 | 395 | </li> |
dbaron@6470 | 396 | <li> |
dbaron@6470 | 397 | for each removed ''::nth-region()'' pseudo-element, |
dbaron@6470 | 398 | the fragment lives within a <i>region box</i> |
dbaron@6470 | 399 | of the element associated in that association |
dbaron@6470 | 400 | with the selector that the pseudo-element was attached to, |
dbaron@6470 | 401 | and whose index matches the pseudo-element. |
dbaron@6470 | 402 | </li> |
dbaron@6470 | 403 | </ol> |
dbaron@6470 | 404 | |
dbaron@6470 | 405 | <h3 id="max-lines">The 'max-lines' property</h3> |
dbaron@6470 | 406 | |
dbaron@6470 | 407 | <p> |
dbaron@6470 | 408 | Authors may wish to style the opening lines of an element |
dbaron@6470 | 409 | with different styles |
dbaron@6470 | 410 | by putting those opening lines in a separate region. |
dbaron@6470 | 411 | However, since it may be difficult to predict the exact height |
dbaron@6470 | 412 | occupied by those lines |
dbaron@6470 | 413 | in order to restrict the first region to that height, |
dbaron@6470 | 414 | this specification introduces a 'max-lines' property |
dbaron@6470 | 415 | that forces a region to break |
dbaron@6470 | 416 | after a specified number of lines. |
dbaron@6470 | 417 | This forces a break after the given number of lines |
dbaron@6470 | 418 | contained within the element or its descendants, |
dbaron@6470 | 419 | as long as those lines are in the same block formatting context. |
dbaron@6470 | 420 | </p> |
dbaron@6470 | 421 | |
dbaron@6470 | 422 | <table class=propdef> |
dbaron@6470 | 423 | <tr> |
dbaron@6470 | 424 | <th>Name: |
dbaron@6470 | 425 | <td><dfn>max-lines</dfn> |
dbaron@6470 | 426 | <tr> |
dbaron@6470 | 427 | <th><a href="#values">Value</a>: |
dbaron@6470 | 428 | <td>none | <integer> |
dbaron@6470 | 429 | <tr> |
dbaron@6470 | 430 | <th>Initial: |
dbaron@6470 | 431 | <td>none |
dbaron@6470 | 432 | <tr> |
dbaron@6470 | 433 | <th>Applies to: |
dbaron@6470 | 434 | <td>region boxes |
dbaron@6470 | 435 | <tr> |
dbaron@6470 | 436 | <th>Inherited: |
dbaron@6470 | 437 | <td>no |
dbaron@6470 | 438 | <tr> |
dbaron@6470 | 439 | <th>Percentages: |
dbaron@6470 | 440 | <td>N/A |
dbaron@6470 | 441 | <tr> |
dbaron@6470 | 442 | <th>Media: |
dbaron@6470 | 443 | <td>visual |
dbaron@6470 | 444 | <tr> |
dbaron@6470 | 445 | <th>Computed value: |
dbaron@6470 | 446 | <td>specified value |
dbaron@6470 | 447 | <tr> |
dbaron@6470 | 448 | <th>Animatable: |
dbaron@6470 | 449 | <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a> |
dbaron@6470 | 450 | <tr> |
dbaron@6470 | 451 | <th>Canonical order: |
dbaron@6470 | 452 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
dbaron@6470 | 453 | </table> |
dbaron@6470 | 454 | |
dbaron@6470 | 455 | <dl> |
dbaron@6470 | 456 | <dt>none |
dbaron@6470 | 457 | <dd> |
dbaron@6470 | 458 | <p> |
dbaron@6470 | 459 | Breaks occur only as specified elsewhere. |
dbaron@6470 | 460 | </p> |
dbaron@6470 | 461 | </dd> |
dbaron@6470 | 462 | |
dbaron@6470 | 463 | <dt><integer> |
dbaron@6470 | 464 | <dd> |
dbaron@6470 | 465 | <p> |
dbaron@6470 | 466 | In addition to any breaks specified elsewhere, |
dbaron@6470 | 467 | a break is forced before any line that would exceed |
dbaron@6470 | 468 | the given number of lines |
dbaron@6470 | 469 | being placed inside the element |
dbaron@6470 | 470 | (excluding lines that are in |
dbaron@6470 | 471 | a different block formatting context from |
dbaron@6470 | 472 | the block formatting context to which |
dbaron@6470 | 473 | an unstyled child of the element would belong). |
dbaron@6470 | 474 | </p> |
dbaron@6470 | 475 | |
dbaron@6470 | 476 | <p class="issue"> |
dbaron@6470 | 477 | If there are multiple boundaries between this line |
dbaron@6470 | 478 | and the previous, where exactly (in terms of element |
dbaron@6470 | 479 | boundaries) is the break forced? |
dbaron@6470 | 480 | </p> |
dbaron@6470 | 481 | |
dbaron@6470 | 482 | <p> |
dbaron@6470 | 483 | Only positive integers are accepted. |
dbaron@6470 | 484 | Zero or negative integers are a parse error. |
dbaron@6470 | 485 | </p> |
dbaron@6470 | 486 | </dd> |
dbaron@6470 | 487 | </dl> |
dbaron@6470 | 488 | |
dbaron@6470 | 489 | <p class="issue">Should this apply to regions overflow only, or also |
dbaron@6470 | 490 | to pagination?</p> |
dbaron@6470 | 491 | |
dbaron@6470 | 492 | <h2 id="conformance"> |
dbaron@6470 | 493 | Conformance</h2> |
dbaron@6470 | 494 | |
dbaron@6470 | 495 | <h3 id="placement"> |
dbaron@6470 | 496 | Module interactions</h3> |
dbaron@6470 | 497 | |
dbaron@6470 | 498 | <p>This module extends the 'overflow' |
dbaron@6470 | 499 | feature defined in [[CSS21]] section 11.1.1. It defines additional |
dbaron@6470 | 500 | overflow handling mechanisms that implementations must implement as |
dbaron@6470 | 501 | described in this module in order to conform to this module.</p> |
dbaron@6470 | 502 | |
dbaron@6470 | 503 | <p>No properties in this module apply to the <code>::first-line</code> or |
dbaron@6470 | 504 | <code>::first-letter</code> pseudo-elements.</p> |
dbaron@6470 | 505 | |
dbaron@6470 | 506 | <h3 id="values"> |
dbaron@6470 | 507 | Values</h3> |
dbaron@6470 | 508 | |
dbaron@6470 | 509 | <p>This specification follows the |
dbaron@6470 | 510 | <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property |
dbaron@6470 | 511 | definition conventions</a> from [[!CSS21]]. Value types not defined in |
dbaron@6470 | 512 | this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. |
dbaron@6470 | 513 | Other CSS modules may expand the definitions of these value types: for |
dbaron@6470 | 514 | example [[CSS3COLOR]], when combined with this module, expands the |
dbaron@6470 | 515 | definition of the <color> value type as used in this specification.</p> |
dbaron@6470 | 516 | |
dbaron@6470 | 517 | <p>In addition to the property-specific values listed in their definitions, |
dbaron@6470 | 518 | all properties defined in this specification also accept the |
dbaron@6470 | 519 | <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> |
dbaron@6470 | 520 | keyword as their property value. For readability it has not been repeated |
dbaron@6470 | 521 | explicitly. |
dbaron@6470 | 522 | |
dbaron@6470 | 523 | |
dbaron@6470 | 524 | <h3 id="conventions"> |
dbaron@6470 | 525 | Document conventions</h3> |
dbaron@6470 | 526 | |
dbaron@6470 | 527 | <p>Conformance requirements are expressed with a combination of |
dbaron@6470 | 528 | descriptive assertions and RFC 2119 terminology. The key words âMUSTâ, |
dbaron@6470 | 529 | âMUST NOTâ, âREQUIREDâ, âSHALLâ, âSHALL NOTâ, âSHOULDâ, âSHOULD NOTâ, |
dbaron@6470 | 530 | âRECOMMENDEDâ, âMAYâ, and âOPTIONALâ in the normative parts of this |
dbaron@6470 | 531 | document are to be interpreted as described in RFC 2119. |
dbaron@6470 | 532 | However, for readability, these words do not appear in all uppercase |
dbaron@6470 | 533 | letters in this specification. |
dbaron@6470 | 534 | |
dbaron@6470 | 535 | <p>All of the text of this specification is normative except sections |
dbaron@6470 | 536 | explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p> |
dbaron@6470 | 537 | |
dbaron@6470 | 538 | <p>Examples in this specification are introduced with the words âfor exampleâ |
dbaron@6470 | 539 | or are set apart from the normative text with <code>class="example"</code>, |
dbaron@6470 | 540 | like this: |
dbaron@6470 | 541 | |
dbaron@6470 | 542 | <div class="example"> |
dbaron@6470 | 543 | <p>This is an example of an informative example.</p> |
dbaron@6470 | 544 | </div> |
dbaron@6470 | 545 | |
dbaron@6470 | 546 | <p>Informative notes begin with the word âNoteâ and are set apart from the |
dbaron@6470 | 547 | normative text with <code>class="note"</code>, like this: |
dbaron@6470 | 548 | |
dbaron@6470 | 549 | <p class="note">Note, this is an informative note.</p> |
dbaron@6470 | 550 | |
dbaron@6470 | 551 | <h3 id="conformance-classes"> |
dbaron@6470 | 552 | Conformance classes</h3> |
dbaron@6470 | 553 | |
dbaron@6474 | 554 | <p>Conformance to CSS Region Styling Module Level 3 |
dbaron@6470 | 555 | is defined for three conformance classes: |
dbaron@6470 | 556 | <dl> |
dbaron@6470 | 557 | <dt><dfn title="style sheet!!as conformance class">style sheet</dfn> |
dbaron@6470 | 558 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS |
dbaron@6470 | 559 | style sheet</a>. |
dbaron@6470 | 560 | <dt><dfn>renderer</dfn></dt> |
dbaron@6470 | 561 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
dbaron@6470 | 562 | that interprets the semantics of a style sheet and renders |
dbaron@6470 | 563 | documents that use them. |
dbaron@6470 | 564 | <dt><dfn id="authoring-tool">authoring tool</dfn></dt> |
dbaron@6470 | 565 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
dbaron@6470 | 566 | that writes a style sheet. |
dbaron@6470 | 567 | </dl> |
dbaron@6470 | 568 | |
dbaron@6474 | 569 | <p>A style sheet is conformant to CSS Region Styling Module Level 3 |
dbaron@6470 | 570 | if all of its statements that use syntax defined in this module are valid |
dbaron@6470 | 571 | according to the generic CSS grammar and the individual grammars of each |
dbaron@6470 | 572 | feature defined in this module. |
dbaron@6470 | 573 | |
dbaron@6474 | 574 | <p>A renderer is conformant to CSS Region Styling Module Level 3 |
dbaron@6470 | 575 | if, in addition to interpreting the style sheet as defined by the |
dbaron@6470 | 576 | appropriate specifications, it supports all the features defined |
dbaron@6474 | 577 | by CSS Region Styling Module Level 3 by parsing them correctly |
dbaron@6470 | 578 | and rendering the document accordingly. However, the inability of a |
dbaron@6470 | 579 | UA to correctly render a document due to limitations of the device |
dbaron@6470 | 580 | does not make the UA non-conformant. (For example, a UA is not |
dbaron@6470 | 581 | required to render color on a monochrome monitor.) |
dbaron@6470 | 582 | |
dbaron@6474 | 583 | <p>An authoring tool is conformant to CSS Region Styling Module Level 3 |
dbaron@6470 | 584 | if it writes style sheets that are syntactically correct according to the |
dbaron@6470 | 585 | generic CSS grammar and the individual grammars of each feature in |
dbaron@6470 | 586 | this module, and meet all other conformance requirements of style sheets |
dbaron@6470 | 587 | as described in this module. |
dbaron@6470 | 588 | |
dbaron@6470 | 589 | <h3 id="partial"> |
dbaron@6470 | 590 | Partial implementations</h3> |
dbaron@6470 | 591 | |
dbaron@6470 | 592 | <p>So that authors can exploit the forward-compatible parsing rules to |
dbaron@6470 | 593 | assign fallback values, CSS renderers <strong>must</strong> |
dbaron@6470 | 594 | treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore |
dbaron@6470 | 595 | as appropriate</a>) any at-rules, properties, property values, keywords, |
dbaron@6470 | 596 | and other syntactic constructs for which they have no usable level of |
dbaron@6470 | 597 | support. In particular, user agents <strong>must not</strong> selectively |
dbaron@6470 | 598 | ignore unsupported component values and honor supported values in a single |
dbaron@6470 | 599 | multi-value property declaration: if any value is considered invalid |
dbaron@6470 | 600 | (as unsupported values must be), CSS requires that the entire declaration |
dbaron@6470 | 601 | be ignored.</p> |
dbaron@6470 | 602 | |
dbaron@6470 | 603 | <h3 id="experimental"> |
dbaron@6470 | 604 | Experimental implementations</h3> |
dbaron@6470 | 605 | |
dbaron@6470 | 606 | <p>To avoid clashes with future CSS features, the CSS2.1 specification |
dbaron@6470 | 607 | reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed |
dbaron@6470 | 608 | syntax</a> for proprietary and experimental extensions to CSS. |
dbaron@6470 | 609 | |
dbaron@6470 | 610 | <p>Prior to a specification reaching the Candidate Recommendation stage |
dbaron@6470 | 611 | in the W3C process, all implementations of a CSS feature are considered |
dbaron@6470 | 612 | experimental. The CSS Working Group recommends that implementations |
dbaron@6470 | 613 | use a vendor-prefixed syntax for such features, including those in |
dbaron@6470 | 614 | W3C Working Drafts. This avoids incompatibilities with future changes |
dbaron@6470 | 615 | in the draft. |
dbaron@6470 | 616 | </p> |
dbaron@6470 | 617 | |
dbaron@6470 | 618 | <h3 id="testing"> |
dbaron@6470 | 619 | Non-experimental implementations</h3> |
dbaron@6470 | 620 | |
dbaron@6470 | 621 | <p>Once a specification reaches the Candidate Recommendation stage, |
dbaron@6470 | 622 | non-experimental implementations are possible, and implementors should |
dbaron@6470 | 623 | release an unprefixed implementation of any CR-level feature they |
dbaron@6470 | 624 | can demonstrate to be correctly implemented according to spec. |
dbaron@6470 | 625 | |
dbaron@6470 | 626 | <p>To establish and maintain the interoperability of CSS across |
dbaron@6470 | 627 | implementations, the CSS Working Group requests that non-experimental |
dbaron@6470 | 628 | CSS renderers submit an implementation report (and, if necessary, the |
dbaron@6470 | 629 | testcases used for that implementation report) to the W3C before |
dbaron@6470 | 630 | releasing an unprefixed implementation of any CSS features. Testcases |
dbaron@6470 | 631 | submitted to W3C are subject to review and correction by the CSS |
dbaron@6470 | 632 | Working Group. |
dbaron@6470 | 633 | |
dbaron@6470 | 634 | <p>Further information on submitting testcases and implementation reports |
dbaron@6470 | 635 | can be found from on the CSS Working Group's website at |
dbaron@6470 | 636 | <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. |
dbaron@6470 | 637 | Questions should be directed to the |
dbaron@6470 | 638 | <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> |
dbaron@6470 | 639 | mailing list. |
dbaron@6470 | 640 | |
dbaron@6470 | 641 | <h3 id="cr-exit-criteria"> |
dbaron@6470 | 642 | CR exit criteria</h3> |
dbaron@6470 | 643 | |
dbaron@6470 | 644 | <p class=issue>[Change or remove the following CR exit criteria if |
dbaron@6470 | 645 | the spec is not a module, but, e.g., a Note or a profile. This text was <a |
dbaron@6470 | 646 | href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p> |
dbaron@6470 | 647 | |
dbaron@6470 | 648 | <p> |
dbaron@6470 | 649 | For this specification to be advanced to Proposed Recommendation, |
dbaron@6470 | 650 | there must be at least two independent, interoperable implementations |
dbaron@6470 | 651 | of each feature. Each feature may be implemented by a different set of |
dbaron@6470 | 652 | products, there is no requirement that all features be implemented by |
dbaron@6470 | 653 | a single product. For the purposes of this criterion, we define the |
dbaron@6470 | 654 | following terms: |
dbaron@6470 | 655 | |
dbaron@6470 | 656 | <dl> |
dbaron@6470 | 657 | <dt>independent <dd>each implementation must be developed by a |
dbaron@6470 | 658 | different party and cannot share, reuse, or derive from code |
dbaron@6470 | 659 | used by another qualifying implementation. Sections of code that |
dbaron@6470 | 660 | have no bearing on the implementation of this specification are |
dbaron@6470 | 661 | exempt from this requirement. |
dbaron@6470 | 662 | |
dbaron@6470 | 663 | <dt>interoperable <dd>passing the respective test case(s) in the |
dbaron@6470 | 664 | official CSS test suite, or, if the implementation is not a Web |
dbaron@6470 | 665 | browser, an equivalent test. Every relevant test in the test |
dbaron@6470 | 666 | suite should have an equivalent test created if such a user |
dbaron@6470 | 667 | agent (UA) is to be used to claim interoperability. In addition |
dbaron@6470 | 668 | if such a UA is to be used to claim interoperability, then there |
dbaron@6470 | 669 | must one or more additional UAs which can also pass those |
dbaron@6470 | 670 | equivalent tests in the same way for the purpose of |
dbaron@6470 | 671 | interoperability. The equivalent tests must be made publicly |
dbaron@6470 | 672 | available for the purposes of peer review. |
dbaron@6470 | 673 | |
dbaron@6470 | 674 | <dt>implementation <dd>a user agent which: |
dbaron@6470 | 675 | |
dbaron@6470 | 676 | <ol class=inline> |
dbaron@6470 | 677 | <li>implements the specification. |
dbaron@6470 | 678 | |
dbaron@6470 | 679 | <li>is available to the general public. The implementation may |
dbaron@6470 | 680 | be a shipping product or other publicly available version |
dbaron@6470 | 681 | (i.e., beta version, preview release, or ânightly buildâ). |
dbaron@6470 | 682 | Non-shipping product releases must have implemented the |
dbaron@6470 | 683 | feature(s) for a period of at least one month in order to |
dbaron@6470 | 684 | demonstrate stability. |
dbaron@6470 | 685 | |
dbaron@6470 | 686 | <li>is not experimental (i.e., a version specifically designed |
dbaron@6470 | 687 | to pass the test suite and is not intended for normal usage |
dbaron@6470 | 688 | going forward). |
dbaron@6470 | 689 | </ol> |
dbaron@6470 | 690 | </dl> |
dbaron@6470 | 691 | |
dbaron@6470 | 692 | <p>The specification will remain Candidate Recommendation for at least |
dbaron@6470 | 693 | six months. |
dbaron@6470 | 694 | |
dbaron@6470 | 695 | <h2 class=no-num id="acknowledgments"> |
dbaron@6470 | 696 | Acknowledgments</h2> |
dbaron@6470 | 697 | |
dbaron@6470 | 698 | <p> |
dbaron@6470 | 699 | Thanks especially to the feedback from |
dbaron@6470 | 700 | Håkon Wium Lie, |
dbaron@6470 | 701 | Florian Rivoal, |
dbaron@6473 | 702 | Alan Stearns, |
dbaron@6470 | 703 | and all the rest of the |
dbaron@6470 | 704 | <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. |
dbaron@6470 | 705 | </p> |
dbaron@6470 | 706 | |
dbaron@6470 | 707 | <h2 class=no-num id="references"> |
dbaron@6470 | 708 | References</h2> |
dbaron@6470 | 709 | |
dbaron@6470 | 710 | <h3 class="no-num" id="normative-references"> |
dbaron@6470 | 711 | Normative references</h3> |
dbaron@6470 | 712 | <!--normative--> |
dbaron@6470 | 713 | |
dbaron@6470 | 714 | <h3 class="no-num" id="other-references"> |
dbaron@6470 | 715 | Other references</h3> |
dbaron@6470 | 716 | <!--informative--> |
dbaron@6470 | 717 | |
dbaron@6470 | 718 | <h2 class="no-num" id="index"> |
dbaron@6470 | 719 | Index</h2> |
dbaron@6470 | 720 | <!--index--> |
dbaron@6470 | 721 | |
dbaron@6470 | 722 | <h2 class="no-num" id="property-index"> |
dbaron@6470 | 723 | Property index</h2> |
dbaron@6470 | 724 | <!-- properties --> |
dbaron@6470 | 725 | |
dbaron@6470 | 726 | </body> |
dbaron@6470 | 727 | </html> |
dbaron@6470 | 728 | <!-- Keep this comment at the end of the file |
dbaron@6470 | 729 | Local variables: |
dbaron@6470 | 730 | mode: sgml |
dbaron@6470 | 731 | sgml-declaration:"~/SGML/HTML4.decl" |
dbaron@6470 | 732 | sgml-default-doctype-name:"html" |
dbaron@6470 | 733 | sgml-minimize-attributes:t |
dbaron@6470 | 734 | sgml-nofill-elements:("pre" "style" "br") |
dbaron@6470 | 735 | sgml-live-element-indicator:t |
dbaron@6470 | 736 | sgml-omittag:nil |
dbaron@6470 | 737 | sgml-shorttag:nil |
dbaron@6470 | 738 | sgml-namecase-general:t |
dbaron@6470 | 739 | sgml-general-insert-case:lower |
dbaron@6470 | 740 | sgml-always-quote-attributes:t |
dbaron@6470 | 741 | sgml-indent-step:nil |
dbaron@6470 | 742 | sgml-indent-data:t |
dbaron@6470 | 743 | sgml-parent-document:nil |
dbaron@6470 | 744 | sgml-exposed-tags:nil |
dbaron@6470 | 745 | sgml-local-catalogs:nil |
dbaron@6470 | 746 | sgml-local-ecat-files:nil |
dbaron@6470 | 747 | End: |
dbaron@6470 | 748 | --> |
dbaron@6470 | 749 |