Mon, 11 Feb 2013 14:15:36 -0800
[css3-page][css3-gcpm] Move :blank to css3-page, per WG resolution
CSSWG resolution:
http://lists.w3.org/Archives/Public/www-style/2012Nov/0250.html
howcome@7417 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
howcome@7417 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
howcome@7417 | 3 | |
howcome@7417 | 4 | <html lang=en> |
howcome@7417 | 5 | <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> |
howcome@7417 | 6 | <title>CSS Generated Content for Paged Media Module</title> |
howcome@7417 | 7 | |
howcome@7417 | 8 | <link href="http://purl.org/dc/terms/" rel=schema.dcterms> |
howcome@7417 | 9 | <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
howcome@7417 | 10 | rel=dcterms.rights> |
howcome@7417 | 11 | <meta content="CSS Generated Content for Paged Media Module" |
howcome@7417 | 12 | name=dcterms.title> |
howcome@7417 | 13 | <meta content=text name=dcterms.type> |
simon@7435 | 14 | <meta content=2013-02-11 name=dcterms.issued> |
howcome@7417 | 15 | <meta content="Håkon Wium Lie" name=dcterms.creator> |
howcome@7417 | 16 | <meta content=W3C name=dcterms.publisher> |
simon@7435 | 17 | <meta content="http://www.w3.org/TR/2013/ED-css3-gcpm-20130211/" |
howcome@7417 | 18 | name=dcterms.identifier> |
simon@7435 | 19 | <meta content="text/html; charset=utf-8" http-equiv=Content-Type> |
howcome@7417 | 20 | <link href="../default.css" rel=stylesheet type="text/css"> |
howcome@7417 | 21 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
howcome@7417 | 22 | type="text/css"> |
howcome@7417 | 23 | <style type="text/css"> |
howcome@7417 | 24 | .example img { display: block } |
howcome@7417 | 25 | .example { background: #ddd } |
howcome@7417 | 26 | body { line-height: 1.3 } |
howcome@7417 | 27 | </style> |
howcome@7417 | 28 | |
howcome@7417 | 29 | <body> |
howcome@7417 | 30 | <div class=head> <!--begin-logo--> |
howcome@7417 | 31 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
howcome@7417 | 32 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
howcome@7417 | 33 | |
howcome@7417 | 34 | <h1>CSS Generated Content for Paged Media Module</h1> |
howcome@7417 | 35 | |
simon@7435 | 36 | <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 11 February 2013</h2> |
howcome@7417 | 37 | |
howcome@7417 | 38 | <dl> |
howcome@7417 | 39 | <dt>This version: |
howcome@7417 | 40 | |
howcome@7417 | 41 | <dd><a |
simon@7435 | 42 | href="http://www.w3.org/TR/2013/ED-css3-gcpm-20130211/">http://www.w3.org/TR/2013/ED-css3-gcpm-20130211/</a> |
howcome@7417 | 43 | |
howcome@7417 | 44 | <dt>Latest version: |
howcome@7417 | 45 | |
howcome@7417 | 46 | <dd><a |
howcome@7417 | 47 | href="http://www.w3.org/TR/css3-gcpm/">http://www.w3.org/TR/css3-gcpm/</a> |
howcome@7417 | 48 | |
howcome@7417 | 49 | <dt>Previous version: |
howcome@7417 | 50 | |
howcome@7417 | 51 | <dd><a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/"> |
howcome@7417 | 52 | http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/</a> |
howcome@7417 | 53 | |
howcome@7417 | 54 | <dt>Editor: |
howcome@7417 | 55 | |
howcome@7417 | 56 | <dd>Håkon Wium Lie, Opera Software, howcome@opera.com |
howcome@7417 | 57 | </dl> |
howcome@7417 | 58 | <!--begin-copyright--> |
howcome@7417 | 59 | <p class=copyright><a |
howcome@7417 | 60 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
howcome@7417 | 61 | rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr |
howcome@7417 | 62 | title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a |
howcome@7417 | 63 | href="http://www.csail.mit.edu/"><abbr |
howcome@7417 | 64 | title="Massachusetts Institute of Technology">MIT</abbr></a>, <a |
howcome@7417 | 65 | href="http://www.ercim.eu/"><abbr |
howcome@7417 | 66 | title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, |
howcome@7417 | 67 | <a href="http://www.keio.ac.jp/">Keio</a>, <a |
howcome@7417 | 68 | href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a |
howcome@7417 | 69 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
howcome@7417 | 70 | <a |
howcome@7417 | 71 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
howcome@7417 | 72 | and <a |
howcome@7417 | 73 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
howcome@7417 | 74 | use</a> rules apply.</p> |
howcome@7417 | 75 | <!--end-copyright--> |
howcome@7417 | 76 | <hr title="Separator for header"> |
howcome@7417 | 77 | </div> |
howcome@7417 | 78 | |
howcome@7417 | 79 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
howcome@7417 | 80 | |
howcome@7417 | 81 | <p>This module describes features often used in printed publications. Most |
howcome@7417 | 82 | of the specified functionality involves some sort of generated content |
howcome@7417 | 83 | where content from the document is adorned, replicated, or moved in the |
howcome@7417 | 84 | final presentation of the document. Along with two other CSS3 modules – |
howcome@7417 | 85 | multi-column layout and paged media – this module offers advanced |
howcome@7417 | 86 | functionality for presenting structured documents on paged media. Paged |
howcome@7417 | 87 | media can be printed, or presented on screens. |
howcome@7417 | 88 | |
howcome@7417 | 89 | <h2 class="no-num no-toc" id=status-of-this-document>Status of this |
howcome@7417 | 90 | document</h2> |
howcome@7417 | 91 | <!--begin-status--> |
howcome@7417 | 92 | |
howcome@7417 | 93 | <p>This is a public copy of the editors' draft. It is provided for |
howcome@7417 | 94 | discussion only and may change at any moment. Its publication here does |
howcome@7417 | 95 | not imply endorsement of its contents by W3C. Don't cite this document |
howcome@7417 | 96 | other than as work in progress. |
howcome@7417 | 97 | |
howcome@7417 | 98 | <p>The (<a |
howcome@7417 | 99 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
howcome@7417 | 100 | mailing list <a |
howcome@7417 | 101 | href="mailto:www-style@w3.org?Subject=%5Bcss3-gcpm%5D%20PUT%20SUBJECT%20HERE"> |
howcome@7417 | 102 | www-style@w3.org</a> (see <a |
howcome@7417 | 103 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
howcome@7417 | 104 | discussion of this specification. When sending e-mail, please put the text |
howcome@7417 | 105 | “css3-gcpm” in the subject, preferably like this: |
howcome@7417 | 106 | “[<!---->css3-gcpm<!---->] <em>…summary of comment…</em>” |
howcome@7417 | 107 | |
howcome@7417 | 108 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
howcome@7417 | 109 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
howcome@7417 | 110 | |
howcome@7417 | 111 | <p>This document was produced by a group operating under the <a |
howcome@7417 | 112 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
howcome@7417 | 113 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
howcome@7417 | 114 | rel=disclosure>public list of any patent disclosures</a> made in |
howcome@7417 | 115 | connection with the deliverables of the group; that page also includes |
howcome@7417 | 116 | instructions for disclosing a patent. An individual who has actual |
howcome@7417 | 117 | knowledge of a patent which the individual believes contains <a |
howcome@7417 | 118 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
howcome@7417 | 119 | Claim(s)</a> must disclose the information in accordance with <a |
howcome@7417 | 120 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
howcome@7417 | 121 | W3C Patent Policy</a>.</p> |
howcome@7417 | 122 | <!--end-status--> |
howcome@7417 | 123 | |
howcome@7417 | 124 | <p>This WD contains functionality that the CSS WG finds interesting and |
howcome@7417 | 125 | useful. In general, the earlier a feature appears in this draft, the more |
howcome@7417 | 126 | stable it is. Significant changes in functionality and syntax must be |
howcome@7417 | 127 | expected from <a href="#paged-presentations">paged presentations</a> and |
howcome@7417 | 128 | onwards. Also, functionality described in this module may be moved to |
howcome@7417 | 129 | other modules. Since the <a |
howcome@7417 | 130 | href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">previous WD</a>, |
howcome@7417 | 131 | hyphenation has been moved to <a |
howcome@7417 | 132 | href="http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation">css3-text</a> |
howcome@7417 | 133 | and the <a |
howcome@7417 | 134 | href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-super-decimal-list-style-type">super-decimal</a> |
howcome@7417 | 135 | list-style-type value has been moved to <a |
howcome@7417 | 136 | href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">css3-lists</a>. |
howcome@7417 | 137 | <a |
howcome@7417 | 138 | href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#named-counter-styles">Named |
howcome@7417 | 139 | counter styles</a> and the <a |
howcome@7417 | 140 | href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-symbols-list-style-type">symbols()</a> |
howcome@7417 | 141 | list-style-type value should also appear in a future css3-lists WD. |
howcome@7417 | 142 | |
howcome@7417 | 143 | <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of |
howcome@7417 | 144 | contents</a></h2> |
howcome@7417 | 145 | <!--begin-toc--> |
howcome@7417 | 146 | |
howcome@7417 | 147 | <ul class=toc> |
howcome@7417 | 148 | <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> |
howcome@7417 | 149 | |
howcome@7417 | 150 | <li><a href="#running-headers-and-footers"><span class=secno>2. |
howcome@7417 | 151 | </span>Running headers and footers</a> |
howcome@7417 | 152 | <ul class=toc> |
howcome@7417 | 153 | <li><a href="#named-strings"><span class=secno>2.1. </span>Named |
howcome@7417 | 154 | strings</a> |
howcome@7417 | 155 | <ul class=toc> |
howcome@7417 | 156 | <li><a href="#setting-named-strings-the-string-set-pro"><span |
howcome@7417 | 157 | class=secno>2.1.1. </span>Setting named strings: the ‘<code |
howcome@7417 | 158 | class=property>string-set</code>’ property</a> |
howcome@7417 | 159 | |
howcome@7417 | 160 | <li><a href="#using-named-strings"><span class=secno>2.1.2. |
howcome@7417 | 161 | </span>Using named strings</a> |
howcome@7417 | 162 | </ul> |
howcome@7417 | 163 | |
howcome@7417 | 164 | <li><a href="#running-elements"><span class=secno>2.2. </span>Running |
howcome@7417 | 165 | elements</a> |
howcome@7417 | 166 | </ul> |
howcome@7417 | 167 | |
howcome@7417 | 168 | <li><a href="#leaders"><span class=secno>3. </span>Leaders</a> |
howcome@7417 | 169 | |
howcome@7417 | 170 | <li><a href="#cross-references"><span class=secno>4. |
howcome@7417 | 171 | </span>Cross-references</a> |
howcome@7417 | 172 | <ul class=toc> |
howcome@7417 | 173 | <li><a href="#the-target-counter-and-target-counters-v"><span |
howcome@7417 | 174 | class=secno>4.1. </span>The ‘<code class=css>target-counter</code>’ |
howcome@7417 | 175 | and ‘<code class=css>target-counters</code>’ values</a> |
howcome@7417 | 176 | |
howcome@7417 | 177 | <li><a href="#the-target-text-value"><span class=secno>4.2. </span>The |
howcome@7417 | 178 | ‘<code class=css>target-text</code>’ value</a> |
howcome@7417 | 179 | </ul> |
howcome@7417 | 180 | |
howcome@7417 | 181 | <li><a href="#footnotes"><span class=secno>5. </span>Footnotes</a> |
howcome@7417 | 182 | <ul class=toc> |
howcome@7417 | 183 | <li><a href="#turning-elements-into-footnotes"><span class=secno>5.1. |
howcome@7417 | 184 | </span>Turning elements into footnotes</a> |
howcome@7417 | 185 | |
howcome@7417 | 186 | <li><a href="#the-footnote-area"><span class=secno>5.2. </span>The |
howcome@7417 | 187 | footnote area</a> |
howcome@7417 | 188 | |
howcome@7417 | 189 | <li><a href="#footnote-calls"><span class=secno>5.3. </span>Footnote |
howcome@7417 | 190 | calls</a> |
howcome@7417 | 191 | |
howcome@7417 | 192 | <li><a href="#footnote-markers"><span class=secno>5.4. </span>Footnote |
howcome@7417 | 193 | markers</a> |
howcome@7417 | 194 | |
howcome@7417 | 195 | <li><a href="#counting-footnotes"><span class=secno>5.5. </span>Counting |
howcome@7417 | 196 | footnotes</a> |
howcome@7417 | 197 | |
howcome@7417 | 198 | <li><a href="#laying-out-footnotes"><span class=secno>5.6. </span>Laying |
howcome@7417 | 199 | out footnotes</a> |
howcome@7417 | 200 | |
howcome@7417 | 201 | <li><a href="#footnote-magic"><span class=secno>5.7. </span>Footnote |
howcome@7417 | 202 | magic</a> |
howcome@7417 | 203 | </ul> |
howcome@7417 | 204 | |
howcome@7417 | 205 | <li><a href="#page-marks-and-bleed-area"><span class=secno>6. </span>Page |
howcome@7417 | 206 | marks and bleed area</a> |
howcome@7417 | 207 | |
howcome@7417 | 208 | <li><a href="#bookmarks"><span class=secno>7. </span>Bookmarks</a> |
howcome@7417 | 209 | <ul class=toc> |
howcome@7417 | 210 | <li><a href="#bookmark-level"><span class=secno>7.1. </span>‘<code |
howcome@7417 | 211 | class=property>bookmark-level</code>’</a> |
howcome@7417 | 212 | |
howcome@7417 | 213 | <li><a href="#bookmark-label"><span class=secno>7.2. </span>‘<code |
howcome@7417 | 214 | class=property>bookmark-label</code>’</a> |
howcome@7417 | 215 | |
howcome@7417 | 216 | <li><a href="#bookmark-state"><span class=secno>7.3. </span>‘<code |
howcome@7417 | 217 | class=property>bookmark-state</code>’</a> |
howcome@7417 | 218 | </ul> |
howcome@7417 | 219 | |
howcome@7417 | 220 | <li><a href="#cmyk-colors"><span class=secno>8. </span>CMYK colors</a> |
howcome@7417 | 221 | |
howcome@7417 | 222 | <li><a href="#styling-blank-pages"><span class=secno>9. </span>Styling |
howcome@7417 | 223 | blank pages</a> |
howcome@7417 | 224 | |
howcome@7417 | 225 | <li><a href="#paged-presentations"><span class=secno>10. </span>Paged |
howcome@7417 | 226 | presentations</a> |
howcome@7417 | 227 | |
howcome@7417 | 228 | <li><a href="#navigation-between-pages"><span class=secno>11. |
howcome@7417 | 229 | </span>Navigation between pages</a> |
howcome@7417 | 230 | <ul class=toc> |
howcome@7417 | 231 | <li><a href="#page-shift-effects"><span class=secno>11.1. </span>Page |
howcome@7417 | 232 | shift effects</a> |
howcome@7417 | 233 | </ul> |
howcome@7417 | 234 | |
howcome@7419 | 235 | <li><a href="#page-floats"><span class=secno>12. </span>Page floats</a> |
howcome@7417 | 236 | <ul class=toc> |
howcome@7419 | 237 | <li><a href="#page-float-delays"><span class=secno>12.1. </span>Page |
howcome@7419 | 238 | float delays</a> |
howcome@7419 | 239 | |
howcome@7419 | 240 | <li><a href="#clearing-page-floats"><span class=secno>12.2. |
howcome@7417 | 241 | </span>Clearing page floats</a> |
howcome@7417 | 242 | |
howcome@7419 | 243 | <li><a href="#floating-inside-and-outside-pages"><span class=secno>12.3. |
howcome@7417 | 244 | </span>Floating inside and outside pages</a> |
howcome@7417 | 245 | </ul> |
howcome@7417 | 246 | |
howcome@7417 | 247 | <li><a href="#page-and-column-floats-alternative-synta"><span |
howcome@7417 | 248 | class=secno>13. </span>Page and column floats, alternative syntax</a> |
howcome@7417 | 249 | |
howcome@7417 | 250 | <li><a href="#exclusions"><span class=secno>14. </span>Exclusions</a> |
howcome@7417 | 251 | <ul class=toc> |
howcome@7417 | 252 | <li><a href="#exclusions-based-on-floats"><span class=secno>14.1. |
howcome@7417 | 253 | </span>Exclusions based on floats</a> |
howcome@7417 | 254 | |
howcome@7417 | 255 | <li><a href="#the-float-offset-property"><span class=secno>14.2. |
howcome@7417 | 256 | </span>The ‘<code class=property>float-offset</code>’ property</a> |
howcome@7417 | 257 | |
howcome@7417 | 258 | <li><a href="#the-clear-side-property"><span class=secno>14.3. |
howcome@7417 | 259 | </span>The ‘<code class=property>clear-side</code>’ property</a> |
howcome@7417 | 260 | |
howcome@7417 | 261 | <li><a href="#exclusions-based-on-images"><span class=secno>14.4. |
howcome@7417 | 262 | </span>Exclusions based on images</a> |
howcome@7417 | 263 | |
howcome@7417 | 264 | <li><a href="#exclusions-based-on-rendered-content"><span |
howcome@7417 | 265 | class=secno>14.5. </span>Exclusions based on rendered content</a> |
howcome@7417 | 266 | |
howcome@7417 | 267 | <li><a href="#exclusions-based-on-shapes"><span class=secno>14.6. |
howcome@7417 | 268 | </span>Exclusions based on shapes</a> |
howcome@7417 | 269 | </ul> |
howcome@7417 | 270 | |
howcome@7417 | 271 | <li><a href="#regions"><span class=secno>15. </span>Regions</a> |
howcome@7417 | 272 | |
howcome@7417 | 273 | <li><a href="#regions-and-exclusions-examples"><span class=secno>16. |
howcome@7417 | 274 | </span>Regions and Exclusions examples</a> |
howcome@7417 | 275 | |
howcome@7417 | 276 | <li><a href="#selecting-pages"><span class=secno>17. </span>Selecting |
howcome@7417 | 277 | pages</a> |
howcome@7417 | 278 | |
howcome@7417 | 279 | <li><a href="#selecting-lines"><span class=secno>18. </span>Selecting |
howcome@7417 | 280 | lines</a> |
howcome@7417 | 281 | |
howcome@7417 | 282 | <li><a href="#conditional-text"><span class=secno>19. </span>Conditional |
howcome@7417 | 283 | text</a> |
howcome@7417 | 284 | |
howcome@7417 | 285 | <li><a href="#conformance"><span class=secno>20. </span>Conformance</a> |
howcome@7417 | 286 | |
howcome@7417 | 287 | <li><a href="#appendix-a-default-style-sheet"><span class=secno>21. |
howcome@7417 | 288 | </span>Appendix A: Default style sheet</a> |
howcome@7417 | 289 | |
howcome@7417 | 290 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
howcome@7417 | 291 | |
howcome@7417 | 292 | <li class=no-num><a href="#references">References</a> |
howcome@7417 | 293 | <ul class=toc> |
howcome@7417 | 294 | <li class=no-num><a href="#normative-references">Normative |
howcome@7417 | 295 | references</a> |
howcome@7417 | 296 | |
howcome@7417 | 297 | <li class=no-num><a href="#other-references">Other references</a> |
howcome@7417 | 298 | </ul> |
howcome@7417 | 299 | |
howcome@7417 | 300 | <li class=no-num><a href="#index">Index</a> |
howcome@7417 | 301 | |
howcome@7417 | 302 | <li class=no-num><a href="#property-index">Property index</a> |
howcome@7417 | 303 | </ul> |
howcome@7417 | 304 | <!--end-toc--> |
howcome@7417 | 305 | |
howcome@7417 | 306 | <h2 id=introduction><span class=secno>1. </span>Introduction</h2> |
howcome@7417 | 307 | |
howcome@7417 | 308 | <p>(This section is not normative.) |
howcome@7417 | 309 | |
howcome@7417 | 310 | <p>This specification describes features often used in printed |
howcome@7417 | 311 | publications. Some of the proposed functionality (e.g., the new list style |
howcome@7417 | 312 | types, and border segments) may also used with other media types. However, |
howcome@7417 | 313 | this specification is monstly concerned with paged media. |
howcome@7417 | 314 | |
howcome@7417 | 315 | <h2 id=running-headers-and-footers><span class=secno>2. </span>Running |
howcome@7417 | 316 | headers and footers</h2> |
howcome@7417 | 317 | |
howcome@7417 | 318 | <p>To aid navigation in printed material, headers and footers are often |
howcome@7417 | 319 | printed in the page margins. <a href="#CSS3PAGE" |
howcome@7417 | 320 | rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> describes how to place |
howcome@7417 | 321 | headers and footers on a page, but not how to fetch headers and footers |
howcome@7417 | 322 | from elements in the document. This specification offers two ways to |
howcome@7417 | 323 | achieve this. The first mechanism is <dfn id=named-strings0>named |
howcome@7417 | 324 | strings</dfn> which <em>copies</em> the text (without style, structure, or |
howcome@7417 | 325 | replaced content) from one element for later reuse in margin boxes. The |
howcome@7417 | 326 | second mechanism is <dfn id=running-elements0>running elements</dfn> which |
howcome@7417 | 327 | <em>moves</em> elements (with style, structure, and replaced content) into |
howcome@7417 | 328 | a margin box. |
howcome@7417 | 329 | |
howcome@7417 | 330 | <h3 id=named-strings><span class=secno>2.1. </span>Named strings</h3> |
howcome@7417 | 331 | <!-- |
howcome@7417 | 332 | <p>Named strings are discussed both in the CSS3 Generated and Replaced |
howcome@7417 | 333 | Content (section 9) and in CSS3 Paged Media (several places). For a |
howcome@7417 | 334 | proposed definition of the property, one has to go back to the <a href="http://www.w3.org/1999/06/WD-css3-page-19990623">CSS3 draft from 1999</a> |
howcome@7417 | 335 | 1999: |
howcome@7417 | 336 | --> |
howcome@7417 | 337 | |
howcome@7417 | 338 | <p>Named strings can be thought of as variables that can hold one string of |
howcome@7417 | 339 | text each. Named strings are created with the ‘<a |
howcome@7417 | 340 | href="#string-set"><code class=property>string-set</code></a>’ property |
howcome@7417 | 341 | which copies a string of text into the named string. Only text is copied; |
howcome@7417 | 342 | not style, structure, or replaced content. |
howcome@7417 | 343 | |
howcome@7417 | 344 | <div class=example> |
howcome@7417 | 345 | <p>Consider this code: |
howcome@7417 | 346 | |
howcome@7417 | 347 | <pre> |
howcome@7417 | 348 | h1 { string-set: title contents } |
howcome@7417 | 349 | </pre> |
howcome@7417 | 350 | |
howcome@7417 | 351 | <p>Whenever an <code>h1</code> element is encountered, its textual content |
howcome@7417 | 352 | is copied into a named string called <em>title</em>. Its content can be |
howcome@7417 | 353 | retrieved in the ‘<code class=property>content</code>’ property: |
howcome@7417 | 354 | |
howcome@7417 | 355 | <pre> |
howcome@7417 | 356 | @page :right { @top-right { content: string(title) }} |
howcome@7417 | 357 | </pre> |
howcome@7417 | 358 | </div> |
howcome@7417 | 359 | |
howcome@7417 | 360 | <h4 id=setting-named-strings-the-string-set-pro><span class=secno>2.1.1. |
howcome@7417 | 361 | </span>Setting named strings: the ‘<a href="#string-set"><code |
howcome@7417 | 362 | class=property>string-set</code></a>’ property</h4> |
howcome@7417 | 363 | |
howcome@7417 | 364 | <table class=propdef> |
howcome@7417 | 365 | <tbody> |
howcome@7417 | 366 | <tr> |
howcome@7417 | 367 | <td><em>Name:</em> |
howcome@7417 | 368 | |
howcome@7417 | 369 | <td><dfn id=string-set>string-set</dfn> |
howcome@7417 | 370 | |
howcome@7417 | 371 | <tr> |
howcome@7417 | 372 | <td><em>Value:</em> |
howcome@7417 | 373 | |
howcome@7417 | 374 | <td>[[ <identifier> <content-list>] [, <identifier> |
howcome@7417 | 375 | <content-list>]* ] | none |
howcome@7417 | 376 | |
howcome@7417 | 377 | <tr> |
howcome@7417 | 378 | <td><em>Initial:</em> |
howcome@7417 | 379 | |
howcome@7417 | 380 | <td>none |
howcome@7417 | 381 | |
howcome@7417 | 382 | <tr> |
howcome@7417 | 383 | <td><em>Applies to:</em> |
howcome@7417 | 384 | |
howcome@7417 | 385 | <td>all elements |
howcome@7417 | 386 | |
howcome@7417 | 387 | <tr> |
howcome@7417 | 388 | <td><em>Inherited:</em> |
howcome@7417 | 389 | |
howcome@7417 | 390 | <td>no |
howcome@7417 | 391 | |
howcome@7417 | 392 | <tr> |
howcome@7417 | 393 | <td><em>Percentages:</em> |
howcome@7417 | 394 | |
howcome@7417 | 395 | <td>N/A |
howcome@7417 | 396 | |
howcome@7417 | 397 | <tr> |
howcome@7417 | 398 | <td><em>Media:</em> |
howcome@7417 | 399 | |
howcome@7417 | 400 | <td>all |
howcome@7417 | 401 | |
howcome@7417 | 402 | <tr> |
howcome@7417 | 403 | <td><em>Computed value:</em> |
howcome@7417 | 404 | |
howcome@7417 | 405 | <td>as specified value |
howcome@7417 | 406 | </table> |
howcome@7417 | 407 | |
howcome@7417 | 408 | <p>The ‘<a href="#string-set"><code |
howcome@7417 | 409 | class=property>string-set</code></a>’ property accepts a comma-separated |
howcome@7417 | 410 | list of named strings. Each named string is followed by a content list |
howcome@7417 | 411 | that specifies which text to copy into the named string. Whenever an |
howcome@7417 | 412 | element with value of ‘<a href="#string-set"><code |
howcome@7417 | 413 | class=property>string-set</code></a>’ different from ‘<code |
howcome@7417 | 414 | class=css>none</code>’ is encountered, the named strings are assigned |
howcome@7417 | 415 | their respective value. |
howcome@7417 | 416 | |
howcome@7417 | 417 | <p><content-list> expands to one or more of these values, in any order: |
howcome@7417 | 418 | |
howcome@7417 | 419 | <dl> |
howcome@7417 | 420 | <dt><string> |
howcome@7417 | 421 | |
howcome@7417 | 422 | <dd>a string, e.g. "foo" |
howcome@7417 | 423 | |
howcome@7417 | 424 | <dt><counter> |
howcome@7417 | 425 | |
howcome@7417 | 426 | <dd>the counter() or counters() function, as per <a |
howcome@7417 | 427 | href="http://www.w3.org/TR/CSS21/syndata.html#counter">CSS 2.1 section |
howcome@7417 | 428 | 4.3.5</a> |
howcome@7417 | 429 | |
howcome@7417 | 430 | <dt>contents |
howcome@7417 | 431 | |
howcome@7417 | 432 | <dd>The textual content of the element, including the content of its |
howcome@7417 | 433 | ::before and ::after pseudo-element. The content of the element's |
howcome@7417 | 434 | descendants, including their respective ::before and ::after |
howcome@7417 | 435 | pseudo-elements, are included in the returned content. |
howcome@7417 | 436 | |
howcome@7417 | 437 | <dt>content-element |
howcome@7417 | 438 | |
howcome@7417 | 439 | <dd>The textual content of the element, not including the content of its |
howcome@7417 | 440 | ::before and ::after pseudo-element. The content of the element's |
howcome@7417 | 441 | descendants, including their respective ::before and ::after |
howcome@7417 | 442 | pseudo-elements, are included in the returned content. |
howcome@7417 | 443 | |
howcome@7417 | 444 | <dt>content-before |
howcome@7417 | 445 | |
howcome@7417 | 446 | <dd>The textual content of the ::before pseudo-element the content of the |
howcome@7417 | 447 | element. |
howcome@7417 | 448 | |
howcome@7417 | 449 | <dt>content-after |
howcome@7417 | 450 | |
howcome@7417 | 451 | <dd>The textual content of the ::after pseudo-element the content of the |
howcome@7417 | 452 | element. |
howcome@7417 | 453 | |
howcome@7417 | 454 | <dt>content-first-letter |
howcome@7417 | 455 | |
howcome@7417 | 456 | <dd>The first letter of the content of the element. The definition of a |
howcome@7417 | 457 | letter is the same as for :first-letter pseudo-elements. |
howcome@7417 | 458 | <p class=note>The expected use for ‘<code |
howcome@7417 | 459 | class=css>content-first-letter</code>’ is to create one-letter |
howcome@7417 | 460 | headers, e.g., in dictionaries. |
howcome@7417 | 461 | |
howcome@7417 | 462 | <dt>env() |
howcome@7417 | 463 | |
howcome@7417 | 464 | <dd>This function returns data from the local environment of the user at |
howcome@7417 | 465 | the time of formatting. The function accepts one of these keywords: |
howcome@7417 | 466 | <ul> |
howcome@7417 | 467 | <li>env(url): returns the URL of the document |
howcome@7417 | 468 | |
howcome@7417 | 469 | <li>env(date): returns the date on the user's system at the time of |
howcome@7417 | 470 | formatting |
howcome@7417 | 471 | |
howcome@7417 | 472 | <li>env(time): returns the time on the user's system at the time of |
howcome@7417 | 473 | formatting |
howcome@7417 | 474 | |
howcome@7417 | 475 | <li>env(date-time): returns the date and time on the user's system at |
howcome@7417 | 476 | the time of formatting |
howcome@7417 | 477 | </ul> |
howcome@7417 | 478 | |
howcome@7417 | 479 | <p>Information about date and time is formatted according to the locale |
howcome@7417 | 480 | of the user's system. |
howcome@7417 | 481 | |
howcome@7417 | 482 | <p class=issue>Or, should there be a way to specify the locale? Or should |
howcome@7417 | 483 | we simply format all in ISO format (e.g., 2010-03-30)? |
howcome@7417 | 484 | |
howcome@7417 | 485 | <p class=note>On many systems, preformatted strings in the user's locale |
howcome@7417 | 486 | can be found through the <a |
howcome@7417 | 487 | href="http://www.opengroup.org/onlinepubs/009695399/functions/strftime.html">strftime</a> |
howcome@7417 | 488 | function. The date, time and date-time strings can be found by using the |
howcome@7417 | 489 | "%x", "%X" and "%c" conversion strings, respectively. |
howcome@7417 | 490 | |
howcome@7417 | 491 | <div class=example> |
howcome@7417 | 492 | <pre> |
howcome@7417 | 493 | @page { |
howcome@7417 | 494 | @top-right { content: env(url) } |
howcome@7417 | 495 | @bottom-right { content: env(date-time) } |
howcome@7417 | 496 | } |
howcome@7417 | 497 | </pre> |
howcome@7417 | 498 | </div> |
howcome@7417 | 499 | </dl> |
howcome@7417 | 500 | <!--<p class="issue">Should target-counter() and leader() also be allowed?</p>--> |
howcome@7417 | 501 | |
howcome@7417 | 502 | <p>Named strings can only hold the result of one assignment; whenever a new |
howcome@7417 | 503 | assignment is made to a named string, its old value is replaced. |
howcome@7417 | 504 | |
howcome@7417 | 505 | <p class=note>User agents, however, must be able to remember the result of |
howcome@7417 | 506 | more than one assignment as the ‘<code class=css>string()</code>’ |
howcome@7417 | 507 | functional value (described below) can refer to different assignments. |
howcome@7417 | 508 | |
howcome@7417 | 509 | <p>The scope of a named string is the page of the element to which the |
howcome@7417 | 510 | ‘<a href="#string-set"><code class=property>string-set</code></a>’ |
howcome@7417 | 511 | property is attached and subsequent pages. |
howcome@7417 | 512 | |
howcome@7417 | 513 | <p>The name space of named strings is different from other sets of names in |
howcome@7417 | 514 | CSS. |
howcome@7417 | 515 | |
howcome@7417 | 516 | <p>The textual content is processed as if ‘<code class=css>white-space: |
howcome@7417 | 517 | normal</code>’ had been set. |
howcome@7417 | 518 | |
howcome@7417 | 519 | <div class=example> |
howcome@7417 | 520 | <pre> |
simon@7435 | 521 | h2 { |
howcome@7417 | 522 | string-set: header "Chapter " counter(header) ": " contents; |
howcome@7417 | 523 | counter-increment: header; |
howcome@7417 | 524 | } |
howcome@7417 | 525 | </pre> |
howcome@7417 | 526 | |
howcome@7417 | 527 | <p>Note that the string called "header" is different from the counter with |
howcome@7417 | 528 | the same name. The above code may result in <em>header</em> being set to |
howcome@7417 | 529 | "Chapter 2: Europa". |
howcome@7417 | 530 | </div> |
howcome@7417 | 531 | |
howcome@7417 | 532 | <div class=example> |
howcome@7417 | 533 | <p>This example results in the same value being assigned to |
howcome@7417 | 534 | <em>header</em> as in the previous example. <!--note namespace--> |
howcome@7417 | 535 | |
howcome@7417 | 536 | <pre> |
simon@7435 | 537 | h2:before { content: "Chapter " counter(header) } |
simon@7435 | 538 | h2 { |
howcome@7417 | 539 | string-set: header content-before content-element; |
simon@7435 | 540 | counter-increment: header } |
howcome@7417 | 541 | </pre> |
howcome@7417 | 542 | </div> |
howcome@7417 | 543 | |
howcome@7417 | 544 | <div class=example> |
howcome@7417 | 545 | <pre> |
howcome@7417 | 546 | dt { string-set: index content-first-letter } |
howcome@7417 | 547 | </pre> |
howcome@7417 | 548 | </div> |
howcome@7417 | 549 | |
howcome@7417 | 550 | <div class=example> |
howcome@7417 | 551 | <p>The content is copied regardless of other settings on the element. In |
howcome@7417 | 552 | HTML, TITLE elements are normally not displayed, but in this examplet the |
howcome@7417 | 553 | content is copied into a named string: |
howcome@7417 | 554 | |
howcome@7417 | 555 | <pre> |
simon@7435 | 556 | title { |
howcome@7417 | 557 | display: none; |
howcome@7417 | 558 | string-set: header contents; |
howcome@7417 | 559 | } |
howcome@7417 | 560 | </pre> |
howcome@7417 | 561 | </div> |
howcome@7417 | 562 | |
howcome@7417 | 563 | <h4 id=using-named-strings><span class=secno>2.1.2. </span>Using named |
howcome@7417 | 564 | strings</h4> |
howcome@7417 | 565 | |
howcome@7417 | 566 | <p>The content of named strings can be recalled by using the ‘<code |
howcome@7417 | 567 | class=css>string()</code>’ value on the ‘<code |
howcome@7417 | 568 | class=property>content</code>’ property. The ‘<code |
howcome@7417 | 569 | class=css>string()</code>’ value has one required argument, namely the |
howcome@7417 | 570 | name of the string. |
howcome@7417 | 571 | |
howcome@7417 | 572 | <div class=example> |
howcome@7417 | 573 | <pre> |
howcome@7417 | 574 | @page { @top-center { content: string(header) }} |
howcome@7417 | 575 | @page { @right-middle { content: string(index) }} |
howcome@7417 | 576 | @page { @top-left { content: string(entry) }} |
howcome@7417 | 577 | h1 { string-set: header "Chapter " counter(chapter) contents } |
howcome@7417 | 578 | dt { string-set: index content-first-letter, entry contents } |
howcome@7417 | 579 | </pre> |
howcome@7417 | 580 | </div> |
howcome@7417 | 581 | |
howcome@7417 | 582 | <p>If the value of the named string is changed by an element on a certain |
howcome@7417 | 583 | page, the named string may have several values on that page. In order to |
howcome@7417 | 584 | specify which of these values should be used, an optional argument is |
howcome@7417 | 585 | accepted on the ‘<code class=css>string()</code>’ value. This argument |
howcome@7417 | 586 | can have one of four keywords: |
howcome@7417 | 587 | |
howcome@7417 | 588 | <ul> |
howcome@7417 | 589 | <li>‘<code class=css>start</code>’: the named string's entry value for |
howcome@7417 | 590 | that page is used. |
howcome@7417 | 591 | |
howcome@7417 | 592 | <li>‘<code class=css>first</code>’: the value of the first assignment |
howcome@7417 | 593 | is used. If there is no assignment on the page, the start value is used. |
howcome@7417 | 594 | ‘<code class=css>first</code>’ is the default value. |
howcome@7417 | 595 | |
howcome@7417 | 596 | <li>‘<code class=css>last</code>’: the named string's exit value for |
howcome@7417 | 597 | that page is used |
howcome@7417 | 598 | |
howcome@7417 | 599 | <li>‘<code class=css>first-except</code>’: similar to ‘<code |
howcome@7417 | 600 | class=css>first</code>’, except on the page where the value was |
howcome@7417 | 601 | assigned. On that page, the empty string is used. |
howcome@7417 | 602 | </ul> |
howcome@7417 | 603 | |
howcome@7417 | 604 | <p>The assignment is considered to take place on the first page where a |
howcome@7417 | 605 | content box representing the element occurs. If the element does not have |
howcome@7417 | 606 | any content boxes (e.g., if ‘<code class=css>display: none</code>’ is |
howcome@7417 | 607 | set), the assignment is considered to take place on the page where the |
howcome@7417 | 608 | first content box would have occured if the element had been in the normal |
howcome@7417 | 609 | flow. |
howcome@7417 | 610 | |
howcome@7417 | 611 | <div class=example> |
howcome@7417 | 612 | <p>In this example, the first term on the page will be shown in the top |
howcome@7417 | 613 | left corner and the last term on the page will be shown in the top right |
howcome@7417 | 614 | corner. In top center of the page, the first letter of first term will be |
howcome@7417 | 615 | shown. |
howcome@7417 | 616 | |
howcome@7417 | 617 | <pre> |
howcome@7417 | 618 | @page { @top-left { content: string(term, first) }} |
howcome@7417 | 619 | @page { @top-right { content: string(term, last) }} |
howcome@7417 | 620 | @page { @top-center { content: string(index, first) }} |
howcome@7417 | 621 | dt { string-set: index content-first-letter, term contents } |
howcome@7417 | 622 | </pre> |
howcome@7417 | 623 | </div> |
howcome@7417 | 624 | |
howcome@7417 | 625 | <div class=example> |
howcome@7417 | 626 | <p>In this example, the header in the top center will be blank on pages |
howcome@7417 | 627 | where ‘<code class=css>h1</code>’ elements appear. On other pages, |
howcome@7417 | 628 | the string of the previous ‘<code class=css>h1</code>’ element will |
howcome@7417 | 629 | be shown. |
howcome@7417 | 630 | |
howcome@7417 | 631 | <pre> |
howcome@7417 | 632 | @page { @top-center { content: string(chapter, first-except) }} |
howcome@7417 | 633 | h1 { string-set: chapter contents } |
howcome@7417 | 634 | </pre> |
howcome@7417 | 635 | </div> |
howcome@7417 | 636 | |
howcome@7417 | 637 | <p>If the named string referred to in a ‘<code |
howcome@7417 | 638 | class=css>string()</code>’ value has not been assigned a value, the |
howcome@7417 | 639 | empty string is used. |
howcome@7417 | 640 | |
howcome@7417 | 641 | <h3 id=running-elements><span class=secno>2.2. </span>Running elements</h3> |
howcome@7417 | 642 | |
howcome@7417 | 643 | <p>Named strings, as described above, can only hold textual content; any |
howcome@7417 | 644 | style, structure or replaced content associated with the element is |
howcome@7417 | 645 | ignored. To overcome this limitation, a way of moving elements into |
howcome@7417 | 646 | running headers and footers is introduced. |
howcome@7417 | 647 | |
howcome@7417 | 648 | <p>Elements that are moved into headers and footers are repeated on several |
howcome@7417 | 649 | pages; they are said to be <a href="#running-elements0"><em>running |
howcome@7417 | 650 | elements</em></a>. To support running elements, a new value – running() |
howcome@7417 | 651 | – is introduced on the ‘<code class=property>position</code>’ |
howcome@7417 | 652 | property. It has one required argument: the name by which the running |
howcome@7417 | 653 | element can be referred to. A running element is not shown in its natural |
howcome@7417 | 654 | place; there it is treated as if ‘<code class=css>display: |
howcome@7417 | 655 | none</code>’ had been set. Instead, the running element may be displayed |
howcome@7417 | 656 | in a margin box. |
howcome@7417 | 657 | |
howcome@7417 | 658 | <p>Like counters and named strings, the name of a running element is chosen |
howcome@7417 | 659 | by the style sheet author, and the names have a separate name space. A |
howcome@7417 | 660 | running element can hold one element, including its pseudo-elements and |
howcome@7417 | 661 | its descendants. Whenever a new element is assigned to a running element, |
howcome@7417 | 662 | the old element is lost. |
howcome@7417 | 663 | |
howcome@7417 | 664 | <p class=note>User agents, however, must be able to remember the result of |
howcome@7417 | 665 | more than one assignment as the ‘<code class=css>element()</code>’ |
howcome@7417 | 666 | value (described below) can refer to different assignments. |
howcome@7417 | 667 | |
howcome@7417 | 668 | <p>Running elements inherit through their normal place in the structure of |
howcome@7417 | 669 | the document. |
howcome@7417 | 670 | |
howcome@7417 | 671 | <div class=example> |
howcome@7417 | 672 | <pre> |
howcome@7417 | 673 | title { position: running(header) } |
howcome@7417 | 674 | @page { @top-center { |
howcome@7417 | 675 | content: element(header) } |
howcome@7417 | 676 | } |
howcome@7417 | 677 | </pre> |
howcome@7417 | 678 | </div> |
howcome@7417 | 679 | |
howcome@7417 | 680 | <div class=example> |
howcome@7417 | 681 | <p>In this example, the element is copied into the running header but it |
howcome@7417 | 682 | also keeps its normal place. |
howcome@7417 | 683 | |
howcome@7417 | 684 | <pre> |
howcome@7417 | 685 | title { position: running(header), normal } |
howcome@7417 | 686 | @page { @top-center { |
howcome@7417 | 687 | content: element(header) } |
howcome@7417 | 688 | } |
howcome@7417 | 689 | </pre> |
howcome@7417 | 690 | </div> |
howcome@7417 | 691 | |
howcome@7417 | 692 | <p>Like the ‘<code class=css>string()</code>’ value, the ‘<code |
howcome@7417 | 693 | class=css>element()</code>’ value accepts an optional second argument: |
howcome@7417 | 694 | |
howcome@7417 | 695 | <dl> |
howcome@7417 | 696 | <dt>‘<code class=css>start</code>’ |
howcome@7417 | 697 | |
howcome@7417 | 698 | <dt>‘<code class=css>first</code>’ |
howcome@7417 | 699 | |
howcome@7417 | 700 | <dt>‘<code class=css>last</code>’ |
howcome@7417 | 701 | |
howcome@7417 | 702 | <dt>‘<code class=css>first-except</code>’ |
howcome@7417 | 703 | </dl> |
howcome@7417 | 704 | |
howcome@7417 | 705 | <p>The keywords have the same meaning as for the ‘<code |
howcome@7417 | 706 | class=css>string()</code>’ value, and the place of the assignments are |
howcome@7417 | 707 | the same. |
howcome@7417 | 708 | |
howcome@7417 | 709 | <p>The ‘<code class=css>element()</code>’ value cannot be combined with |
howcome@7417 | 710 | any other values. |
howcome@7417 | 711 | |
howcome@7417 | 712 | <div class=example> |
howcome@7417 | 713 | <p>In this example, the header is hidden from view in all media types |
howcome@7417 | 714 | except print. On printed pages, the header is displayed top center on all |
howcome@7417 | 715 | pages, except where h1 elements appear. |
howcome@7417 | 716 | |
howcome@7417 | 717 | <pre> |
howcome@7417 | 718 | <style> |
howcome@7417 | 719 | div.header { display: none } |
howcome@7417 | 720 | @media print { |
howcome@7417 | 721 | div.header { |
howcome@7417 | 722 | display: block; |
howcome@7417 | 723 | position: running(header); |
howcome@7417 | 724 | } |
howcome@7417 | 725 | @page { @top-center { content: element(header, first-except) }} |
howcome@7417 | 726 | </style> |
howcome@7417 | 727 | ... |
howcome@7417 | 728 | <div class="header">Introduction</div> |
howcome@7417 | 729 | <h1 class="chapter">An introduction</div> |
howcome@7417 | 730 | |
howcome@7417 | 731 | </pre> |
howcome@7417 | 732 | </div> |
howcome@7417 | 733 | |
howcome@7417 | 734 | <div class=example> |
howcome@7417 | 735 | <p>This code illustrates how to change the running header on one page in |
howcome@7417 | 736 | the middle of a run of pages: |
howcome@7417 | 737 | |
howcome@7417 | 738 | <pre> |
howcome@7417 | 739 | ... |
howcome@7417 | 740 | <style> |
howcome@7417 | 741 | @page { @top-center { |
howcome@7417 | 742 | content: element(header, first) }} |
howcome@7417 | 743 | .header { position: running(header) } |
howcome@7417 | 744 | .once { font-weight: bold } |
howcome@7417 | 745 | </style> |
howcome@7417 | 746 | ... |
howcome@7417 | 747 | <div class="header">Not now</div> |
howcome@7417 | 748 | <p>Da di ha di da di ... |
howcome@7417 | 749 | <span class="header once">NOW!</span> |
howcome@7417 | 750 | <span class="header">Not now</span> |
howcome@7417 | 751 | ... da di ha di hum.</p> |
howcome@7417 | 752 | ... |
howcome@7417 | 753 | </pre> |
howcome@7417 | 754 | The header is "Not now" from the outset, due to the "div" element. The |
howcome@7417 | 755 | first "span" element changes it to "<b>NOW!</b>" on the page where the |
howcome@7417 | 756 | "span" element would have appeared. The second "span" element, which would |
howcome@7417 | 757 | have appeared on the same page as the first is not used because the |
howcome@7417 | 758 | ‘<code class=css>first</code>’ keyword has been specified. However, |
howcome@7417 | 759 | the second "span" element still sets the exit value for "header" and this |
howcome@7417 | 760 | value is used on subsequent pages.</div> |
howcome@7417 | 761 | |
howcome@7417 | 762 | <h2 id=leaders><span class=secno>3. </span>Leaders</h2> |
howcome@7417 | 763 | |
howcome@7417 | 764 | <p>A leader is a visual pattern that guides the eye. Typically, leaders are |
howcome@7417 | 765 | used to visually connect an entry in a list with a corresponding code. For |
howcome@7417 | 766 | example, there are often leaders between titles and page numbers in a |
howcome@7417 | 767 | table of contents (TOC). Another example is the phone book where there are |
howcome@7417 | 768 | leaders between a name and a telephone number. |
howcome@7417 | 769 | |
howcome@7417 | 770 | <p>In CSS3, a leader is composed of series of glyphs through the ‘<code |
howcome@7417 | 771 | class=css>leader()</code>’ value on the ‘<code |
howcome@7417 | 772 | class=property>content</code>’ property. The functional notation accepts |
howcome@7417 | 773 | two values. The first describes the glyph pattern that makes up the |
howcome@7417 | 774 | leader. These values are allowed: |
howcome@7417 | 775 | |
howcome@7417 | 776 | <ul> |
howcome@7417 | 777 | <li>leader(dotted) |
howcome@7417 | 778 | |
howcome@7417 | 779 | <li>leader(solid) |
howcome@7417 | 780 | |
howcome@7417 | 781 | <li>leader(space) |
howcome@7417 | 782 | |
howcome@7417 | 783 | <li>leader(<string>) |
howcome@7417 | 784 | </ul> |
howcome@7417 | 785 | |
howcome@7417 | 786 | <p>Using the keyword values is equivalent to setting a string value. The |
howcome@7417 | 787 | table below shows the equivalents: |
howcome@7417 | 788 | |
howcome@7417 | 789 | <table class=border> |
howcome@7417 | 790 | <tbody> |
howcome@7417 | 791 | <tr> |
howcome@7417 | 792 | <th>Keyword |
howcome@7417 | 793 | |
howcome@7417 | 794 | <th>String |
howcome@7417 | 795 | |
howcome@7417 | 796 | <th>Unicode characters |
howcome@7417 | 797 | |
howcome@7417 | 798 | <tr> |
howcome@7417 | 799 | <td>leader(dotted) |
howcome@7417 | 800 | |
howcome@7417 | 801 | <td>leader(‘<code class=css>. </code>’) |
howcome@7417 | 802 | |
howcome@7417 | 803 | <td>\002E \0020 |
howcome@7417 | 804 | |
howcome@7417 | 805 | <tr> |
howcome@7417 | 806 | <td>leader(solid) |
howcome@7417 | 807 | |
howcome@7417 | 808 | <td>leader(‘<code class=css>_</code>’) |
howcome@7417 | 809 | |
howcome@7417 | 810 | <td>\005F |
howcome@7417 | 811 | |
howcome@7417 | 812 | <tr> |
howcome@7417 | 813 | <td>leader(space) |
howcome@7417 | 814 | |
howcome@7417 | 815 | <td>leader(‘<code class=css> </code>’) |
howcome@7417 | 816 | |
howcome@7417 | 817 | <td>\0020 |
howcome@7417 | 818 | </table> |
howcome@7417 | 819 | <!-- |
simon@7435 | 820 | <p>User Agents should attempt to align corresponding glyphs from the |
howcome@7417 | 821 | leader pattern between consecutive lines. |
howcome@7417 | 822 | --> |
howcome@7417 | 823 | |
howcome@7417 | 824 | <p>The string inside the parenthesis is called the <em>leader string</em>. |
howcome@7417 | 825 | |
howcome@7417 | 826 | <p>In its simplest form, the ‘<code class=property>content</code>’ |
howcome@7417 | 827 | property only takes one ‘<code class=css>leader()</code>’ value: |
howcome@7417 | 828 | |
howcome@7417 | 829 | <div class=example> |
howcome@7417 | 830 | <pre> |
howcome@7417 | 831 | heading::after { content: leader(dotted) } |
howcome@7417 | 832 | </pre> |
howcome@7417 | 833 | </div> |
howcome@7417 | 834 | |
howcome@7417 | 835 | <p>The leader string must be shown in full at least once and this |
howcome@7417 | 836 | establishes the minimum length of the leader. To fill the available space, |
howcome@7417 | 837 | the leader string is repeated as many times as possible in the writing |
howcome@7417 | 838 | direction. At the end of the leader, a partial string pattern may be |
howcome@7417 | 839 | shown. White space in leaders is collapsed according to the values on |
howcome@7417 | 840 | white-space properties. |
howcome@7417 | 841 | <!-- <span class="issue">Or, partial strings be avoided?</span> --> |
howcome@7417 | 842 | <!--<p class="issue">Should other properties influence the appearance of leaders?--> |
howcome@7417 | 843 | |
howcome@7417 | 844 | <p>These properties influence the appearance of leaders: all font |
howcome@7417 | 845 | properties, text properties, ‘<code |
howcome@7417 | 846 | class=property>letter-spacing</code>’, white-space properties, |
howcome@7417 | 847 | background properties, and ‘<code class=property>color</code>’. |
howcome@7417 | 848 | |
howcome@7417 | 849 | <p>The second value describes the alignment of the leader. These values are |
howcome@7417 | 850 | allowed: |
howcome@7417 | 851 | |
howcome@7417 | 852 | <dl> |
howcome@7417 | 853 | <dt>align |
howcome@7417 | 854 | |
howcome@7417 | 855 | <dd>attempt to align corresponding glyphs from the leader pattern between |
howcome@7417 | 856 | consecutive lines. This is the default value. |
howcome@7417 | 857 | |
howcome@7417 | 858 | <dt>start |
howcome@7417 | 859 | |
howcome@7417 | 860 | <dd>align leader string with the start |
howcome@7417 | 861 | |
howcome@7417 | 862 | <dt>end |
howcome@7417 | 863 | |
howcome@7417 | 864 | <dd>align leader string with the end |
howcome@7417 | 865 | |
howcome@7417 | 866 | <dt>center |
howcome@7417 | 867 | |
howcome@7417 | 868 | <dd>center leader string |
howcome@7417 | 869 | |
howcome@7417 | 870 | <dt>string-space |
howcome@7417 | 871 | |
howcome@7417 | 872 | <dd>add space between strings to take up all available space |
howcome@7417 | 873 | |
howcome@7417 | 874 | <dt>letter-space |
howcome@7417 | 875 | |
howcome@7417 | 876 | <dd>add space between letters (both inside the string, and at the |
howcome@7417 | 877 | start/end of the string) to take up all available space |
howcome@7417 | 878 | </dl> |
howcome@7417 | 879 | |
howcome@7417 | 880 | <div class=example> |
howcome@7417 | 881 | <pre> |
howcome@7417 | 882 | heading::after { content: leader(dotted, align) } |
howcome@7417 | 883 | heading::after { content: leader(dotted, start) } |
howcome@7417 | 884 | heading::after { content: leader(dotted, end) } |
howcome@7417 | 885 | heading::after { content: leader(dotted, center) } |
howcome@7417 | 886 | heading::after { content: leader(dotted, string-space) } |
howcome@7417 | 887 | heading::after { content: leader(dotted, letter-space) } |
howcome@7417 | 888 | </pre> |
howcome@7417 | 889 | </div> |
howcome@7417 | 890 | |
howcome@7417 | 891 | <p>In a more complex example, the ‘<code class=property>leader</code>’ |
howcome@7417 | 892 | value is combined with other values on the ‘<code |
howcome@7417 | 893 | class=property>content</code>’ property: |
howcome@7417 | 894 | |
howcome@7417 | 895 | <div class=example> |
howcome@7417 | 896 | <pre> |
howcome@7417 | 897 | ul.toc a::after { |
howcome@7417 | 898 | content: leader(". . . ") target-counter(attr(href url), page); |
howcome@7417 | 899 | } |
howcome@7417 | 900 | </pre> |
howcome@7417 | 901 | </div> |
howcome@7417 | 902 | |
howcome@7417 | 903 | <p>If the content connected by a leader end up on different lines, the |
howcome@7417 | 904 | leader will be present on all lines. Each leader fragment honors the |
howcome@7417 | 905 | minimum length of the leader. |
howcome@7417 | 906 | |
howcome@7417 | 907 | <div class=example> |
howcome@7417 | 908 | <p>Consider this code: |
howcome@7417 | 909 | |
howcome@7417 | 910 | <pre> |
howcome@7417 | 911 | <style> |
howcome@7417 | 912 | .name::after { content: leader(dotted) } |
howcome@7417 | 913 | </style> |
howcome@7417 | 914 | <div class="entry"> |
howcome@7417 | 915 | <span class="name">John Doe</span> |
howcome@7417 | 916 | <span class="number">123456789</span> |
howcome@7417 | 917 | </div> |
howcome@7417 | 918 | </pre> |
howcome@7417 | 919 | |
howcome@7417 | 920 | <p>If the name and number end up on different lines (e.g., in a narrow |
howcome@7417 | 921 | column), it may be formatted like this: |
howcome@7417 | 922 | |
howcome@7417 | 923 | <pre> |
howcome@7417 | 924 | John Doe.... |
howcome@7417 | 925 | ...123456789 |
howcome@7417 | 926 | </pre> |
howcome@7417 | 927 | </div> |
howcome@7417 | 928 | |
howcome@7417 | 929 | <p>To determine the length of the leaders, user agents must do the |
howcome@7417 | 930 | following for each line: |
howcome@7417 | 931 | |
howcome@7417 | 932 | <ol> |
howcome@7417 | 933 | <li>Lay out the content with leaders of minimum lengths |
howcome@7417 | 934 | |
howcome@7417 | 935 | <li>Determine the empty space left on the line. |
howcome@7417 | 936 | |
howcome@7417 | 937 | <li>Distribute the empty space between the leaders on the line. Glyphs |
howcome@7417 | 938 | must not be shown partially. All leaders on the line should, to the |
howcome@7417 | 939 | extent possible, have the same length. This may not always be possible as |
howcome@7417 | 940 | the minimum leader length must be honored. |
howcome@7417 | 941 | |
howcome@7417 | 942 | <li>Fill the empty space with the specified leader pattern. |
howcome@7417 | 943 | </ol> |
howcome@7417 | 944 | |
howcome@7417 | 945 | <div class=example> |
howcome@7417 | 946 | <p>Consider this code: |
howcome@7417 | 947 | |
howcome@7417 | 948 | <pre> |
howcome@7417 | 949 | <style> |
howcome@7417 | 950 | cite::before { content: leader(' ') } |
howcome@7417 | 951 | </style> |
howcome@7417 | 952 | <blockquote> |
howcome@7417 | 953 | Bla great bla bla world bla bla |
howcome@7417 | 954 | empire bla bla color bla bla |
howcome@7417 | 955 | history bla bla forever. |
howcome@7417 | 956 | <cite>John Johnson</cite> |
howcome@7417 | 957 | </blockquote> |
howcome@7417 | 958 | </pre> |
howcome@7417 | 959 | |
howcome@7417 | 960 | <p>Depending on the width of the containing block, this may be rendered |
howcome@7417 | 961 | as: |
howcome@7417 | 962 | |
howcome@7417 | 963 | <pre> |
howcome@7417 | 964 | Bla great bla bla world bla bla |
howcome@7417 | 965 | empire bla bla color bla bla |
simon@7435 | 966 | history bla bla forever. John |
howcome@7417 | 967 | Johnson |
howcome@7417 | 968 | </pre> |
howcome@7417 | 969 | |
howcome@7417 | 970 | <p>However, this rendering is preferable: |
howcome@7417 | 971 | |
howcome@7417 | 972 | <pre> |
howcome@7417 | 973 | Bla great bla bla world bla bla |
howcome@7417 | 974 | empire bla bla color bla bla |
howcome@7417 | 975 | history bla bla forever. |
howcome@7417 | 976 | John Johnson |
howcome@7417 | 977 | </pre> |
howcome@7417 | 978 | |
howcome@7417 | 979 | <p>To indicate that <q>John Johnson</q> should be kept on one line, this |
howcome@7417 | 980 | rule can be added to the style sheet: |
howcome@7417 | 981 | |
howcome@7417 | 982 | <pre> |
howcome@7417 | 983 | cite { text-wrap: suppress } |
howcome@7417 | 984 | </pre> |
howcome@7417 | 985 | |
howcome@7417 | 986 | <p>Until ‘<code class=property>text-wrap</code>’ is widely supported, |
howcome@7417 | 987 | this rule can also be used: |
howcome@7417 | 988 | |
howcome@7417 | 989 | <pre> |
howcome@7417 | 990 | cite { white-space: nowrap } |
howcome@7417 | 991 | </pre> |
howcome@7417 | 992 | |
howcome@7417 | 993 | <p>If the containing element is wider, this may be the resultant |
howcome@7417 | 994 | presentation: |
howcome@7417 | 995 | |
howcome@7417 | 996 | <pre> |
howcome@7417 | 997 | Bla great bla bla world bla bla empire |
simon@7435 | 998 | bla bla color bla bla history bla bla |
howcome@7417 | 999 | forever. John Johnson |
howcome@7417 | 1000 | </pre> |
howcome@7417 | 1001 | </div> |
howcome@7417 | 1002 | |
howcome@7417 | 1003 | <h2 id=cross-references><span class=secno>4. </span>Cross-references</h2> |
howcome@7417 | 1004 | |
howcome@7417 | 1005 | <p>It is common to refer to other parts of a document by way of a section |
howcome@7417 | 1006 | number (e.g., "See section 3.4.1"), a page number (e.g., "See discussion |
howcome@7417 | 1007 | on page 72"), or a string (e.g., "See the chapter on Europe"). Being able |
howcome@7417 | 1008 | to resolve these cross-references automatically saves time and reduces the |
howcome@7417 | 1009 | number of errors. |
howcome@7417 | 1010 | |
howcome@7417 | 1011 | <h3 id=the-target-counter-and-target-counters-v><span class=secno>4.1. |
howcome@7417 | 1012 | </span>The ‘<code class=css>target-counter</code>’ and ‘<code |
howcome@7417 | 1013 | class=css>target-counters</code>’ values</h3> |
howcome@7417 | 1014 | |
howcome@7417 | 1015 | <p>Numerical cross-references are generated by ‘<code |
howcome@7417 | 1016 | class=css>target-counter()</code>’ and ‘<code |
howcome@7417 | 1017 | class=css>target-counters()</code>’ values that fetch the value of a |
howcome@7417 | 1018 | counter at the target end of the link. These functions are similar to the |
howcome@7417 | 1019 | ‘<code class=css>counter()</code>’ and ‘<code |
howcome@7417 | 1020 | class=css>counters()</code>’ functions, except that they fetch counter |
howcome@7417 | 1021 | values from remote elements. ‘<code class=css>target-counter()</code>’ |
howcome@7417 | 1022 | has two required arguments: the url of the link, and the name of a |
howcome@7417 | 1023 | counter. ‘<code class=css>target-counters()</code>’ has three required |
howcome@7417 | 1024 | arguments: the url of the link, the name of a counter, and a separator |
howcome@7417 | 1025 | string. Both functions accepts an optional argument at the end that |
howcome@7417 | 1026 | describes which list style type to use when presenting the resulting |
howcome@7417 | 1027 | number; ‘<code class=css>decimal</code>’ being the default. |
howcome@7417 | 1028 | |
howcome@7417 | 1029 | <div class=example> |
howcome@7417 | 1030 | <p>This style sheet specifies that a string like " (see page 72)" is added |
howcome@7417 | 1031 | after a link: |
howcome@7417 | 1032 | |
howcome@7417 | 1033 | <pre> |
howcome@7417 | 1034 | a::after { content: "(see page " target-counter(attr(href url), page, decimal) ")" } |
howcome@7417 | 1035 | </pre> |
howcome@7417 | 1036 | </div> |
howcome@7417 | 1037 | |
howcome@7417 | 1038 | <div class=example> |
howcome@7417 | 1039 | <p>This style sheet specifies that a string like " (see section 1.3.5)" is |
howcome@7417 | 1040 | added after a link: |
howcome@7417 | 1041 | |
howcome@7417 | 1042 | <pre> |
howcome@7417 | 1043 | a::after { content: "(see section " target-counters(attr(href url), section, ".", decimal) ")" } |
howcome@7417 | 1044 | </pre> |
howcome@7417 | 1045 | </div> |
howcome@7417 | 1046 | |
howcome@7417 | 1047 | <h3 id=the-target-text-value><span class=secno>4.2. </span>The ‘<code |
howcome@7417 | 1048 | class=css>target-text</code>’ value</h3> |
howcome@7417 | 1049 | |
howcome@7417 | 1050 | <p>Textual cross-references are generated by ‘<code |
howcome@7417 | 1051 | class=css>target-text()</code>’ which fetches the textual content from |
howcome@7417 | 1052 | the target end of the link. Only text is copied; not style, structure, or |
howcome@7417 | 1053 | replaced content. ‘<code class=css>target-text()</code>’ has one |
howcome@7417 | 1054 | required argument: the url of the link. An optional second argument |
howcome@7417 | 1055 | specifies exactly which content is fetched. There are five possible |
howcome@7417 | 1056 | values: ‘<code class=css>contents</code>’, ‘<code |
howcome@7417 | 1057 | class=css>content-element</code>’, ‘<code |
howcome@7417 | 1058 | class=css>content-before</code>’, ‘<code |
howcome@7417 | 1059 | class=css>content-after</code>’, ‘<code |
howcome@7417 | 1060 | class=css>content-first-letter</code>’; these keywords are defined |
howcome@7417 | 1061 | above. |
howcome@7417 | 1062 | |
howcome@7417 | 1063 | <div class=example> |
howcome@7417 | 1064 | <p>To generate this text |
howcome@7417 | 1065 | |
howcome@7417 | 1066 | <blockquote> |
howcome@7417 | 1067 | <p>See Chapter 3 ("A better way") on page 31 for an in-depth evaluation. |
howcome@7417 | 1068 | </blockquote> |
howcome@7417 | 1069 | from this markup: |
howcome@7417 | 1070 | <pre> |
howcome@7417 | 1071 | <p>See <a href="#chx">this chapter</a> for an in-depth evaluation. |
howcome@7417 | 1072 | ... |
howcome@7417 | 1073 | <h2 id="chx">A better way</h2> |
howcome@7417 | 1074 | </pre> |
howcome@7417 | 1075 | this CSS code can be used: |
howcome@7417 | 1076 | <pre> |
howcome@7417 | 1077 | h2 { counter-increment: chapter } |
simon@7435 | 1078 | a { content: "Chapter " target-counter(attr(href url), chapter) |
howcome@7417 | 1079 | ' ("' target-text(attr(href url), content-element) '") on page ' |
howcome@7417 | 1080 | target-counter(attr(href url), page); |
howcome@7417 | 1081 | </pre> |
howcome@7417 | 1082 | </div> |
howcome@7417 | 1083 | |
howcome@7417 | 1084 | <h2 id=footnotes><span class=secno>5. </span>Footnotes</h2> |
howcome@7417 | 1085 | |
howcome@7417 | 1086 | <p>A footnote is a note typically placed at the bottom of a page that |
howcome@7417 | 1087 | comments on or cites a reference. References to footnotes are marked with |
howcome@7417 | 1088 | a <em>note-call</em> in the main text. The rendering of footnotes is |
howcome@7417 | 1089 | complex. As far as possible, footnotes try to reuse other parts of CSS. |
howcome@7417 | 1090 | However, due to the typographic traditions of footnotes, some new |
howcome@7417 | 1091 | functionality is required to support footnotes in CSS: |
howcome@7417 | 1092 | |
howcome@7417 | 1093 | <p>In order to support footnotes in CSS, the following functionality is |
howcome@7417 | 1094 | added: |
howcome@7417 | 1095 | |
howcome@7417 | 1096 | <ul> |
howcome@7417 | 1097 | <li>one new value on the ‘<code class=property>float</code>’ property: |
howcome@7417 | 1098 | ‘<code class=css>footnote</code>’ |
howcome@7417 | 1099 | |
howcome@7417 | 1100 | <li>one new page area: ‘<code class=css>@footnote</code>’ |
howcome@7417 | 1101 | |
howcome@7417 | 1102 | <li>two new pseudo-elements: ‘<code class=css>::footnote-call</code>’ |
howcome@7417 | 1103 | and ‘<code class=css>::footnote-marker</code>’ |
howcome@7417 | 1104 | |
howcome@7417 | 1105 | <li>one predefined counter: ‘<code class=css>footnote</code>’ |
howcome@7417 | 1106 | |
howcome@7417 | 1107 | <li>one new value on the ‘<code class=property>content</code>’ |
howcome@7417 | 1108 | property: ‘<code class=css>target-pull()</code>’ |
howcome@7417 | 1109 | |
howcome@7417 | 1110 | <li>border segments |
howcome@7417 | 1111 | <!--<li>two new 'list-style-type' values: ''super-decimal'', and symbol(...)--> |
howcome@7417 | 1112 | </ul> |
howcome@7417 | 1113 | |
howcome@7417 | 1114 | <div class=example> |
howcome@7417 | 1115 | <p>In its simplest form, making a footnote is simple. |
howcome@7417 | 1116 | |
howcome@7417 | 1117 | <pre> |
howcome@7417 | 1118 | <style> |
howcome@7417 | 1119 | .footnote { float: footnote } |
howcome@7417 | 1120 | </style> |
howcome@7417 | 1121 | |
howcome@7417 | 1122 | <p>A sentence consists of words. <span class="footnote">Most often.</span>. |
howcome@7417 | 1123 | </pre> |
howcome@7417 | 1124 | |
howcome@7417 | 1125 | <p>In this example, the text <q>Most often.</q> will be placed in a |
howcome@7417 | 1126 | footnote. A note-call will be left behind in the main text and a |
howcome@7417 | 1127 | corresponding marker will be shown next to the footnote. Here is one |
howcome@7417 | 1128 | possible rendering: |
howcome@7417 | 1129 | |
howcome@7417 | 1130 | <pre> |
howcome@7417 | 1131 | A sentence consists of words. ¹ |
howcome@7417 | 1132 | |
howcome@7417 | 1133 | ¹ Most often. |
howcome@7417 | 1134 | </pre> |
howcome@7417 | 1135 | </div> |
howcome@7417 | 1136 | |
howcome@7417 | 1137 | <div class=example> |
howcome@7417 | 1138 | <p>To support legacy browsers, it is often better to make a link to the |
howcome@7417 | 1139 | note rather than including the text inline. This example shows how to |
howcome@7417 | 1140 | fetch the content of a note and place it in a footnote. |
howcome@7417 | 1141 | |
howcome@7417 | 1142 | <pre> |
howcome@7417 | 1143 | <style> |
howcome@7417 | 1144 | @media print { |
simon@7435 | 1145 | .footnote { |
howcome@7417 | 1146 | float: footnote; |
howcome@7417 | 1147 | content: target-pull(attr(href url)) } |
howcome@7417 | 1148 | .call { display: none } |
howcome@7417 | 1149 | } |
howcome@7417 | 1150 | </style> |
howcome@7417 | 1151 | ... |
howcome@7417 | 1152 | <p>A sentence consists of words<a class="footnote" href="#words"> [3]</a>. |
howcome@7417 | 1153 | ... |
howcome@7417 | 1154 | <p id=words><span class="call">[3]</span> Most often. |
howcome@7417 | 1155 | </pre> |
howcome@7417 | 1156 | |
howcome@7417 | 1157 | <p class=issue>define ‘<code class=css>target-pull</code>’ |
howcome@7417 | 1158 | |
howcome@7417 | 1159 | <p>When shown in a legacy browser, the content of the element will be |
howcome@7417 | 1160 | shown as a clickable link to an endnote. When printed according to this |
howcome@7417 | 1161 | specification, there will be a footnote: |
howcome@7417 | 1162 | |
howcome@7417 | 1163 | <pre> |
howcome@7417 | 1164 | A sentence consists of words¹. |
howcome@7417 | 1165 | |
howcome@7417 | 1166 | ¹ Most often. |
howcome@7417 | 1167 | </pre> |
howcome@7417 | 1168 | </div> |
howcome@7417 | 1169 | |
howcome@7417 | 1170 | <div class=example> Consider this markup: |
howcome@7417 | 1171 | <pre> |
howcome@7417 | 1172 | <p>Sorry, <span title="This is, of course, a lie.">we're closing for lunch</span>. |
howcome@7417 | 1173 | </pre> |
howcome@7417 | 1174 | |
howcome@7417 | 1175 | <p>The content of the "title" attribute can be turned into a footnote with |
howcome@7417 | 1176 | this code: |
howcome@7417 | 1177 | |
howcome@7417 | 1178 | <pre> |
simon@7435 | 1179 | span[title]::after { |
howcome@7417 | 1180 | content: attr(title); |
howcome@7417 | 1181 | float: footnote; |
howcome@7417 | 1182 | } |
howcome@7417 | 1183 | </pre> |
howcome@7417 | 1184 | </div> |
howcome@7417 | 1185 | |
howcome@7417 | 1186 | <h3 id=turning-elements-into-footnotes><span class=secno>5.1. |
howcome@7417 | 1187 | </span>Turning elements into footnotes</h3> |
howcome@7417 | 1188 | |
howcome@7417 | 1189 | <p>An element with ‘<code class=css>float: footnote</code>’ (called a |
howcome@7417 | 1190 | <em>footnote element</em>) is moved to the <em>footnote area</em> and a |
howcome@7417 | 1191 | <em>footnote-call</em> pseudo-element is put in its original place. |
howcome@7417 | 1192 | |
howcome@7417 | 1193 | <div class=example> |
howcome@7417 | 1194 | <pre> |
simon@7435 | 1195 | span.footnote { |
howcome@7417 | 1196 | float: footnote; |
howcome@7417 | 1197 | } |
howcome@7417 | 1198 | </pre> |
howcome@7417 | 1199 | </div> |
howcome@7417 | 1200 | |
howcome@7417 | 1201 | <p>Footnote elements are presented inside the <em>footnote area</em>, but |
howcome@7417 | 1202 | they inherit through their normal place in the structure of the document. |
howcome@7417 | 1203 | |
howcome@7417 | 1204 | <p>The ‘<code class=property>display</code>’ property on footnote |
howcome@7417 | 1205 | elements is ignored. Instead, the value of the ‘<code |
howcome@7417 | 1206 | class=property>display</code>’ property in the @footnote context |
howcome@7417 | 1207 | determines if footnotes are block or inline elements. |
howcome@7417 | 1208 | |
howcome@7417 | 1209 | <div class=example> |
howcome@7417 | 1210 | <p>In this example, the footnotes are displayed inline: |
howcome@7417 | 1211 | |
howcome@7417 | 1212 | <pre> |
simon@7435 | 1213 | @footnote { |
howcome@7417 | 1214 | display: inline; |
howcome@7417 | 1215 | } |
simon@7435 | 1216 | span.footnote { |
howcome@7417 | 1217 | float: footnote; |
howcome@7417 | 1218 | } |
howcome@7417 | 1219 | </pre> |
howcome@7417 | 1220 | |
howcome@7417 | 1221 | <p>Here is one possible presentation of inline footnotes: |
howcome@7417 | 1222 | |
howcome@7417 | 1223 | <pre> |
simon@7435 | 1224 | ¹ The first footnote. º The second footnote. |
howcome@7417 | 1225 | </pre> |
howcome@7417 | 1226 | </div> |
howcome@7417 | 1227 | <!-- |
simon@7435 | 1228 | <p class=issue>Another way to achieve this would be to introduce different keywords for inline and block footnotes (e.g., float: footnote-inline, float: footnote-block). |
howcome@7417 | 1229 | --> |
howcome@7417 | 1230 | |
howcome@7417 | 1231 | <p>For each new footnote element, the ‘<code class=css>footnote</code>’ |
howcome@7417 | 1232 | counter is automatically incremented. |
howcome@7417 | 1233 | |
howcome@7417 | 1234 | <h3 id=the-footnote-area><span class=secno>5.2. </span>The footnote area</h3> |
howcome@7417 | 1235 | |
howcome@7417 | 1236 | <p>All elements with ‘<code class=css>float: footnote</code>’ are moved |
howcome@7417 | 1237 | to the <em>footnote area</em>. The footnote area is described by an |
howcome@7417 | 1238 | @footnote-rule inside the @page-rule. By default, the footnote area |
howcome@7417 | 1239 | appears at the bottom of the page, but it can be positioned in other |
howcome@7417 | 1240 | places. |
howcome@7417 | 1241 | |
howcome@7417 | 1242 | <p class=issue>Should the footnote are be positioned using page floats or |
howcome@7417 | 1243 | (fixed?) absolute positioning? Or both? |
howcome@7417 | 1244 | |
howcome@7417 | 1245 | <p class=issue> |
howcome@7417 | 1246 | |
howcome@7417 | 1247 | <div class=example> |
howcome@7417 | 1248 | <p>These rules place the footnote area at the bottom of the page, spanning |
howcome@7417 | 1249 | all columns: |
howcome@7417 | 1250 | |
howcome@7417 | 1251 | <pre> |
howcome@7417 | 1252 | @page { |
simon@7435 | 1253 | @footnote { |
howcome@7417 | 1254 | float: bottom; |
howcome@7417 | 1255 | column-span: all; |
howcome@7417 | 1256 | width: 100%; |
howcome@7417 | 1257 | } |
howcome@7417 | 1258 | } |
howcome@7417 | 1259 | </pre> |
howcome@7417 | 1260 | </div> |
howcome@7417 | 1261 | |
howcome@7417 | 1262 | <div class=example> |
howcome@7417 | 1263 | <p>These rules place the footnote area at the bottom of the first column: |
howcome@7417 | 1264 | |
howcome@7417 | 1265 | <pre> |
howcome@7417 | 1266 | @page { |
simon@7435 | 1267 | @footnote { |
howcome@7417 | 1268 | float: bottom; |
howcome@7417 | 1269 | width: 100%; |
howcome@7417 | 1270 | } |
howcome@7417 | 1271 | } |
howcome@7417 | 1272 | </pre> |
howcome@7417 | 1273 | </div> |
howcome@7417 | 1274 | |
howcome@7417 | 1275 | <div class="example issue"> |
howcome@7417 | 1276 | <p>This code places the footnote area at the bottom of the right column: |
howcome@7417 | 1277 | |
howcome@7417 | 1278 | <pre> |
howcome@7417 | 1279 | @page { |
simon@7435 | 1280 | @footnote { |
howcome@7417 | 1281 | float: bottom-corner; |
howcome@7417 | 1282 | width: 100%; |
howcome@7417 | 1283 | } |
howcome@7417 | 1284 | } |
howcome@7417 | 1285 | </pre> |
howcome@7417 | 1286 | </div> |
howcome@7417 | 1287 | <!-- |
howcome@7417 | 1288 | <p class=issue>How should one indicate that the footnote area should |
howcome@7417 | 1289 | span columns? Typically, footnotes are put inside columns rather than |
howcome@7417 | 1290 | spanning the full width, but there could be exceptions. |
howcome@7417 | 1291 | --> |
howcome@7417 | 1292 | |
howcome@7417 | 1293 | <p>The content of the footnote area is considered to come before other |
howcome@7417 | 1294 | content which may compete for the same space on the same page. |
howcome@7417 | 1295 | |
howcome@7417 | 1296 | <div class=example> |
howcome@7417 | 1297 | <pre> |
howcome@7417 | 1298 | @page { @footnote { float: bottom page}} |
howcome@7417 | 1299 | div.figure { float: bottom page } |
howcome@7417 | 1300 | </pre> |
howcome@7417 | 1301 | |
howcome@7417 | 1302 | <p>If figures and footnotes are on the same page, the footnotes will |
howcome@7417 | 1303 | appear below the figures as they are floated to the bottom before the |
howcome@7417 | 1304 | figures. |
howcome@7417 | 1305 | </div> |
howcome@7417 | 1306 | |
howcome@7417 | 1307 | <p>Potentially, every page has a footnote area. If there are no footnotes |
howcome@7417 | 1308 | on the page, the footnote area will not take up any space. If there are |
howcome@7417 | 1309 | footnotes on a page, the layout of the footnote area will be determined by |
howcome@7417 | 1310 | the properties/values set on it, and by the footnote elements elements |
howcome@7417 | 1311 | inside it. |
howcome@7417 | 1312 | |
howcome@7417 | 1313 | <p>These properties apply to the footnote area: ‘<code |
howcome@7417 | 1314 | class=property>content</code>’, ‘<code |
howcome@7417 | 1315 | class=property>border</code>’, ‘<code |
howcome@7417 | 1316 | class=property>padding</code>’, ‘<code |
howcome@7417 | 1317 | class=property>margin</code>’, ‘<code class=property>height</code>’, |
howcome@7417 | 1318 | ‘<code class=property>width</code>’, ‘<code |
howcome@7417 | 1319 | class=property>max-height</code>’, ‘<code |
howcome@7417 | 1320 | class=property>max-width</code>’, ‘<code |
howcome@7417 | 1321 | class=property>min-height</code>’, ‘<code |
howcome@7417 | 1322 | class=property>min-width</code>’, the background properties. <!-- |
howcome@7417 | 1323 | <p class="note">In published books, it is customary for the footnote |
howcome@7417 | 1324 | area to be limited to less than half the height of the page area. Long |
howcome@7417 | 1325 | footnotes may need more space, and the customary solution is for |
howcome@7417 | 1326 | footnotes to span several pages. To achieve this, the 'max-height' |
howcome@7417 | 1327 | property should be used. However, footnotes spanning several pages is |
howcome@7417 | 1328 | an advanced feature which is not a conformance requirement for this |
howcome@7417 | 1329 | specification. |
howcome@7417 | 1330 | --> |
howcome@7417 | 1331 | |
howcome@7417 | 1332 | <div class=example> |
howcome@7417 | 1333 | <p>This example uses some of the applicable properties on @footnote: |
howcome@7417 | 1334 | |
howcome@7417 | 1335 | <pre> |
howcome@7417 | 1336 | @footnote { |
howcome@7417 | 1337 | margin-top: 0.5em; |
howcome@7417 | 1338 | border-top: thin solid black; |
howcome@7417 | 1339 | border-clip: 4em; |
howcome@7417 | 1340 | padding-top: 0.5em; |
howcome@7417 | 1341 | } |
howcome@7417 | 1342 | </pre> |
howcome@7417 | 1343 | |
howcome@7417 | 1344 | <p>The result of this code is a footnote area separated from other content |
howcome@7417 | 1345 | above it by margin, border and padding. Only 4em of the border is visible |
howcome@7417 | 1346 | due to the ‘<code class=property>border-clip</code>’ property, which |
howcome@7417 | 1347 | is defined in <a href="http://dev.w3.org/csswg/css4-background/">CSS |
howcome@7417 | 1348 | Backgrounds and Borders Module Level 4</a>. <!--[[!CSS4BACKGROUND]]-->. |
howcome@7417 | 1349 | </div> |
howcome@7417 | 1350 | <!-- |
howcome@7417 | 1351 | <p class="issue">Footnotes in tables and floats may be problematic. In |
howcome@7417 | 1352 | some cases, the author may want the footnote to go at the end of the |
howcome@7417 | 1353 | table or float instead of the bottom of the page. |
howcome@7417 | 1354 | --> |
howcome@7417 | 1355 | |
howcome@7417 | 1356 | <h3 id=footnote-calls><span class=secno>5.3. </span>Footnote calls</h3> |
howcome@7417 | 1357 | |
howcome@7417 | 1358 | <p>When an element is moved to the footnote area, a <em>footnote-call</em> |
howcome@7417 | 1359 | is left behind. By default, User Agents must behave as if this code is |
howcome@7417 | 1360 | part of the default style sheet: |
howcome@7417 | 1361 | |
howcome@7417 | 1362 | <pre> |
howcome@7417 | 1363 | ::footnote-call { |
howcome@7417 | 1364 | content: counter(footnote, super-decimal); |
howcome@7417 | 1365 | } |
howcome@7417 | 1366 | </pre> |
howcome@7417 | 1367 | |
howcome@7417 | 1368 | <p>The resulting note call is a super-script decimal number. |
howcome@7417 | 1369 | |
howcome@7417 | 1370 | <h3 id=footnote-markers><span class=secno>5.4. </span>Footnote markers</h3> |
howcome@7417 | 1371 | |
howcome@7417 | 1372 | <p>A ::footnote-marker pseudo-element is added to each footnote element, in |
howcome@7417 | 1373 | the same place, and replacing, the ::before pseudo-element. User agents |
howcome@7417 | 1374 | must, by default, show the "footnote" counter in the footnote-marker. |
howcome@7417 | 1375 | |
howcome@7417 | 1376 | <div class=example> |
howcome@7417 | 1377 | <p>User Agents may display footnote-calls and footnote-markers this way by |
howcome@7417 | 1378 | default: |
howcome@7417 | 1379 | |
howcome@7417 | 1380 | <pre> |
howcome@7417 | 1381 | ::footnote-call { |
howcome@7417 | 1382 | content: counter(footnote, super-decimal); |
howcome@7417 | 1383 | } |
howcome@7417 | 1384 | ::footnote-marker { |
howcome@7417 | 1385 | content: counter(footnote, super-decimal); |
howcome@7417 | 1386 | } |
howcome@7417 | 1387 | </pre> |
howcome@7417 | 1388 | </div> |
howcome@7417 | 1389 | |
howcome@7417 | 1390 | <p>Marker elements are discussed in more detail in the CSS Lists module <a |
howcome@7417 | 1391 | href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>. One |
howcome@7417 | 1392 | suggested change to that module is to honor the value of ‘<code |
howcome@7417 | 1393 | class=property>list-style-position</code>’ on the ::footnote-marker |
howcome@7417 | 1394 | pseudo-element itself rather than the corresponding list-item element. |
howcome@7417 | 1395 | Further, one clarification to the horizontal placement of the marker is |
howcome@7417 | 1396 | suggested: the <em>margin</em> box of the marker box is horizontally |
howcome@7417 | 1397 | aligned with the start of the line box. |
howcome@7417 | 1398 | |
howcome@7417 | 1399 | <h3 id=counting-footnotes><span class=secno>5.5. </span>Counting footnotes</h3> |
howcome@7417 | 1400 | |
howcome@7417 | 1401 | <p>The "footnote" counter is automatically incremented each time a footnote |
howcome@7417 | 1402 | is generated. That is, the "footnote" counter is incremented by one each |
howcome@7417 | 1403 | time an element with ‘<code class=css>float: footnote</code>’ appears. |
howcome@7417 | 1404 | |
howcome@7417 | 1405 | <p>The footnote counter can be reset with the ‘<code |
howcome@7417 | 1406 | class=property>counter-reset</code>’ property. |
howcome@7417 | 1407 | |
howcome@7417 | 1408 | <div class=example> This code resets the "footnote" counter on a per-page |
howcome@7417 | 1409 | page basis: |
howcome@7417 | 1410 | <pre> |
howcome@7417 | 1411 | @page { counter-reset: footnote } |
howcome@7417 | 1412 | </pre> |
howcome@7417 | 1413 | </div> |
howcome@7417 | 1414 | |
howcome@7417 | 1415 | <p class=issue>Should one also be able to manually increment the "footnote" |
howcome@7417 | 1416 | counter? <!-- |
howcome@7417 | 1417 | <p>The 'counter-increment' property can be set in the @footnote rule. |
howcome@7417 | 1418 | Each time an element with 'float: footnote' is found, the corresponding |
howcome@7417 | 1419 | counter is incremented. |
howcome@7417 | 1420 | |
howcome@7417 | 1421 | <div class="example"> |
howcome@7417 | 1422 | <p>This rule is part of the default style sheet: |
howcome@7417 | 1423 | |
howcome@7417 | 1424 | <pre> |
howcome@7417 | 1425 | @page { |
howcome@7417 | 1426 | @footnote { |
howcome@7417 | 1427 | counter-increment: footnote; |
howcome@7417 | 1428 | } |
howcome@7417 | 1429 | } |
howcome@7417 | 1430 | </pre> |
howcome@7417 | 1431 | |
howcome@7417 | 1432 | As a result, the "footnote" counter is incremented each time a footnote is generated. |
howcome@7417 | 1433 | </div> |
howcome@7417 | 1434 | --> |
howcome@7417 | 1435 | |
howcome@7417 | 1436 | <h3 id=laying-out-footnotes><span class=secno>5.6. </span>Laying out |
howcome@7417 | 1437 | footnotes</h3> |
howcome@7417 | 1438 | |
howcome@7417 | 1439 | <p>Footnotes must appear as early as possible under the following |
howcome@7417 | 1440 | constraints: |
howcome@7417 | 1441 | |
howcome@7417 | 1442 | <ol> |
howcome@7417 | 1443 | <li>A footnote marker may not appear on an earlier page than the footnote |
howcome@7417 | 1444 | call. |
howcome@7417 | 1445 | |
howcome@7417 | 1446 | <li>Footnotes may not appear out of document order. |
howcome@7417 | 1447 | <!--<span class="issue">(What order is that: the document order or the visual order? |
howcome@7417 | 1448 | Probably the document order, the same order as the footnote counter |
howcome@7417 | 1449 | values, although the visual order of the footnote calls may be |
howcome@7417 | 1450 | different, due to their occurrence in positioned and floating |
howcome@7417 | 1451 | elements.)</span>--> |
howcome@7417 | 1452 | |
howcome@7417 | 1453 | <li>The footnote area is limited in size by ‘<code |
howcome@7417 | 1454 | class=property>max-height</code>’, unless the page contains only |
howcome@7417 | 1455 | footnotes. (E.g., if at the end of the document there are still footnotes |
howcome@7417 | 1456 | unprinted, the User Agent can use the whole page to display footnotes.) |
howcome@7417 | 1457 | |
howcome@7417 | 1458 | <li>If there is a footnote call on a page, the footnote area may not be |
howcome@7417 | 1459 | empty, unless its ‘<code class=property>max-height</code>’ is too |
howcome@7417 | 1460 | small. |
howcome@7417 | 1461 | </ol> |
howcome@7417 | 1462 | |
howcome@7417 | 1463 | <h3 id=footnote-magic><span class=secno>5.7. </span>Footnote magic</h3> |
howcome@7417 | 1464 | |
howcome@7417 | 1465 | <p>When an element is turned into a footnote, certain magical things |
howcome@7417 | 1466 | happen. The element is moved to the footnote area, a footnote call is left |
howcome@7417 | 1467 | behind in its place, a footnote marker is displayed before the element, |
howcome@7417 | 1468 | and the footnote counter is incremented. |
howcome@7417 | 1469 | |
howcome@7417 | 1470 | <p>When rendering footnotes, User Agents may apply certain heuristics to |
howcome@7417 | 1471 | improve the presentation. For example, the space between a footnote-call |
howcome@7417 | 1472 | and surrounding text may be adjusted. Another example is the height of the |
howcome@7417 | 1473 | footnote area; it may be heuristically constrained to limit the area that |
howcome@7417 | 1474 | is used for footnotes. <!-- |
howcome@7417 | 1475 | <h2>Sidenotes</h2> |
howcome@7417 | 1476 | |
howcome@7417 | 1477 | <p>Sidenotes are supported the same way as footnotes; only the name |
howcome@7417 | 1478 | and the settings in the default style sheet differentiates the two. |
howcome@7417 | 1479 | |
howcome@7417 | 1480 | <p class=note>The motivation for having another page-based area into |
howcome@7417 | 1481 | which content can be floated is that footnotes and sidenotes are |
simon@7435 | 1482 | often used in the same document. |
howcome@7417 | 1483 | |
howcome@7417 | 1484 | <div class="example"> |
howcome@7417 | 1485 | <p>This example moves images to the outside margin of pages: |
howcome@7417 | 1486 | |
howcome@7417 | 1487 | <pre> |
simon@7435 | 1488 | @page :left { |
howcome@7417 | 1489 | margin-left: 10em; |
howcome@7417 | 1490 | @sidenote { position: fixed; left: -8em; width: 6em } |
howcome@7417 | 1491 | } |
simon@7435 | 1492 | @page :right { |
howcome@7417 | 1493 | margin-right: 10em; |
howcome@7417 | 1494 | @sidenote { position: fixed; right: -8em; width: 6em } |
howcome@7417 | 1495 | } |
howcome@7417 | 1496 | img { float: sidenote } |
howcome@7417 | 1497 | </pre> |
howcome@7417 | 1498 | </div> |
howcome@7417 | 1499 | |
howcome@7417 | 1500 | <p class=note>The reason for having both a footnote and a sidenote area |
howcome@7417 | 1501 | on every page is that some documents use both. |
howcome@7417 | 1502 | |
howcome@7417 | 1503 | <p class=issue>Should there be a mechanism to create new areas like |
howcome@7417 | 1504 | footnote/sidenote, or are two "magic" areas enough? |
howcome@7417 | 1505 | --> |
howcome@7417 | 1506 | <!-- |
howcome@7417 | 1507 | <h2>Hyphenation</h2> |
howcome@7417 | 1508 | --> <!-- |
howcome@7417 | 1509 | <table class=hyphenate> |
howcome@7417 | 1510 | <tr><th>CSS<th>XSL<th>DSSSL |
howcome@7417 | 1511 | <tr><th>hyphens<th>hyphenate<th>hyphenate |
howcome@7417 | 1512 | |
howcome@7417 | 1513 | <tr><td>none<td>false |
howcome@7417 | 1514 | <tr><td>manual<td> |
howcome@7417 | 1515 | <tr><td>auto<td>true |
howcome@7417 | 1516 | |
howcome@7417 | 1517 | <tr><th>hyphenate-resource<th>country, language, script<th>? |
howcome@7417 | 1518 | <tr><td>auto |
howcome@7417 | 1519 | <tr><td><uri> |
howcome@7417 | 1520 | |
howcome@7417 | 1521 | <tr><th>hyphenate-before<th>hyphenation-remain-character-count<th>hyphenation-remain-char-count |
howcome@7417 | 1522 | <tr><td>auto<td> |
howcome@7417 | 1523 | <tr><td><integer><td><integer> |
howcome@7417 | 1524 | |
howcome@7417 | 1525 | <tr><th>hyphenate-after<th>hyphenation-push-character-count<th>hyphenation-push-char-count |
howcome@7417 | 1526 | <tr><td>auto<td> |
howcome@7417 | 1527 | <tr><td><integer><td><integer> |
howcome@7417 | 1528 | |
howcome@7417 | 1529 | <tr><th>hyphenate-lines<th>hyphenation-ladder-count<th>hyphenation-ladder-count |
howcome@7417 | 1530 | <tr><td>no-limit<td>no-limit |
howcome@7417 | 1531 | <tr><td><integer> |
howcome@7417 | 1532 | |
howcome@7417 | 1533 | <tr><th>hyphenate-character<th>hyphenation-character<th>hyphenation-char |
howcome@7417 | 1534 | <tr><td><string><td><character> |
howcome@7417 | 1535 | <tr><td>auto |
howcome@7417 | 1536 | |
howcome@7417 | 1537 | <tr><th><th>hyphenation-keep<th>hyphenation-keep |
howcome@7417 | 1538 | <tr><td><td>auto |
howcome@7417 | 1539 | <tr><td><td>column |
howcome@7417 | 1540 | <tr><td><td>page |
howcome@7417 | 1541 | <tr><th><th><th>hyphenation-exceptions |
howcome@7417 | 1542 | <tr><td><td><td>The value is a list of strings. Each string is a word which may contain hyphen characters, #\-, indicating where hyphenation may occur. If a word to be hyphenated occurs in the list, it may only be hyphenated in the specified places. The initial value is the empty list. |
howcome@7417 | 1543 | |
howcome@7417 | 1544 | |
howcome@7417 | 1545 | </table> |
howcome@7417 | 1546 | |
howcome@7417 | 1547 | --> |
howcome@7417 | 1548 | <!-- |
howcome@7417 | 1549 | <p>Hyphenation means splitting words to improve the layout of |
howcome@7417 | 1550 | paragraphs. This specifications does not define the exact rules for |
simon@7435 | 1551 | hyphenation, but describes six properties that influence hyphenation. |
howcome@7417 | 1552 | |
howcome@7417 | 1553 | <h3>The 'hyphens' property</h3> |
howcome@7417 | 1554 | |
howcome@7417 | 1555 | <table class=propdef> |
howcome@7417 | 1556 | <tr> |
howcome@7417 | 1557 | <td><em>Name:</em> |
howcome@7417 | 1558 | <td><dfn>hyphens</dfn> |
howcome@7417 | 1559 | <tr> |
howcome@7417 | 1560 | <td><em>Value:</em> |
howcome@7417 | 1561 | <td>none | manual | auto | all |
howcome@7417 | 1562 | <tr> |
howcome@7417 | 1563 | <td><em>Initial:</em> |
howcome@7417 | 1564 | <td>manual |
howcome@7417 | 1565 | <tr> |
howcome@7417 | 1566 | <td><em>Applies to:</em> |
howcome@7417 | 1567 | <td>all elements |
howcome@7417 | 1568 | <tr> |
howcome@7417 | 1569 | <td><em>Inherited:</em> |
howcome@7417 | 1570 | <td>yes |
howcome@7417 | 1571 | <tr> |
howcome@7417 | 1572 | <td><em>Percentages:</em> |
howcome@7417 | 1573 | <td>N/A |
howcome@7417 | 1574 | <tr> |
howcome@7417 | 1575 | <td><em>Media:</em> |
howcome@7417 | 1576 | <td>visual |
howcome@7417 | 1577 | <tr> |
howcome@7417 | 1578 | <td><em>Computed value:</em> |
howcome@7417 | 1579 | <td>specified value |
howcome@7417 | 1580 | </table> |
howcome@7417 | 1581 | |
howcome@7417 | 1582 | <p>Values are: |
howcome@7417 | 1583 | |
howcome@7417 | 1584 | <dl> |
howcome@7417 | 1585 | <dt>none |
howcome@7417 | 1586 | |
howcome@7417 | 1587 | <dd>Words are not broken at line breaks, even if characters inside the word suggest line break points. |
howcome@7417 | 1588 | |
howcome@7417 | 1589 | <dt>manual |
howcome@7417 | 1590 | |
simon@7435 | 1591 | <dd>Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. Characters can be explicit or conditional. |
howcome@7417 | 1592 | |
howcome@7417 | 1593 | <div class="example"> |
howcome@7417 | 1594 | <p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an explicit hyphen. Unicode Standard Annex #14 describes the <a href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens in the</a> Unicode Line breaking algorithm. |
howcome@7417 | 1595 | </div> |
howcome@7417 | 1596 | |
howcome@7417 | 1597 | <div class="example"> |
howcome@7417 | 1598 | <p>In HTML, &shy; represents the soft hyphen character which suggests a line break opportunity. |
howcome@7417 | 1599 | <pre> |
howcome@7417 | 1600 | ex&shy;ample. |
howcome@7417 | 1601 | </pre> |
howcome@7417 | 1602 | </div> |
howcome@7417 | 1603 | |
howcome@7417 | 1604 | |
howcome@7417 | 1605 | <dt>auto |
simon@7435 | 1606 | <dd>Words can be broken at appropriate hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources. Characters inside the word take priority over hyphenation points determined by other resources. |
howcome@7417 | 1607 | |
howcome@7417 | 1608 | <dt>all |
howcome@7417 | 1609 | |
simon@7435 | 1610 | <dd>All possible hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources, are marked. The visual appearance of the mark is UA-dependent. |
howcome@7417 | 1611 | |
howcome@7417 | 1612 | |
howcome@7417 | 1613 | </dl> |
howcome@7417 | 1614 | |
howcome@7417 | 1615 | <h3>The 'hyphenate-resource' property</h3> |
howcome@7417 | 1616 | |
howcome@7417 | 1617 | <table class=propdef> |
howcome@7417 | 1618 | <tr> |
howcome@7417 | 1619 | <td><em>Name:</em> |
howcome@7417 | 1620 | <td><dfn>hyphenate-resource</dfn> |
howcome@7417 | 1621 | <tr> |
howcome@7417 | 1622 | <td><em>Value:</em> |
howcome@7417 | 1623 | <td>none | <uri> [, <uri> ]* |
howcome@7417 | 1624 | <tr> |
howcome@7417 | 1625 | <td><em>Initial:</em> |
howcome@7417 | 1626 | <td>none |
howcome@7417 | 1627 | <tr> |
howcome@7417 | 1628 | <td><em>Applies to:</em> |
howcome@7417 | 1629 | <td>all elements |
howcome@7417 | 1630 | <tr> |
howcome@7417 | 1631 | <td><em>Inherited:</em> |
howcome@7417 | 1632 | <td>yes |
howcome@7417 | 1633 | <tr> |
howcome@7417 | 1634 | <td><em>Percentages:</em> |
howcome@7417 | 1635 | <td>N/A |
howcome@7417 | 1636 | <tr> |
howcome@7417 | 1637 | <td><em>Media:</em> |
howcome@7417 | 1638 | <td>visual |
howcome@7417 | 1639 | <tr> |
howcome@7417 | 1640 | <td><em>Computed value:</em> |
howcome@7417 | 1641 | <td>specified value |
howcome@7417 | 1642 | </table> |
howcome@7417 | 1643 | |
howcome@7417 | 1644 | <p>This property specifies a comma-separated list of external resources that can help the UA determine hyphenation points. If more than one resource is specified, the UA should consult each resource – in turn, from the beginning – until it finds one that is able to determine hyphenation points in a word. The 'none' value indicates that no external resources are available. In any case, the UA can also use local resources not listed on this property. |
howcome@7417 | 1645 | |
howcome@7417 | 1646 | <div class="example"> |
howcome@7417 | 1647 | |
howcome@7417 | 1648 | <p>Often, finding the right hyphenate resource is based on knowing the |
howcome@7417 | 1649 | language of the text. The <code>lang</code> attribute is recommended |
howcome@7417 | 1650 | for encoding the language, and the corresponding selector is used in |
howcome@7417 | 1651 | this example: |
howcome@7417 | 1652 | |
howcome@7417 | 1653 | <pre> |
howcome@7417 | 1654 | :lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") } |
howcome@7417 | 1655 | </pre> |
howcome@7417 | 1656 | |
howcome@7417 | 1657 | </div> |
howcome@7417 | 1658 | |
howcome@7417 | 1659 | <h3>The 'hyphenate-before' and 'hyphenate-after' properties</h3> |
howcome@7417 | 1660 | |
howcome@7417 | 1661 | <table class=propdef> |
howcome@7417 | 1662 | <tr> |
howcome@7417 | 1663 | <td><em>Name:</em> |
howcome@7417 | 1664 | <td><dfn>hyphenate-before</dfn> |
howcome@7417 | 1665 | <tr> |
howcome@7417 | 1666 | <td><em>Value:</em> |
howcome@7417 | 1667 | <td><integer> | auto |
howcome@7417 | 1668 | <tr> |
howcome@7417 | 1669 | <td><em>Initial:</em> |
howcome@7417 | 1670 | <td>auto |
howcome@7417 | 1671 | <tr> |
howcome@7417 | 1672 | <td><em>Applies to:</em> |
howcome@7417 | 1673 | <td>all elements |
howcome@7417 | 1674 | <tr> |
howcome@7417 | 1675 | <td><em>Inherited:</em> |
howcome@7417 | 1676 | <td>yes |
howcome@7417 | 1677 | <tr> |
howcome@7417 | 1678 | <td><em>Percentages:</em> |
howcome@7417 | 1679 | <td>N/A |
howcome@7417 | 1680 | <tr> |
howcome@7417 | 1681 | <td><em>Media:</em> |
howcome@7417 | 1682 | <td>visual |
howcome@7417 | 1683 | <tr> |
howcome@7417 | 1684 | <td><em>Computed value:</em> |
howcome@7417 | 1685 | <td>specified value |
howcome@7417 | 1686 | </table> |
howcome@7417 | 1687 | |
howcome@7417 | 1688 | <p>This property specifies the minimum number of characters in a |
howcome@7417 | 1689 | hyphenated word before the hyphenation character. The ''auto'' value |
howcome@7417 | 1690 | means that the UA chooses a value that adapts to the current layout. |
howcome@7417 | 1691 | |
howcome@7417 | 1692 | <p class="note">Unless the UA is able to calculate a better value, it |
howcome@7417 | 1693 | is suggested that ''auto'' means 2. |
howcome@7417 | 1694 | |
howcome@7417 | 1695 | |
howcome@7417 | 1696 | <table class=propdef> |
howcome@7417 | 1697 | <tr> |
howcome@7417 | 1698 | <td><em>Name:</em> |
howcome@7417 | 1699 | <td><dfn>hyphenate-after</dfn> |
howcome@7417 | 1700 | <tr> |
howcome@7417 | 1701 | <td><em>Value:</em> |
howcome@7417 | 1702 | <td><integer> | auto |
howcome@7417 | 1703 | <tr> |
howcome@7417 | 1704 | <td><em>Initial:</em> |
howcome@7417 | 1705 | <td>auto |
howcome@7417 | 1706 | <tr> |
howcome@7417 | 1707 | <td><em>Applies to:</em> |
howcome@7417 | 1708 | <td>all elements |
howcome@7417 | 1709 | <tr> |
howcome@7417 | 1710 | <td><em>Inherited:</em> |
howcome@7417 | 1711 | <td>yes |
howcome@7417 | 1712 | <tr> |
howcome@7417 | 1713 | <td><em>Percentages:</em> |
howcome@7417 | 1714 | <td>N/A |
howcome@7417 | 1715 | <tr> |
howcome@7417 | 1716 | <td><em>Media:</em> |
howcome@7417 | 1717 | <td>visual |
howcome@7417 | 1718 | <tr> |
howcome@7417 | 1719 | <td><em>Computed value:</em> |
howcome@7417 | 1720 | <td>specified value |
howcome@7417 | 1721 | </table> |
howcome@7417 | 1722 | |
howcome@7417 | 1723 | <p>This property specifies the minimum number of characters in a hyphenated word after the hyphenation character. The ''auto'' value means that the UA chooses a value that adapts to the current layout. |
howcome@7417 | 1724 | |
howcome@7417 | 1725 | <p class="note">Unless the UA is able to calculate a better value, it is suggested that ''auto'' means 2. |
howcome@7417 | 1726 | |
howcome@7417 | 1727 | |
howcome@7417 | 1728 | <h3>The 'hyphenate-lines' property</h3> |
howcome@7417 | 1729 | |
howcome@7417 | 1730 | <table class=propdef> |
howcome@7417 | 1731 | <tr> |
howcome@7417 | 1732 | <td><em>Name:</em> |
howcome@7417 | 1733 | <td><dfn>hyphenate-lines</dfn> |
howcome@7417 | 1734 | <tr> |
howcome@7417 | 1735 | <td><em>Value:</em> |
howcome@7417 | 1736 | <td>no-limit | <integer> |
howcome@7417 | 1737 | <tr> |
howcome@7417 | 1738 | <td><em>Initial:</em> |
howcome@7417 | 1739 | <td>no-limit |
howcome@7417 | 1740 | <tr> |
howcome@7417 | 1741 | <td><em>Applies to:</em> |
howcome@7417 | 1742 | <td>all elements |
howcome@7417 | 1743 | <tr> |
howcome@7417 | 1744 | <td><em>Inherited:</em> |
howcome@7417 | 1745 | <td>yes |
howcome@7417 | 1746 | <tr> |
howcome@7417 | 1747 | <td><em>Percentages:</em> |
howcome@7417 | 1748 | <td>N/A |
howcome@7417 | 1749 | <tr> |
howcome@7417 | 1750 | <td><em>Media:</em> |
howcome@7417 | 1751 | <td>visual |
howcome@7417 | 1752 | <tr> |
howcome@7417 | 1753 | <td><em>Computed value:</em> |
howcome@7417 | 1754 | <td>specified value |
howcome@7417 | 1755 | </table> |
howcome@7417 | 1756 | |
howcome@7417 | 1757 | <p>This property indicates the maximum number of successive hyphenated |
howcome@7417 | 1758 | lines in an element. In some cases, user agents may not be able to |
howcome@7417 | 1759 | honor the specified value. The ''no-limit'' value means that there is |
howcome@7417 | 1760 | no limit. |
howcome@7417 | 1761 | |
howcome@7417 | 1762 | <h3>The 'hyphenate-character' property</h3> |
howcome@7417 | 1763 | |
howcome@7417 | 1764 | <table class=propdef> |
howcome@7417 | 1765 | <tr> |
howcome@7417 | 1766 | <td><em>Name:</em> |
howcome@7417 | 1767 | <td><dfn>hyphenate-character</dfn> |
howcome@7417 | 1768 | <tr> |
howcome@7417 | 1769 | <td><em>Value:</em> |
howcome@7417 | 1770 | <td>auto | <string> |
howcome@7417 | 1771 | <tr> |
howcome@7417 | 1772 | <td><em>Initial:</em> |
howcome@7417 | 1773 | <td>auto |
howcome@7417 | 1774 | <tr> |
howcome@7417 | 1775 | <td><em>Applies to:</em> |
howcome@7417 | 1776 | <td>all elements |
howcome@7417 | 1777 | <tr> |
howcome@7417 | 1778 | <td><em>Inherited:</em> |
howcome@7417 | 1779 | <td>yes |
howcome@7417 | 1780 | <tr> |
howcome@7417 | 1781 | <td><em>Percentages:</em> |
howcome@7417 | 1782 | <td>N/A |
howcome@7417 | 1783 | <tr> |
howcome@7417 | 1784 | <td><em>Media:</em> |
howcome@7417 | 1785 | <td>visual |
howcome@7417 | 1786 | <tr> |
howcome@7417 | 1787 | <td><em>Computed value:</em> |
howcome@7417 | 1788 | <td>specified value |
howcome@7417 | 1789 | </table> |
howcome@7417 | 1790 | |
howcome@7417 | 1791 | <p>This property specifies strings that are shown between parts of |
howcome@7417 | 1792 | hyphenated words. The 'auto' value means that the user agent should |
simon@7435 | 1793 | find an appropriate value. |
howcome@7417 | 1794 | |
howcome@7417 | 1795 | <div class="example"> |
howcome@7417 | 1796 | <p>In Latin scripts, the hyphen character (U+2010) is often used to |
howcome@7417 | 1797 | indicate that a word has been split. Normally, it will not be |
howcome@7417 | 1798 | necessary to set it explicitly. However, this can easily be done: |
howcome@7417 | 1799 | |
howcome@7417 | 1800 | <pre> |
howcome@7417 | 1801 | article { hyphenate-character: "\2010" } |
howcome@7417 | 1802 | </pre> |
howcome@7417 | 1803 | </div> |
howcome@7417 | 1804 | |
howcome@7417 | 1805 | |
howcome@7417 | 1806 | <h3>The 'hyphenate-last-line-avoid' property</h3> |
howcome@7417 | 1807 | |
howcome@7417 | 1808 | <table class=propdef> |
howcome@7417 | 1809 | <tr> |
howcome@7417 | 1810 | <td><em>Name:</em> |
howcome@7417 | 1811 | <td><dfn>hyphenate-last-line-avoid</dfn> |
howcome@7417 | 1812 | <tr> |
howcome@7417 | 1813 | <td><em>Value:</em> |
simon@7435 | 1814 | <td>auto | always | column | page | spread |
howcome@7417 | 1815 | <tr> |
howcome@7417 | 1816 | <td><em>Initial:</em> |
howcome@7417 | 1817 | <td>auto |
howcome@7417 | 1818 | <tr> |
howcome@7417 | 1819 | <td><em>Applies to:</em> |
howcome@7417 | 1820 | <td>block-level elements |
howcome@7417 | 1821 | <tr> |
howcome@7417 | 1822 | <td><em>Inherited:</em> |
howcome@7417 | 1823 | <td>yes |
howcome@7417 | 1824 | <tr> |
howcome@7417 | 1825 | <td><em>Percentages:</em> |
howcome@7417 | 1826 | <td>N/A |
howcome@7417 | 1827 | <tr> |
howcome@7417 | 1828 | <td><em>Media:</em> |
howcome@7417 | 1829 | <td>visual |
howcome@7417 | 1830 | <tr> |
howcome@7417 | 1831 | <td><em>Computed value:</em> |
howcome@7417 | 1832 | <td>specified value |
howcome@7417 | 1833 | </table> |
howcome@7417 | 1834 | |
howcome@7417 | 1835 | <p>This property indicates hyphenation behavior at the end of elements, column, pages and spreads. A spread is a set of two pages that are visible to the reader at the same time. Values are: |
howcome@7417 | 1836 | |
howcome@7417 | 1837 | <dl> |
howcome@7417 | 1838 | <dt>auto |
howcome@7417 | 1839 | |
howcome@7417 | 1840 | <dd>no restrictions imposed |
howcome@7417 | 1841 | |
howcome@7417 | 1842 | <dt>always |
howcome@7417 | 1843 | |
simon@7435 | 1844 | <dd>the last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated. |
howcome@7417 | 1845 | |
howcome@7417 | 1846 | <dt>column |
howcome@7417 | 1847 | |
howcome@7417 | 1848 | <dd>the last line before any column, page, or spread break inside the element should not be hyphenated |
howcome@7417 | 1849 | |
howcome@7417 | 1850 | <dt>page |
howcome@7417 | 1851 | |
howcome@7417 | 1852 | <dd>the last line before page or spread break inside the element should not be hyphenated |
howcome@7417 | 1853 | |
simon@7435 | 1854 | <dt>spread |
simon@7435 | 1855 | |
simon@7435 | 1856 | <dd>the last line before any spread break inside the element should not be hyphenated. |
howcome@7417 | 1857 | |
howcome@7417 | 1858 | </dl> |
howcome@7417 | 1859 | |
howcome@7417 | 1860 | <div class=example> |
howcome@7417 | 1861 | <pre> |
howcome@7417 | 1862 | p { hyphenate-last-line-avoid: always } |
howcome@7417 | 1863 | div.chapter { hyphenate-last-line-avoid: spread } |
howcome@7417 | 1864 | </div> |
howcome@7417 | 1865 | <div> |
howcome@7417 | 1866 | |
howcome@7417 | 1867 | <div class=example> |
howcome@7417 | 1868 | <p>A paragraph may be formatted like this when 'hyphenate: auto' is set: |
howcome@7417 | 1869 | |
howcome@7417 | 1870 | <pre> |
howcome@7417 | 1871 | This is just a |
howcome@7417 | 1872 | simple example |
howcome@7417 | 1873 | to show Antar- |
howcome@7417 | 1874 | ctica. |
howcome@7417 | 1875 | </pre> |
howcome@7417 | 1876 | |
howcome@7417 | 1877 | <p>With 'hyphenate-last-line-avoid: always' one would get: |
howcome@7417 | 1878 | |
howcome@7417 | 1879 | <pre> |
howcome@7417 | 1880 | This is just a |
howcome@7417 | 1881 | simple example |
simon@7435 | 1882 | to show |
howcome@7417 | 1883 | Antarctica. |
howcome@7417 | 1884 | <pre> |
howcome@7417 | 1885 | </div> |
howcome@7417 | 1886 | --> |
howcome@7417 | 1887 | <!-- |
howcome@7417 | 1888 | <h2>New counter styles</h2> |
howcome@7417 | 1889 | |
howcome@7417 | 1890 | |
howcome@7417 | 1891 | <h3>The ''super-decimal'' list-style-type</h3> |
howcome@7417 | 1892 | |
howcome@7417 | 1893 | <p class=issue>This section will be moved to css3-lists (<a href="http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html">minutes</a>) |
howcome@7417 | 1894 | |
howcome@7417 | 1895 | <p>A new list-style-type, ''super-decimal'', is introduced to better support |
howcome@7417 | 1896 | footnotes. Small, super-script footnote calls are common; the first |
howcome@7417 | 1897 | three numbers have code points in Latin-1 and some font families have |
howcome@7417 | 1898 | even more super-script glyphs. The ''super-decimal'' keyword allow |
howcome@7417 | 1899 | these font resources to be used and replaces the use of 'font-size' |
howcome@7417 | 1900 | and 'vertical-align' (which prohibit the use of special-purpose |
howcome@7417 | 1901 | glyphs). |
howcome@7417 | 1902 | |
howcome@7417 | 1903 | <div class="example"> |
howcome@7417 | 1904 | This example specifies that footnote markers should consist of |
howcome@7417 | 1905 | super-script decimal numbers. |
howcome@7417 | 1906 | |
howcome@7417 | 1907 | <pre> |
howcome@7417 | 1908 | ::footnote-marker { content: counter(footnote, super-decimal) } |
howcome@7417 | 1909 | </pre> |
howcome@7417 | 1910 | </div> |
howcome@7417 | 1911 | |
howcome@7417 | 1912 | <p>Using super-script glyphs is optional; UAs may also scale and position |
howcome@7417 | 1913 | other glyphs for use in footnote calls. |
howcome@7417 | 1914 | |
howcome@7417 | 1915 | --> |
howcome@7417 | 1916 | <!-- |
howcome@7417 | 1917 | <h3>Named counter styles</h3> |
howcome@7417 | 1918 | |
howcome@7417 | 1919 | <p>CSS defines a number of predefined list style types for the |
howcome@7417 | 1920 | 'list-style-type' property and other places where a list-style-type |
howcome@7417 | 1921 | value is accepted. Some styles repeat the same glyph (e.g., ''disc'' |
howcome@7417 | 1922 | and ''circle'') while others have lists of glyphs (e.g., ''decimal'', |
howcome@7417 | 1923 | and ''lower-roman''). To increase the range of lists that can be |
howcome@7417 | 1924 | achieved through CSS without adding many new keywords, |
howcome@7417 | 1925 | @counter-style rules are introduced. By using @counter-style, a style |
howcome@7417 | 1926 | sheet can name new counter styles. |
howcome@7417 | 1927 | |
howcome@7417 | 1928 | <p>An @counter-style rule consists of the keyword ''@counter-style'', |
howcome@7417 | 1929 | followed by the name of the symbol counter style, followed by a |
simon@7435 | 1930 | space-separated list of strings. |
howcome@7417 | 1931 | |
howcome@7417 | 1932 | <div class="example"> |
howcome@7417 | 1933 | |
howcome@7417 | 1934 | <pre> |
howcome@7417 | 1935 | @counter-style daggers "*" "\2020" "\2021" "\A7" "#"; |
howcome@7417 | 1936 | ol { list-style-type: daggers } |
howcome@7417 | 1937 | </pre> |
howcome@7417 | 1938 | |
howcome@7417 | 1939 | </div> |
howcome@7417 | 1940 | |
howcome@7417 | 1941 | <div class="example"> |
howcome@7417 | 1942 | |
howcome@7417 | 1943 | <pre> |
howcome@7417 | 1944 | @counter-style ordinal "1st" "2nd" "3rd" "4th"; |
howcome@7417 | 1945 | h1:before { content: counter(chapter, ordinal) " chapter" } |
howcome@7417 | 1946 | </pre> |
howcome@7417 | 1947 | |
howcome@7417 | 1948 | </div> |
howcome@7417 | 1949 | |
howcome@7417 | 1950 | <p>The first string in the list represents number one, the second |
howcome@7417 | 1951 | string represents number two, etc. Outside the range of specified values, the rendering |
howcome@7417 | 1952 | will be as if the ''decimal'' list style type had been specified. |
howcome@7417 | 1953 | |
howcome@7417 | 1954 | <div class="example"> |
howcome@7417 | 1955 | <p>Consider this example: |
howcome@7417 | 1956 | |
howcome@7417 | 1957 | <pre> |
howcome@7417 | 1958 | @counter-style ordinal "1st" "2nd" "3rd" "4th"; |
howcome@7417 | 1959 | ordered-list { counter-reset: items -1 } |
howcome@7417 | 1960 | list-item { counter-increment: items 2 } |
howcome@7417 | 1961 | </pre> |
howcome@7417 | 1962 | |
howcome@7417 | 1963 | <p>For a series of <tt>list-item</tt> elements inside an |
howcome@7417 | 1964 | <tt>ordered-list</tt> element, the value of the <tt>items</tt> counter |
howcome@7417 | 1965 | will be -1, 1, 3, 5, 7 etc. Given that the <tt>ordinal</tt> counter |
howcome@7417 | 1966 | style only defines a counter style for 1, 2, 3, and 4, the list will |
howcome@7417 | 1967 | be numbered "-1", "1st", "3rd", "5", "7" etc. |
howcome@7417 | 1968 | |
howcome@7417 | 1969 | </div> |
howcome@7417 | 1970 | |
howcome@7417 | 1971 | <p>Named counter styles can be imported through @import statements. |
howcome@7417 | 1972 | |
howcome@7417 | 1973 | <div class="example"> |
howcome@7417 | 1974 | <pre> |
howcome@7417 | 1975 | @import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */ |
howcome@7417 | 1976 | ol { list-style-type: armenian } |
howcome@7417 | 1977 | </pre> |
howcome@7417 | 1978 | </div> |
howcome@7417 | 1979 | --> |
howcome@7417 | 1980 | <!-- |
simon@7435 | 1981 | <div class="issue">Should we allow images in addition to strings? |
howcome@7417 | 1982 | <pre> |
howcome@7417 | 1983 | @counter-style graphic url("1.gif") url("2.gif") url("3.gif") |
howcome@7417 | 1984 | </pre> |
howcome@7417 | 1985 | </div> |
howcome@7417 | 1986 | --> |
howcome@7417 | 1987 | <!-- |
howcome@7417 | 1988 | <h3>The ''symbols()'' list-style-type</h3> |
howcome@7417 | 1989 | |
howcome@7417 | 1990 | <p>A new list-style-type with a functional notation is introduced to |
howcome@7417 | 1991 | avoid the indirection of having to name counter styles. The |
howcome@7417 | 1992 | ''symbols()'' value takes a comma-separated list of strings as |
howcome@7417 | 1993 | arguments. |
howcome@7417 | 1994 | |
howcome@7417 | 1995 | |
howcome@7417 | 1996 | <div class="example"> |
howcome@7417 | 1997 | <pre> |
howcome@7417 | 1998 | ::footnote-call { |
howcome@7417 | 1999 | content: counter(footnote, symbols('*', '+', '!')) |
howcome@7417 | 2000 | } |
howcome@7417 | 2001 | </pre> |
howcome@7417 | 2002 | </div> |
howcome@7417 | 2003 | |
howcome@7417 | 2004 | <p>Outside the range of specified values, the rendering will be as if |
howcome@7417 | 2005 | the ''decimal'' list style type had been specified. |
howcome@7417 | 2006 | |
howcome@7417 | 2007 | <div class="example"> |
howcome@7417 | 2008 | |
howcome@7417 | 2009 | This code: |
howcome@7417 | 2010 | |
howcome@7417 | 2011 | <pre> |
howcome@7417 | 2012 | ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") } |
howcome@7417 | 2013 | </pre> |
howcome@7417 | 2014 | |
howcome@7417 | 2015 | will result in these list-items markers: * † ‡ § # 6 7 8 ... |
howcome@7417 | 2016 | |
howcome@7417 | 2017 | </div> |
howcome@7417 | 2018 | --> |
howcome@7417 | 2019 | <!-- |
howcome@7417 | 2020 | <p class="issue">Should there be a way to indicate the behavior if there are more items than strings? Proposals include: "alphabetic", "enumerate", "numeric", "cycle", "ideographic". |
howcome@7417 | 2021 | --> |
howcome@7417 | 2022 | <!-- |
howcome@7417 | 2023 | <h2>Page counters</h2> |
howcome@7417 | 2024 | |
howcome@7417 | 2025 | <p>Printed publications often show page numbers to indicate the |
howcome@7417 | 2026 | sequence of papes. Also, it is common to show the total number of |
howcome@7417 | 2027 | pages in the document. For example, "page 3 of 5" may be shown at the |
howcome@7417 | 2028 | bottom of a page. |
howcome@7417 | 2029 | |
howcome@7417 | 2030 | <p>This specifiction describes two counters that can be used to |
howcome@7417 | 2031 | indicate page numbers: ''page'' and ''pages''. |
howcome@7417 | 2032 | |
howcome@7417 | 2033 | <h3>The ''page'' counter</h3> |
howcome@7417 | 2034 | |
howcome@7417 | 2035 | <p>The ''page'' counter is predefined to start with a value of zero, |
howcome@7417 | 2036 | and to be automatically incremented by one before every page. That is, |
howcome@7417 | 2037 | UAs must behave as if this code fragment is part of the default style |
howcome@7417 | 2038 | sheet: |
howcome@7417 | 2039 | |
howcome@7417 | 2040 | <pre> |
howcome@7417 | 2041 | @page { |
howcome@7417 | 2042 | counter-increment: page 1; |
howcome@7417 | 2043 | } |
howcome@7417 | 2044 | </pre> |
howcome@7417 | 2045 | |
howcome@7417 | 2046 | <p>The ''page'' counter can be reset and incremented in style sheets |
howcome@7417 | 2047 | just like other counters. On pages where the counter is incremented by |
howcome@7417 | 2048 | the style sheet in the page context, the automatic incrementation does |
howcome@7417 | 2049 | not take place. |
howcome@7417 | 2050 | |
howcome@7417 | 2051 | <div class="example"> |
howcome@7417 | 2052 | |
howcome@7417 | 2053 | <pre> |
howcome@7417 | 2054 | @page { |
howcome@7417 | 2055 | @bottom-center { |
howcome@7417 | 2056 | content: counter(page); |
howcome@7417 | 2057 | } |
howcome@7417 | 2058 | } |
howcome@7417 | 2059 | |
howcome@7417 | 2060 | @page introduction { |
howcome@7417 | 2061 | counter-reset: page; |
howcome@7417 | 2062 | } |
howcome@7417 | 2063 | |
howcome@7417 | 2064 | @page :right { |
howcome@7417 | 2065 | counter-increment: page 2; |
howcome@7417 | 2066 | } |
howcome@7417 | 2067 | </pre> |
howcome@7417 | 2068 | </div> |
howcome@7417 | 2069 | |
howcome@7417 | 2070 | |
howcome@7417 | 2071 | <h3>The ''pages'' counter</h3> |
howcome@7417 | 2072 | |
howcome@7417 | 2073 | <p>The ''pages'' counter is predefined to have the total number of |
howcome@7417 | 2074 | pages in the document. In order to find the value of this counter, the |
howcome@7417 | 2075 | UA will have to paginate the document. This counter is a constant and |
howcome@7417 | 2076 | it cannot be set or incremented by a style sheet. |
howcome@7417 | 2077 | |
howcome@7417 | 2078 | <div class=example> |
howcome@7417 | 2079 | <pre> |
howcome@7417 | 2080 | @page { |
howcome@7417 | 2081 | @bottom-center { |
howcome@7417 | 2082 | content: "Page " counter(page) " of " counter(pages) " pages in total"; |
howcome@7417 | 2083 | } |
howcome@7417 | 2084 | } |
howcome@7417 | 2085 | </pre> |
howcome@7417 | 2086 | </div> |
howcome@7417 | 2087 | |
howcome@7417 | 2088 | <p>UAs that are not able to paginate the document should display a |
howcome@7417 | 2089 | question mark or another symbol that indicates uncertainty. |
howcome@7417 | 2090 | |
howcome@7417 | 2091 | <div class=example> |
howcome@7417 | 2092 | |
howcome@7417 | 2093 | <p>This code has no effect on the ''pages'' counter which cannot be |
howcome@7417 | 2094 | changed by the style sheet. However, the the ''page'' counter reset normally. |
howcome@7417 | 2095 | |
howcome@7417 | 2096 | <pre> |
howcome@7417 | 2097 | @page :right { |
howcome@7417 | 2098 | counter-reset: pages page; |
howcome@7417 | 2099 | } |
howcome@7417 | 2100 | </pre> |
howcome@7417 | 2101 | </div> |
howcome@7417 | 2102 | |
howcome@7417 | 2103 | --> |
howcome@7417 | 2104 | <!-- |
howcome@7417 | 2105 | |
howcome@7417 | 2106 | <h2>Image resolution</h2> |
howcome@7417 | 2107 | |
howcome@7417 | 2108 | <p>Image resolution, as the term is used in this document, means |
howcome@7417 | 2109 | pixels per physical length, e.g., pixels per inch. Some image formats |
howcome@7417 | 2110 | can record information about the resolution of images. This |
howcome@7417 | 2111 | information can be helpful when determining the actual size of the |
howcome@7417 | 2112 | image in the formatting process. However, the information can also be |
howcome@7417 | 2113 | wrong, in which case it should be ignored. The 'image-resolution' and |
howcome@7417 | 2114 | 'background-image-resolution' properties are introduced to determine |
howcome@7417 | 2115 | the correct resolution of images. |
howcome@7417 | 2116 | |
howcome@7417 | 2117 | <table class=propdef> |
howcome@7417 | 2118 | <tr> |
howcome@7417 | 2119 | <td><em>Name:</em> |
howcome@7417 | 2120 | <td><dfn>image-resolution</dfn> |
howcome@7417 | 2121 | <tr> |
howcome@7417 | 2122 | <td><em>Value:</em> |
howcome@7417 | 2123 | <td>normal | [ from-image || <dpi> ] |
howcome@7417 | 2124 | <tr> |
howcome@7417 | 2125 | <td><em>Initial:</em> |
howcome@7417 | 2126 | <td>normal |
howcome@7417 | 2127 | <tr> |
howcome@7417 | 2128 | <td><em>Applies to:</em> |
howcome@7417 | 2129 | <td>replaced elements <span class=issue>and background images?</span> |
howcome@7417 | 2130 | <tr> |
howcome@7417 | 2131 | <td><em>Inherited:</em> |
howcome@7417 | 2132 | <td>yes |
howcome@7417 | 2133 | <tr> |
howcome@7417 | 2134 | <td><em>Percentages:</em> |
howcome@7417 | 2135 | <td>N/A |
howcome@7417 | 2136 | <tr> |
howcome@7417 | 2137 | <td><em>Media:</em> |
howcome@7417 | 2138 | <td>visual |
howcome@7417 | 2139 | <tr> |
howcome@7417 | 2140 | <td><em>Computed value:</em> |
howcome@7417 | 2141 | <td>as specified value <span class=issue>(or, should it be only one value?)</span> |
howcome@7417 | 2142 | </table> |
howcome@7417 | 2143 | |
howcome@7417 | 2144 | <p>The values are: |
howcome@7417 | 2145 | |
howcome@7417 | 2146 | <dl> |
howcome@7417 | 2147 | <dt>normal |
howcome@7417 | 2148 | |
howcome@7417 | 2149 | <dd>The resolution of the image is unknown, and UAs should not use the |
howcome@7417 | 2150 | resolution found in the image. Instead, the image resolution will be |
simon@7435 | 2151 | found by converting the dimension of the image into CSS pixels. |
howcome@7417 | 2152 | |
howcome@7417 | 2153 | <dt>from-image |
howcome@7417 | 2154 | |
howcome@7417 | 2155 | <dd>The UA must look for the resolution in the image itself. If the image does not have a resolution, the specified <dpi> value is used. If no <dpi> value is specified, the behavior is as if ''normal'' had been specified. |
howcome@7417 | 2156 | |
howcome@7417 | 2157 | <dt><dpi> |
howcome@7417 | 2158 | |
howcome@7417 | 2159 | <dd>The value consists of a number with a 'dpi' unit identifier. The <dpi> value sets the resolution of the image. In combination with ''from-image'', the specified dpi is only used if the image does not have a resolution. |
howcome@7417 | 2160 | |
howcome@7417 | 2161 | </dl> |
howcome@7417 | 2162 | |
howcome@7417 | 2163 | <div class="example"> |
howcome@7417 | 2164 | <p>This rule specifies that the UA should use the image resolution found in the image itself. |
howcome@7417 | 2165 | <pre> |
howcome@7417 | 2166 | img { image-resolution: from-image } |
howcome@7417 | 2167 | </pre> |
howcome@7417 | 2168 | </div> |
howcome@7417 | 2169 | |
howcome@7417 | 2170 | |
howcome@7417 | 2171 | <div class="example"> |
simon@7435 | 2172 | <p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. |
howcome@7417 | 2173 | <pre> |
howcome@7417 | 2174 | img { image-resolution: 300dpi } |
howcome@7417 | 2175 | </pre> |
howcome@7417 | 2176 | </div> |
howcome@7417 | 2177 | |
howcome@7417 | 2178 | |
howcome@7417 | 2179 | <div class="example"> |
howcome@7417 | 2180 | <p>These rules both specify that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi. |
howcome@7417 | 2181 | <pre> |
howcome@7417 | 2182 | img { image-resolution: from-image 300dpi } |
howcome@7417 | 2183 | img { image-resolution: 300dpi from-image } |
howcome@7417 | 2184 | </pre> |
howcome@7417 | 2185 | </div> |
howcome@7417 | 2186 | |
howcome@7417 | 2187 | |
howcome@7417 | 2188 | --> |
howcome@7417 | 2189 | <!-- |
howcome@7417 | 2190 | |
howcome@7417 | 2191 | <table class=propdef> |
howcome@7417 | 2192 | <tr> |
howcome@7417 | 2193 | <td><em>Name:</em> |
howcome@7417 | 2194 | <td><dfn>image-resolution</dfn> |
howcome@7417 | 2195 | <tr> |
howcome@7417 | 2196 | <td><em>Value:</em> |
howcome@7417 | 2197 | <td>normal | auto | <dpi> [ , normal | <dpi> ]? |
howcome@7417 | 2198 | <tr> |
howcome@7417 | 2199 | <td><em>Initial:</em> |
howcome@7417 | 2200 | <td>normal |
howcome@7417 | 2201 | <tr> |
howcome@7417 | 2202 | <td><em>Applies to:</em> |
howcome@7417 | 2203 | <td>replaced elements |
howcome@7417 | 2204 | <tr> |
howcome@7417 | 2205 | <td><em>Inherited:</em> |
howcome@7417 | 2206 | <td>yes |
howcome@7417 | 2207 | <tr> |
howcome@7417 | 2208 | <td><em>Percentages:</em> |
howcome@7417 | 2209 | <td>N/A |
howcome@7417 | 2210 | <tr> |
howcome@7417 | 2211 | <td><em>Media:</em> |
howcome@7417 | 2212 | <td>visual |
howcome@7417 | 2213 | <tr> |
howcome@7417 | 2214 | <td><em>Computed value:</em> |
howcome@7417 | 2215 | <td>as specified value <span class=issue>(or, should it be only one value?)</span> |
howcome@7417 | 2216 | </table> |
howcome@7417 | 2217 | |
howcome@7417 | 2218 | <p>This property accepts either a single value, or a comma-separated |
howcome@7417 | 2219 | list of two values. The values are: |
howcome@7417 | 2220 | |
howcome@7417 | 2221 | <dl> |
howcome@7417 | 2222 | <dt>normal |
howcome@7417 | 2223 | |
howcome@7417 | 2224 | <dd>The resolution of the image is unknown, and UAs should not use the |
howcome@7417 | 2225 | resolution found in the image. Instead, the image resolution will be |
howcome@7417 | 2226 | found by making image pixels equivalent to CSS pixels. |
howcome@7417 | 2227 | |
howcome@7417 | 2228 | <dt>auto |
howcome@7417 | 2229 | |
simon@7435 | 2230 | <dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated. |
howcome@7417 | 2231 | |
howcome@7417 | 2232 | <dt><dpi> |
howcome@7417 | 2233 | |
howcome@7417 | 2234 | <dd>The value consists of a number with a 'dpi' unit identifier. The |
howcome@7417 | 2235 | UA should use the specified resolution. |
howcome@7417 | 2236 | |
howcome@7417 | 2237 | </dl> |
howcome@7417 | 2238 | |
howcome@7417 | 2239 | <p>If, after evaluating the specified values, no image resolution has been determined, the UA should behave as if ''normal'' had been specified. |
howcome@7417 | 2240 | |
howcome@7417 | 2241 | <div class="example"> |
howcome@7417 | 2242 | <p>This rule specifies that the UA should use the image resolution found in the image itself. |
howcome@7417 | 2243 | <pre> |
howcome@7417 | 2244 | img { image-resolution: auto } |
howcome@7417 | 2245 | </pre> |
howcome@7417 | 2246 | </div> |
howcome@7417 | 2247 | |
howcome@7417 | 2248 | <div class="example"> |
howcome@7417 | 2249 | <p>This rule specifies that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi. |
howcome@7417 | 2250 | <pre> |
howcome@7417 | 2251 | img { image-resolution: auto, 300dpi } |
howcome@7417 | 2252 | </pre> |
howcome@7417 | 2253 | </div> |
howcome@7417 | 2254 | |
howcome@7417 | 2255 | <div class="example"> |
simon@7435 | 2256 | <p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. |
howcome@7417 | 2257 | <pre> |
howcome@7417 | 2258 | img { image-resolution: 300dpi } |
howcome@7417 | 2259 | </pre> |
howcome@7417 | 2260 | </div> |
howcome@7417 | 2261 | |
howcome@7417 | 2262 | |
howcome@7417 | 2263 | --> |
howcome@7417 | 2264 | <!-- |
howcome@7417 | 2265 | |
howcome@7417 | 2266 | <div class="issue"> |
simon@7435 | 2267 | <p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g., |
howcome@7417 | 2268 | <pre> |
howcome@7417 | 2269 | background-image: url(image.png, width, height, resolution); |
howcome@7417 | 2270 | background-image: image-url(image.png, width, height, resolution); |
howcome@7417 | 2271 | background-image: image(url(image.png), width, height, resolution); |
howcome@7417 | 2272 | </pre> |
howcome@7417 | 2273 | </div> |
howcome@7417 | 2274 | --> |
howcome@7417 | 2275 | <!-- |
howcome@7417 | 2276 | <table class=propdef> |
howcome@7417 | 2277 | <tr> |
howcome@7417 | 2278 | <td><em>Name:</em> |
howcome@7417 | 2279 | <td><dfn>background-image-resolution</dfn> |
howcome@7417 | 2280 | <tr> |
howcome@7417 | 2281 | <td><em>Value:</em> |
howcome@7417 | 2282 | <td>normal | auto | <dpi> [ , normal | <dpi> ]? |
howcome@7417 | 2283 | <tr> |
howcome@7417 | 2284 | <td><em>Initial:</em> |
howcome@7417 | 2285 | <td>normal |
howcome@7417 | 2286 | <tr> |
howcome@7417 | 2287 | <td><em>Applies to:</em> |
howcome@7417 | 2288 | <td>replaced elements |
howcome@7417 | 2289 | <tr> |
howcome@7417 | 2290 | <td><em>Inherited:</em> |
howcome@7417 | 2291 | <td>yes |
howcome@7417 | 2292 | <tr> |
howcome@7417 | 2293 | <td><em>Percentages:</em> |
howcome@7417 | 2294 | <td>N/A |
howcome@7417 | 2295 | <tr> |
howcome@7417 | 2296 | <td><em>Media:</em> |
howcome@7417 | 2297 | <td>visual |
howcome@7417 | 2298 | <tr> |
howcome@7417 | 2299 | <td><em>Computed value:</em> |
howcome@7417 | 2300 | <td>as specified value <span class=issue>(or, should it be only one value?)</span> |
howcome@7417 | 2301 | </table> |
howcome@7417 | 2302 | |
howcome@7417 | 2303 | <p class=issue>Introducing one new property in all places where an image can be loaded may not be a scalable solution. Therefore this property is at risk. |
howcome@7417 | 2304 | |
simon@7435 | 2305 | <p>As 'image-resolution', except that it describes the resolution of the element's background image. |
howcome@7417 | 2306 | |
howcome@7417 | 2307 | --> |
howcome@7417 | 2308 | |
howcome@7417 | 2309 | <h2 id=page-marks-and-bleed-area><span class=secno>6. </span>Page marks and |
howcome@7417 | 2310 | bleed area</h2> |
howcome@7417 | 2311 | |
howcome@7417 | 2312 | <p>The ‘<a href="#marks"><code class=property>marks</code></a>’ |
howcome@7417 | 2313 | property from <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> is |
howcome@7417 | 2314 | part of this specification. <!-- |
howcome@7417 | 2315 | http://www.w3.org/TR/2008/REC-CSS2-20080411/page.html#propdef-marks |
howcome@7417 | 2316 | --> |
howcome@7417 | 2317 | |
howcome@7417 | 2318 | <table class=propdef> |
howcome@7417 | 2319 | <tbody> |
howcome@7417 | 2320 | <tr> |
howcome@7417 | 2321 | <td><em>Name:</em> |
howcome@7417 | 2322 | |
howcome@7417 | 2323 | <td><dfn id=marks>marks</dfn> |
howcome@7417 | 2324 | |
howcome@7417 | 2325 | <tr> |
howcome@7417 | 2326 | <td><em>Value:</em> |
howcome@7417 | 2327 | |
howcome@7417 | 2328 | <td>[ crop || cross ] | none |
howcome@7417 | 2329 | |
howcome@7417 | 2330 | <tr> |
howcome@7417 | 2331 | <td><em>Initial:</em> |
howcome@7417 | 2332 | |
howcome@7417 | 2333 | <td>none |
howcome@7417 | 2334 | |
howcome@7417 | 2335 | <tr> |
howcome@7417 | 2336 | <td><em>Applies to:</em> |
howcome@7417 | 2337 | |
howcome@7417 | 2338 | <td>page context |
howcome@7417 | 2339 | |
howcome@7417 | 2340 | <tr> |
howcome@7417 | 2341 | <td><em>Inherited:</em> |
howcome@7417 | 2342 | |
howcome@7417 | 2343 | <td>no |
howcome@7417 | 2344 | |
howcome@7417 | 2345 | <tr> |
howcome@7417 | 2346 | <td><em>Percentages:</em> |
howcome@7417 | 2347 | |
howcome@7417 | 2348 | <td>N/A |
howcome@7417 | 2349 | |
howcome@7417 | 2350 | <tr> |
howcome@7417 | 2351 | <td><em>Media:</em> |
howcome@7417 | 2352 | |
howcome@7417 | 2353 | <td>visual, paged |
howcome@7417 | 2354 | |
howcome@7417 | 2355 | <tr> |
howcome@7417 | 2356 | <td><em>Computed value:</em> |
howcome@7417 | 2357 | |
howcome@7417 | 2358 | <td>specified value |
howcome@7417 | 2359 | </table> |
howcome@7417 | 2360 | |
howcome@7417 | 2361 | <p>This property adds crop and/or cross marks to the document. Crop marks |
howcome@7417 | 2362 | indicate where the page should be cut. Cross marks are used to align |
howcome@7417 | 2363 | sheets. |
howcome@7417 | 2364 | |
howcome@7417 | 2365 | <p>Crop marks and cross marks are printed outside the page box. To have |
howcome@7417 | 2366 | room to show crop and cross marks, the final pages will have to be |
howcome@7417 | 2367 | somewhat bigger than the page box. |
howcome@7417 | 2368 | |
howcome@7417 | 2369 | <div class=example> |
howcome@7417 | 2370 | <p>To set crop and cross marks on a document, this code can be used: |
howcome@7417 | 2371 | |
howcome@7417 | 2372 | <pre> |
howcome@7417 | 2373 | @page { marks: crop cross } |
howcome@7417 | 2374 | </pre> |
howcome@7417 | 2375 | </div> |
howcome@7417 | 2376 | |
howcome@7417 | 2377 | <table class=propdef> |
howcome@7417 | 2378 | <tbody> |
howcome@7417 | 2379 | <tr> |
howcome@7417 | 2380 | <td><em>Name:</em> |
howcome@7417 | 2381 | |
howcome@7417 | 2382 | <td><dfn id=bleed>bleed</dfn> |
howcome@7417 | 2383 | |
howcome@7417 | 2384 | <tr> |
howcome@7417 | 2385 | <td><em>Value:</em> |
howcome@7417 | 2386 | |
howcome@7417 | 2387 | <td><length> |
howcome@7417 | 2388 | |
howcome@7417 | 2389 | <tr> |
howcome@7417 | 2390 | <td><em>Initial:</em> |
howcome@7417 | 2391 | |
howcome@7417 | 2392 | <td>6pt |
howcome@7417 | 2393 | |
howcome@7417 | 2394 | <tr> |
howcome@7417 | 2395 | <td><em>Applies to:</em> |
howcome@7417 | 2396 | |
howcome@7417 | 2397 | <td>page context |
howcome@7417 | 2398 | |
howcome@7417 | 2399 | <tr> |
howcome@7417 | 2400 | <td><em>Inherited:</em> |
howcome@7417 | 2401 | |
howcome@7417 | 2402 | <td>no |
howcome@7417 | 2403 | |
howcome@7417 | 2404 | <tr> |
howcome@7417 | 2405 | <td><em>Percentages:</em> |
howcome@7417 | 2406 | |
howcome@7417 | 2407 | <td>refer to width of page box |
howcome@7417 | 2408 | |
howcome@7417 | 2409 | <tr> |
howcome@7417 | 2410 | <td><em>Media:</em> |
howcome@7417 | 2411 | |
howcome@7417 | 2412 | <td>visual |
howcome@7417 | 2413 | |
howcome@7417 | 2414 | <tr> |
howcome@7417 | 2415 | <td><em>Computed value:</em> |
howcome@7417 | 2416 | |
howcome@7417 | 2417 | <td>as specified value |
howcome@7417 | 2418 | </table> |
howcome@7417 | 2419 | |
howcome@7417 | 2420 | <p>This property specifies the extent of the page bleed area outside the |
howcome@7417 | 2421 | page box. This property only has effect if crop marks are enabled. |
howcome@7417 | 2422 | |
howcome@7417 | 2423 | <h2 id=bookmarks><span class=secno>7. </span>Bookmarks</h2> |
howcome@7417 | 2424 | |
howcome@7417 | 2425 | <p>Some document formats have the capability of holding bookmarks. |
howcome@7417 | 2426 | Bookmarks are typically shown outside the document itself, often in a |
howcome@7417 | 2427 | tree-structured and clickable table of contents. To generate bookmarks, |
howcome@7417 | 2428 | these properties are defined: ‘<a href="#bookmark-level0"><code |
howcome@7417 | 2429 | class=property>bookmark-level</code></a>’, ‘<a |
howcome@7417 | 2430 | href="#bookmark-label0"><code class=property>bookmark-label</code></a>’, |
howcome@7417 | 2431 | and ‘<a href="#bookmark-state0"><code |
howcome@7417 | 2432 | class=property>bookmark-state</code></a>’. |
howcome@7417 | 2433 | |
howcome@7417 | 2434 | <h3 id=bookmark-level><span class=secno>7.1. </span>‘<a |
howcome@7417 | 2435 | href="#bookmark-level0"><code class=property>bookmark-level</code></a>’</h3> |
howcome@7417 | 2436 | |
howcome@7417 | 2437 | <table class=propdef> |
howcome@7417 | 2438 | <tbody> |
howcome@7417 | 2439 | <tr> |
howcome@7417 | 2440 | <td><em>Name:</em> |
howcome@7417 | 2441 | |
howcome@7417 | 2442 | <td><dfn id=bookmark-level0>bookmark-level</dfn> |
howcome@7417 | 2443 | |
howcome@7417 | 2444 | <tr> |
howcome@7417 | 2445 | <td><em>Value:</em> |
howcome@7417 | 2446 | |
howcome@7417 | 2447 | <td>none | <integer> |
howcome@7417 | 2448 | |
howcome@7417 | 2449 | <tr> |
howcome@7417 | 2450 | <td><em>Initial:</em> |
howcome@7417 | 2451 | |
howcome@7417 | 2452 | <td>none |
howcome@7417 | 2453 | |
howcome@7417 | 2454 | <tr> |
howcome@7417 | 2455 | <td><em>Applies to:</em> |
howcome@7417 | 2456 | |
howcome@7417 | 2457 | <td>all elements |
howcome@7417 | 2458 | |
howcome@7417 | 2459 | <tr> |
howcome@7417 | 2460 | <td><em>Inherited:</em> |
howcome@7417 | 2461 | |
howcome@7417 | 2462 | <td>no |
howcome@7417 | 2463 | |
howcome@7417 | 2464 | <tr> |
howcome@7417 | 2465 | <td><em>Percentages:</em> |
howcome@7417 | 2466 | |
howcome@7417 | 2467 | <td>N/A |
howcome@7417 | 2468 | |
howcome@7417 | 2469 | <tr> |
howcome@7417 | 2470 | <td><em>Media:</em> |
howcome@7417 | 2471 | |
howcome@7417 | 2472 | <td>all |
howcome@7417 | 2473 | |
howcome@7417 | 2474 | <tr> |
howcome@7417 | 2475 | <td><em>Computed value:</em> |
howcome@7417 | 2476 | |
howcome@7417 | 2477 | <td>specified value |
howcome@7417 | 2478 | </table> |
howcome@7417 | 2479 | |
howcome@7417 | 2480 | <p>This property describes what level a certain bookmark has in a |
howcome@7417 | 2481 | hierarchical bookmark structure. The values are: |
howcome@7417 | 2482 | |
howcome@7417 | 2483 | <dl> |
howcome@7417 | 2484 | <dt>none |
howcome@7417 | 2485 | |
howcome@7417 | 2486 | <dd>no bookmark is generated |
howcome@7417 | 2487 | |
howcome@7417 | 2488 | <dt><integer> |
howcome@7417 | 2489 | |
howcome@7417 | 2490 | <dd>Indicates the level of the bookmark; the highest level is ‘<code |
howcome@7417 | 2491 | class=css>1</code>’, then ‘<code class=css>2</code>’, ‘<code |
howcome@7417 | 2492 | class=css>3</code>’ etc. A bookmark will be generated only if ‘<a |
howcome@7417 | 2493 | href="#bookmark-label0"><code class=property>bookmark-label</code></a>’ |
howcome@7417 | 2494 | also has a value different from ‘<code class=property>none</code>’. |
howcome@7417 | 2495 | </dl> |
howcome@7417 | 2496 | |
howcome@7417 | 2497 | <div class=example> |
howcome@7417 | 2498 | <pre> |
howcome@7417 | 2499 | h1 { bookmark-level: 1 } |
howcome@7417 | 2500 | h2 { bookmark-level: 2 } |
howcome@7417 | 2501 | h3 { bookmark-level: 3 } |
howcome@7417 | 2502 | </pre> |
howcome@7417 | 2503 | </div> |
howcome@7417 | 2504 | |
howcome@7417 | 2505 | <h3 id=bookmark-label><span class=secno>7.2. </span>‘<a |
howcome@7417 | 2506 | href="#bookmark-label0"><code class=property>bookmark-label</code></a>’</h3> |
howcome@7417 | 2507 | |
howcome@7417 | 2508 | <table class=propdef> |
howcome@7417 | 2509 | <tbody> |
howcome@7417 | 2510 | <tr> |
howcome@7417 | 2511 | <td><em>Name:</em> |
howcome@7417 | 2512 | |
howcome@7417 | 2513 | <td><dfn id=bookmark-label0>bookmark-label</dfn> |
howcome@7417 | 2514 | |
howcome@7417 | 2515 | <tr> |
howcome@7417 | 2516 | <td><em>Value:</em> |
howcome@7417 | 2517 | |
howcome@7417 | 2518 | <td><content-list> | none |
howcome@7417 | 2519 | |
howcome@7417 | 2520 | <tr> |
howcome@7417 | 2521 | <td><em>Initial:</em> |
howcome@7417 | 2522 | |
howcome@7417 | 2523 | <td>none |
howcome@7417 | 2524 | |
howcome@7417 | 2525 | <tr> |
howcome@7417 | 2526 | <td><em>Applies to:</em> |
howcome@7417 | 2527 | |
howcome@7417 | 2528 | <td>all elements |
howcome@7417 | 2529 | |
howcome@7417 | 2530 | <tr> |
howcome@7417 | 2531 | <td><em>Inherited:</em> |
howcome@7417 | 2532 | |
howcome@7417 | 2533 | <td>no |
howcome@7417 | 2534 | |
howcome@7417 | 2535 | <tr> |
howcome@7417 | 2536 | <td><em>Percentages:</em> |
howcome@7417 | 2537 | |
howcome@7417 | 2538 | <td>N/A |
howcome@7417 | 2539 | |
howcome@7417 | 2540 | <tr> |
howcome@7417 | 2541 | <td><em>Media:</em> |
howcome@7417 | 2542 | |
howcome@7417 | 2543 | <td>all |
howcome@7417 | 2544 | |
howcome@7417 | 2545 | <tr> |
howcome@7417 | 2546 | <td><em>Computed value:</em> |
howcome@7417 | 2547 | |
howcome@7417 | 2548 | <td>specified value |
howcome@7417 | 2549 | </table> |
howcome@7417 | 2550 | |
howcome@7417 | 2551 | <p>This property specifies the label of the bookmark, i.e., the text that |
howcome@7417 | 2552 | will represent the bookmark in the bookmark structure. The values are: |
howcome@7417 | 2553 | |
howcome@7417 | 2554 | <dl> |
howcome@7417 | 2555 | <dt><content-list>, as defined on the ‘<a href="#string-set"><code |
howcome@7417 | 2556 | class=property>string-set</code></a>’ property. A bookmark will be |
howcome@7417 | 2557 | generated only if ‘<a href="#bookmark-level0"><code |
howcome@7417 | 2558 | class=property>bookmark-level</code></a>’ also has a value different |
howcome@7417 | 2559 | from ‘<code class=property>none</code>’. |
howcome@7417 | 2560 | |
howcome@7417 | 2561 | <dt>none |
howcome@7417 | 2562 | |
howcome@7417 | 2563 | <dd>no bookmark is generated |
howcome@7417 | 2564 | </dl> |
howcome@7417 | 2565 | |
howcome@7417 | 2566 | <div class=example> |
howcome@7417 | 2567 | <pre> |
howcome@7417 | 2568 | a { bookmark-label: attr(title) } |
howcome@7417 | 2569 | h1 { bookmark-label: contents } |
howcome@7417 | 2570 | h2 { bookmark-label: content-before } |
howcome@7417 | 2571 | h2 { bookmark-label: content-before ": " contents } |
howcome@7417 | 2572 | #frog { bookmark-label: "The green frog" } |
howcome@7417 | 2573 | </pre> |
howcome@7417 | 2574 | </div> |
howcome@7417 | 2575 | <!-- |
howcome@7417 | 2576 | |
howcome@7417 | 2577 | <table class=propdef> |
howcome@7417 | 2578 | <tr> |
howcome@7417 | 2579 | <td><em>Name:</em> |
howcome@7417 | 2580 | <td><dfn>bookmark-target</dfn> |
howcome@7417 | 2581 | <tr> |
howcome@7417 | 2582 | <td><em>Value:</em> |
simon@7435 | 2583 | <td>none | <uri> |
howcome@7417 | 2584 | <tr> |
howcome@7417 | 2585 | <td><em>Initial:</em> |
howcome@7417 | 2586 | <td>none |
howcome@7417 | 2587 | <tr> |
howcome@7417 | 2588 | <td><em>Applies to:</em> |
howcome@7417 | 2589 | <td>all elements |
howcome@7417 | 2590 | <tr> |
howcome@7417 | 2591 | <td><em>Inherited:</em> |
howcome@7417 | 2592 | <td>no |
howcome@7417 | 2593 | <tr> |
howcome@7417 | 2594 | <td><em>Percentages:</em> |
howcome@7417 | 2595 | <td>N/A |
howcome@7417 | 2596 | <tr> |
howcome@7417 | 2597 | <td><em>Media:</em> |
howcome@7417 | 2598 | <td>all |
howcome@7417 | 2599 | <tr> |
howcome@7417 | 2600 | <td><em>Computed value:</em> |
howcome@7417 | 2601 | <td>For URI values, the absolute URI; for 'none', as specified. |
howcome@7417 | 2602 | </table> |
howcome@7417 | 2603 | |
simon@7435 | 2604 | <p>This property specifies the target of the bookmark link. |
howcome@7417 | 2605 | |
howcome@7417 | 2606 | <div class=example> |
howcome@7417 | 2607 | <pre> |
howcome@7417 | 2608 | .bookmark { |
howcome@7417 | 2609 | bookmark-label: attr(title); |
howcome@7417 | 2610 | bookmark-target: attr(href url); |
howcome@7417 | 2611 | } |
howcome@7417 | 2612 | ... |
howcome@7417 | 2613 | <a class="bookmark" title="The green pear" href="#pears"/> |
howcome@7417 | 2614 | </pre> |
howcome@7417 | 2615 | </div> |
howcome@7417 | 2616 | |
howcome@7417 | 2617 | <div class=example> |
howcome@7417 | 2618 | .example { bookmark-target: url(http://www.example.com) } |
howcome@7417 | 2619 | </div> |
howcome@7417 | 2620 | |
howcome@7417 | 2621 | --> |
howcome@7417 | 2622 | |
howcome@7417 | 2623 | <h3 id=bookmark-state><span class=secno>7.3. </span>‘<a |
howcome@7417 | 2624 | href="#bookmark-state0"><code class=property>bookmark-state</code></a>’</h3> |
howcome@7417 | 2625 | |
howcome@7417 | 2626 | <table class=propdef> |
howcome@7417 | 2627 | <tbody> |
howcome@7417 | 2628 | <tr> |
howcome@7417 | 2629 | <td><em>Name:</em> |
howcome@7417 | 2630 | |
howcome@7417 | 2631 | <td><dfn id=bookmark-state0>bookmark-state</dfn> |
howcome@7417 | 2632 | |
howcome@7417 | 2633 | <tr> |
howcome@7417 | 2634 | <td><em>Value:</em> |
howcome@7417 | 2635 | |
howcome@7417 | 2636 | <td>open | closed |
howcome@7417 | 2637 | |
howcome@7417 | 2638 | <tr> |
howcome@7417 | 2639 | <td><em>Initial:</em> |
howcome@7417 | 2640 | |
howcome@7417 | 2641 | <td>open |
howcome@7417 | 2642 | |
howcome@7417 | 2643 | <tr> |
howcome@7417 | 2644 | <td><em>Applies to:</em> |
howcome@7417 | 2645 | |
howcome@7417 | 2646 | <td>block-level elements |
howcome@7417 | 2647 | |
howcome@7417 | 2648 | <tr> |
howcome@7417 | 2649 | <td><em>Inherited:</em> |
howcome@7417 | 2650 | |
howcome@7417 | 2651 | <td>no |
howcome@7417 | 2652 | |
howcome@7417 | 2653 | <tr> |
howcome@7417 | 2654 | <td><em>Percentages:</em> |
howcome@7417 | 2655 | |
howcome@7417 | 2656 | <td>N/A |
howcome@7417 | 2657 | |
howcome@7417 | 2658 | <tr> |
howcome@7417 | 2659 | <td><em>Media:</em> |
howcome@7417 | 2660 | |
howcome@7417 | 2661 | <td>all |
howcome@7417 | 2662 | |
howcome@7417 | 2663 | <tr> |
howcome@7417 | 2664 | <td><em>Computed value:</em> |
howcome@7417 | 2665 | |
howcome@7417 | 2666 | <td>specified value |
howcome@7417 | 2667 | </table> |
howcome@7417 | 2668 | |
howcome@7417 | 2669 | <p>This property describes the initial state of a bookmark. |
howcome@7417 | 2670 | |
howcome@7417 | 2671 | <div> |
howcome@7417 | 2672 | <pre> |
howcome@7417 | 2673 | * { bookmark-state: closed } |
howcome@7417 | 2674 | #open { bookmark-state: open } |
howcome@7417 | 2675 | </pre> |
howcome@7417 | 2676 | </div> |
howcome@7417 | 2677 | |
howcome@7417 | 2678 | <h2 id=cmyk-colors><span class=secno>8. </span>CMYK colors</h2> |
howcome@7417 | 2679 | |
howcome@7417 | 2680 | <p>Printers do not use RGB colors, they (often) use CMYK: cyan, magenta, |
howcome@7417 | 2681 | yellow and black. The ‘<code class=css>device-cmyk()</code>’ |
howcome@7417 | 2682 | functional value allows style sheets to express device-dependent CMYK |
howcome@7417 | 2683 | colors. |
howcome@7417 | 2684 | |
howcome@7417 | 2685 | <div class=example> |
howcome@7417 | 2686 | <pre> |
howcome@7417 | 2687 | h3 { color: device-cmyk(0.8, 0.5, 0.0, 0.3) } |
howcome@7417 | 2688 | </pre> |
howcome@7417 | 2689 | </div> |
howcome@7417 | 2690 | |
howcome@7417 | 2691 | <p>The values representing the colors are between ‘<code |
howcome@7417 | 2692 | class=css>0</code>’ and ‘<code class=css>1</code>’. Values outside |
howcome@7417 | 2693 | this range are clipped. |
howcome@7417 | 2694 | |
howcome@7417 | 2695 | <p>It is not expected that screen-centric user agents support CMYK colors |
howcome@7417 | 2696 | and it is therefore important that existing CSS color values can be |
howcome@7417 | 2697 | combined with CMYK colors. |
howcome@7417 | 2698 | |
howcome@7417 | 2699 | <div class=example> |
howcome@7417 | 2700 | <pre> |
howcome@7417 | 2701 | h3 { |
howcome@7417 | 2702 | color: red; |
howcome@7417 | 2703 | color: device-cmyk(0.5, 0.1, 0.0, 0.2); |
howcome@7417 | 2704 | } |
howcome@7417 | 2705 | </pre> |
howcome@7417 | 2706 | |
howcome@7417 | 2707 | <p>User Agents that do not understand the <code>device-cmyk()</code> |
howcome@7417 | 2708 | value, will use the first color (red). User agents that understand |
howcome@7417 | 2709 | <code>device-cmyk()</code> will use the second color (which is bluish). |
howcome@7417 | 2710 | </div> |
howcome@7417 | 2711 | |
howcome@7417 | 2712 | <h2 id=styling-blank-pages><span class=secno>9. </span>Styling blank pages</h2> |
howcome@7417 | 2713 | |
simon@7435 | 2714 | <div class=note> |
simon@7435 | 2715 | <p> This section has been moved to <a href="#CSS3PAGE" |
simon@7435 | 2716 | rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>. |
howcome@7417 | 2717 | </div> |
howcome@7417 | 2718 | |
howcome@7417 | 2719 | <h2 id=paged-presentations><span class=secno>10. </span>Paged presentations</h2> |
howcome@7417 | 2720 | |
howcome@7417 | 2721 | <p>Printed publications are paged, while screen-based presentations of web |
howcome@7417 | 2722 | pages are most often presented in a continous manner with a scrollbar on |
howcome@7417 | 2723 | the side. There are reasons to believe that screen-based presentations |
howcome@7417 | 2724 | also could benefit from using paged presentations. There is nothing in web |
howcome@7417 | 2725 | specifications that prevent browsers from adding a page-based mode today. |
howcome@7417 | 2726 | However, most web content is authored and styled with a continous |
howcome@7417 | 2727 | presentation in mind. This could change if it becomes possible to describe |
howcome@7417 | 2728 | paged presentations in style sheets. This section is an attempt to do so. |
howcome@7417 | 2729 | |
howcome@7417 | 2730 | <p>To support paged presentations, four new values are added to the |
howcome@7417 | 2731 | ‘<code class=property>overflow-style</code>’ property: |
howcome@7417 | 2732 | |
howcome@7417 | 2733 | <dl> |
howcome@7417 | 2734 | <dt>paged-x |
howcome@7417 | 2735 | |
howcome@7417 | 2736 | <dd>overflow content is paged, and the pages are laid out along the x |
howcome@7417 | 2737 | axis, in the x axis component of the writing direction |
howcome@7417 | 2738 | |
howcome@7417 | 2739 | <dt>paged-y |
howcome@7417 | 2740 | |
howcome@7417 | 2741 | <dd>overflow content is paged, and the pages are laid out along the y |
howcome@7417 | 2742 | axis, in the the y axis component of the writing direction |
howcome@7417 | 2743 | |
howcome@7417 | 2744 | <dt>paged-x-controls |
howcome@7417 | 2745 | |
howcome@7417 | 2746 | <dd>as ‘<code class=property>paged-x</code>’, but with added |
howcome@7417 | 2747 | UA-specific controls to change pages |
howcome@7417 | 2748 | |
howcome@7417 | 2749 | <dt>paged-y-controls |
howcome@7417 | 2750 | |
howcome@7417 | 2751 | <dd>as ‘<code class=property>paged-y</code>’, but with added |
howcome@7417 | 2752 | UA-specific controls to change pages |
howcome@7417 | 2753 | </dl> |
howcome@7417 | 2754 | |
howcome@7417 | 2755 | <p class=issue>Is "paginated" a better word? |
howcome@7417 | 2756 | |
howcome@7417 | 2757 | <p class=issue>Should controls be specified on a separate property, or on |
howcome@7417 | 2758 | an attribute (like HTML's video element)? |
howcome@7417 | 2759 | |
howcome@7417 | 2760 | <p class=issue>Should the axis (x/y) be specified on a separate property? |
howcome@7417 | 2761 | |
howcome@7417 | 2762 | <div class=example> |
howcome@7417 | 2763 | <p>In this example, the root element is constrained to have the same |
howcome@7417 | 2764 | height as the initial containing block. Overflow content will be laid out |
howcome@7417 | 2765 | on subsequent pages along the x axis. In LTR languages, this means right; |
howcome@7417 | 2766 | in RTL languages this means left; in vertical-rl this means right. |
howcome@7417 | 2767 | |
howcome@7417 | 2768 | <pre> |
simon@7435 | 2769 | html { |
howcome@7417 | 2770 | overflow-style: paged-x; |
howcome@7417 | 2771 | height: 100%; |
howcome@7417 | 2772 | } |
howcome@7417 | 2773 | </pre> |
howcome@7417 | 2774 | </div> |
howcome@7417 | 2775 | |
howcome@7417 | 2776 | <div class=example> |
howcome@7417 | 2777 | <p>In this example, one element within the document is paged, and controls |
howcome@7417 | 2778 | are added so that users can navigate from one page to the next. As such, |
howcome@7417 | 2779 | the controls have the same effect as scrollbars in continous |
howcome@7417 | 2780 | presentations. |
howcome@7417 | 2781 | |
howcome@7417 | 2782 | <pre> |
simon@7435 | 2783 | #content { |
howcome@7417 | 2784 | overflow-style: paged-x-controls; |
howcome@7417 | 2785 | height: 400px; |
howcome@7417 | 2786 | } |
howcome@7417 | 2787 | </pre> |
howcome@7417 | 2788 | </div> |
howcome@7417 | 2789 | |
howcome@7417 | 2790 | <p>A paged container cannot be split over multiple columns. |
howcome@7417 | 2791 | |
howcome@7417 | 2792 | <h2 id=navigation-between-pages><span class=secno>11. </span>Navigation |
howcome@7417 | 2793 | between pages</h2> |
howcome@7417 | 2794 | |
howcome@7417 | 2795 | <p>Paged navigation within a page (as described above), can also be |
howcome@7417 | 2796 | naturally extended to navigation between web documents. To support this, a |
howcome@7417 | 2797 | new @-rule is proposed: @navigation. The purpose of @navigation is to |
howcome@7417 | 2798 | describe which documents the user can navigate to by moving up, right, |
howcome@7417 | 2799 | down, or left from the current document. |
howcome@7417 | 2800 | |
howcome@7417 | 2801 | <p>Four new properties are allowed inside @navigation: nav-up, nav-right, |
howcome@7417 | 2802 | nav-bottom, nav-right. |
howcome@7417 | 2803 | |
howcome@7417 | 2804 | <p class=note>The name of the properties inside @navigation are borrowed |
howcome@7417 | 2805 | from <a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#nav-dir">CSS3 |
howcome@7417 | 2806 | Basic User Interface Module</a>. |
howcome@7417 | 2807 | |
howcome@7417 | 2808 | <p>The properties accept these values: |
howcome@7417 | 2809 | |
howcome@7417 | 2810 | <dl> |
howcome@7417 | 2811 | <dt>go() |
howcome@7417 | 2812 | |
howcome@7417 | 2813 | <dd>the function takes one argument, which refers to the <tt>rel</tt> |
howcome@7417 | 2814 | attribute of the <tt>link</tt> element |
howcome@7417 | 2815 | <div class=example> |
howcome@7417 | 2816 | <pre> |
howcome@7417 | 2817 | <link rel=index href="../index.html"> |
howcome@7417 | 2818 | <link rel=previous href=g3.html> |
howcome@7417 | 2819 | <link rel=next href=g1.html> |
howcome@7417 | 2820 | ... |
howcome@7417 | 2821 | @navigation { |
simon@7435 | 2822 | nav-up: go(index); |
simon@7435 | 2823 | nav-left: go(previous); |
simon@7435 | 2824 | nav-right: go(next); |
howcome@7417 | 2825 | } |
howcome@7417 | 2826 | </pre> |
howcome@7417 | 2827 | </div> |
howcome@7417 | 2828 | |
howcome@7417 | 2829 | <p class=issue>This functionality relies on semantics in HTML and CSS. |
howcome@7417 | 2830 | Other languages may have other other ways to describe such semantics. |
howcome@7417 | 2831 | One possible solution for other languages is "link[rel=index] { nav-up: |
howcome@7417 | 2832 | attr(href) }" |
howcome@7417 | 2833 | |
howcome@7417 | 2834 | <dt>‘<code class=css>back</code>’ |
howcome@7417 | 2835 | |
howcome@7417 | 2836 | <dd>The keyword takes the user one step back in the history of browsed |
howcome@7417 | 2837 | pages. |
howcome@7417 | 2838 | <div class=example> |
howcome@7417 | 2839 | <pre> |
howcome@7417 | 2840 | @navigation { |
simon@7435 | 2841 | nav-left: back; |
howcome@7417 | 2842 | } |
howcome@7417 | 2843 | </pre> |
howcome@7417 | 2844 | </div> |
howcome@7417 | 2845 | |
howcome@7417 | 2846 | <dt>url() |
howcome@7417 | 2847 | |
howcome@7417 | 2848 | <dd>The funcation takes one argument: a URL. Relative URLs are relative to |
howcome@7417 | 2849 | the style sheet. |
howcome@7417 | 2850 | <div class=example> |
howcome@7417 | 2851 | <pre> |
howcome@7417 | 2852 | @navigation { |
howcome@7417 | 2853 | nav-up: url(..); |
howcome@7417 | 2854 | nav-down: url(a1.html); |
howcome@7417 | 2855 | } |
howcome@7417 | 2856 | </pre> |
howcome@7417 | 2857 | </div> |
howcome@7417 | 2858 | |
howcome@7417 | 2859 | <dt>url-doc() |
howcome@7417 | 2860 | |
howcome@7417 | 2861 | <dd>The function is identical to url(), except that relative URLs are |
howcome@7417 | 2862 | relative to the document, not to the style sheet. |
howcome@7417 | 2863 | <div class=example> |
howcome@7417 | 2864 | <pre> |
howcome@7417 | 2865 | @navigation { |
howcome@7417 | 2866 | nav-up: url-doc(..); |
howcome@7417 | 2867 | nav-down: url-doc(a1.html); |
howcome@7417 | 2868 | } |
howcome@7417 | 2869 | </pre> |
howcome@7417 | 2870 | </div> |
howcome@7417 | 2871 | </dl> |
howcome@7417 | 2872 | |
howcome@7417 | 2873 | <div class=example> |
howcome@7417 | 2874 | <p>Combined with the <a |
howcome@7417 | 2875 | href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document">@document-rule</a>, |
howcome@7417 | 2876 | navigation maps can be described: |
howcome@7417 | 2877 | |
howcome@7417 | 2878 | <pre> |
howcome@7417 | 2879 | @document url("http://example.com/foo") { |
howcome@7417 | 2880 | @navigation { |
howcome@7417 | 2881 | nav-right: link-rel(next); |
howcome@7417 | 2882 | } |
howcome@7417 | 2883 | } |
howcome@7417 | 2884 | |
howcome@7417 | 2885 | @document url("http://example.com/bar") { |
howcome@7417 | 2886 | @navigation { |
howcome@7417 | 2887 | nav-upt: link-rel(next); |
howcome@7417 | 2888 | } |
howcome@7417 | 2889 | } |
howcome@7417 | 2890 | </pre> |
howcome@7417 | 2891 | </div> |
howcome@7417 | 2892 | |
howcome@7417 | 2893 | <h3 id=page-shift-effects><span class=secno>11.1. </span>Page shift effects</h3> |
howcome@7417 | 2894 | |
howcome@7417 | 2895 | <p>To describe page shift effects, four new properties inside @navigation |
howcome@7417 | 2896 | are proposed: nav-up-shift, nav-right-shift, nav-down-shift, |
howcome@7417 | 2897 | nav-left-shift. These properties take one of several keyword values: |
howcome@7417 | 2898 | |
howcome@7417 | 2899 | <dl> |
howcome@7417 | 2900 | <dt>pan |
howcome@7417 | 2901 | |
howcome@7417 | 2902 | <dd>pans to the new page; this is the initial value |
howcome@7417 | 2903 | |
howcome@7417 | 2904 | <dt>turn |
howcome@7417 | 2905 | |
howcome@7417 | 2906 | <dd>turns the page, like soft book pages do |
howcome@7417 | 2907 | |
howcome@7417 | 2908 | <dt>flip |
howcome@7417 | 2909 | |
howcome@7417 | 2910 | <dd>flips the page, like stiff cardbord |
howcome@7417 | 2911 | |
howcome@7417 | 2912 | <dt>fold |
howcome@7417 | 2913 | |
howcome@7417 | 2914 | <dd>the old page folds, like an accordion |
howcome@7417 | 2915 | </dl> |
howcome@7417 | 2916 | |
howcome@7417 | 2917 | <p class=issue>The proposed keyword values are loosely described. Are there |
howcome@7417 | 2918 | better ways to describe transitions? |
howcome@7417 | 2919 | |
howcome@7417 | 2920 | <div class=example> |
howcome@7417 | 2921 | <pre> |
howcome@7417 | 2922 | @navigation { |
howcome@7417 | 2923 | nav-up-shift: pan; |
howcome@7417 | 2924 | nav-down-shift: flip; |
howcome@7417 | 2925 | } |
howcome@7417 | 2926 | </pre> |
howcome@7417 | 2927 | </div> |
howcome@7417 | 2928 | |
howcome@7419 | 2929 | <h2 id=page-floats><span class=secno>12. </span>Page floats</h2> |
howcome@7417 | 2930 | |
howcome@7417 | 2931 | <p>Images and figures are sometimes displayed at the top or bottom of pages |
howcome@7417 | 2932 | and columns. This specificaton adds new keywords on the ‘<code |
howcome@7417 | 2933 | class=property>float</code>’ property which, in combination with integer |
howcome@7419 | 2934 | values on ‘<code class=property>column-span</code>’, provides support |
howcome@7419 | 2935 | for common paper-based layouts. |
howcome@7419 | 2936 | |
howcome@7419 | 2937 | <p>The values below only have effect in paged mode, and the resulting |
howcome@7419 | 2938 | floats are called "page floats". |
howcome@7419 | 2939 | |
howcome@7419 | 2940 | <p class=note>A more accurate term may have been "column floats", as the |
howcome@7419 | 2941 | the elements relate more strongly to columns that to pages. |
howcome@7417 | 2942 | |
howcome@7417 | 2943 | <p>Four new keywords on ‘<code class=property>float</code>’ have been |
howcome@7417 | 2944 | added: |
howcome@7417 | 2945 | |
howcome@7417 | 2946 | <dl> |
howcome@7417 | 2947 | <dt>top |
howcome@7417 | 2948 | |
howcome@7417 | 2949 | <dd>the box is floated to the top of the natural column |
howcome@7417 | 2950 | |
howcome@7417 | 2951 | <dt>bottom |
howcome@7417 | 2952 | |
howcome@7417 | 2953 | <dd>the box is floated to the bottom of the natural column |
howcome@7417 | 2954 | |
howcome@7417 | 2955 | <dt>top-corner |
howcome@7417 | 2956 | |
howcome@7417 | 2957 | <dd>the box is floated to the top of the last column (in the inline |
howcome@7417 | 2958 | direction) that fits inside the multicol element on the same page. |
howcome@7417 | 2959 | |
howcome@7417 | 2960 | <dt>bottom-corner |
howcome@7417 | 2961 | |
howcome@7417 | 2962 | <dd>similar to ‘<code class=property>top-corner</code>’, exept the box |
howcome@7417 | 2963 | is floated to the bottom <!-- |
howcome@7417 | 2964 | <dt>snap(<length>, [top | bottom]) |
howcome@7417 | 2965 | |
howcome@7417 | 2966 | <dd>same as 'top' if the box is naturally near the top; same as |
howcome@7417 | 2967 | 'bottom' if the box is naturally near the bottom. If the box naturally |
howcome@7417 | 2968 | leads to a (page/column) break, the box is floated to the top of the |
howcome@7417 | 2969 | next page/column. The first optionaloptional length value specifies how far from the |
howcome@7417 | 2970 | top/bottom the element can be influenced, The second |
howcome@7417 | 2971 | --> |
howcome@7417 | 2972 | |
howcome@7417 | 2973 | <dt>snap(<length> <length>? [, top | bottom | near ]?) |
howcome@7417 | 2974 | |
howcome@7417 | 2975 | <dd> |
howcome@7417 | 2976 | <p>Makes the element float to the top or bottom if it naturally appears |
howcome@7417 | 2977 | within a certain distance from the top or bottom. The length value(s) |
howcome@7417 | 2978 | specifies the maxium distance from the top/bottom that an element must |
howcome@7417 | 2979 | be within in order to be floated; one length value specifies the |
howcome@7417 | 2980 | distance from both the top and the bottom, two length values specify the |
howcome@7417 | 2981 | distance from the top and bottom, respectively. If an element is within |
howcome@7417 | 2982 | the specified distance from both the top and the bottom, bottom wins. |
howcome@7417 | 2983 | |
howcome@7417 | 2984 | <p>The optional keyword value specifies where the element is floated: |
howcome@7417 | 2985 | top, bottom, or the nearest of the two. The initial value is ‘<code |
howcome@7417 | 2986 | class=property>near</code>’. |
howcome@7417 | 2987 | |
howcome@7417 | 2988 | <p>An element is considered to be a float if it has a snap() value, even |
howcome@7417 | 2989 | if the element does not appear within the specified distance. This way, |
howcome@7417 | 2990 | it can be determined whether an element is float or not without laying |
howcome@7417 | 2991 | out the document. |
howcome@7417 | 2992 | |
howcome@7417 | 2993 | <dt>snap |
howcome@7417 | 2994 | |
howcome@7417 | 2995 | <dd>same as <tt>snap(2em, near)</tt> |
howcome@7417 | 2996 | </dl> |
howcome@7417 | 2997 | |
howcome@7419 | 2998 | <p>If the requested position cannot be honored, the page float may be |
howcome@7419 | 2999 | displayed in subsequent columns/pages. |
howcome@7419 | 3000 | |
howcome@7417 | 3001 | <div class=example> |
howcome@7417 | 3002 | <p>In this example, tables will snap to the top/bottom if the top/bottom |
howcome@7417 | 3003 | of the border box is closer than ‘<code class=css>3em</code>’ from |
howcome@7417 | 3004 | the top/bottom of the page/column. |
howcome@7417 | 3005 | |
howcome@7417 | 3006 | <pre> |
howcome@7417 | 3007 | table { float: snap } |
howcome@7417 | 3008 | table { float: snap(3em) } |
howcome@7417 | 3009 | table { float: snap(3em, bottom) } |
howcome@7417 | 3010 | table { float: snap(3em 2em, bottom) } |
howcome@7417 | 3011 | </pre> |
howcome@7417 | 3012 | </div> |
howcome@7417 | 3013 | |
howcome@7417 | 3014 | <p class=issue>Should we define a reasonable default (say, 3em) instead of |
howcome@7417 | 3015 | relying on implementation-specific values? |
howcome@7417 | 3016 | |
howcome@7417 | 3017 | <p class=issue>Do numberic values (in addition to length values) make |
howcome@7417 | 3018 | sense, like for orphans/widows <!-- |
simon@7435 | 3019 | The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom. |
howcome@7417 | 3020 | --> |
howcome@7417 | 3021 | |
howcome@7417 | 3022 | <p>These new keywords only apply in paged media; in continous media |
howcome@7417 | 3023 | declarations with these keywords are ignored. |
howcome@7417 | 3024 | |
howcome@7417 | 3025 | <div class=example> |
howcome@7417 | 3026 | <p>Float figure to top of natural column: |
howcome@7417 | 3027 | |
howcome@7417 | 3028 | <pre> |
howcome@7417 | 3029 | .figure { float: top; display: block; } |
howcome@7417 | 3030 | </pre> |
howcome@7417 | 3031 | <img alt="sample rendering" src=7.png></div> |
howcome@7417 | 3032 | |
howcome@7417 | 3033 | <div class=example> |
howcome@7417 | 3034 | <pre> |
howcome@7417 | 3035 | .figure { float: top; width: 50% } |
howcome@7417 | 3036 | </pre> |
howcome@7417 | 3037 | <img alt="sample rendering" src=7b.png></div> |
howcome@7417 | 3038 | |
howcome@7417 | 3039 | <div class=example> |
howcome@7417 | 3040 | <p>Float figure to top of the natural column, spanning all columns: |
howcome@7417 | 3041 | |
howcome@7417 | 3042 | <pre> |
howcome@7417 | 3043 | .figure { float: top; column-span: all } |
howcome@7417 | 3044 | </pre> |
howcome@7417 | 3045 | </div> |
howcome@7417 | 3046 | |
howcome@7417 | 3047 | <div class=example> |
howcome@7417 | 3048 | <p>Float figure to top of the last column of the multicol element on the |
howcome@7417 | 3049 | current page: |
howcome@7417 | 3050 | |
howcome@7417 | 3051 | <pre> |
howcome@7417 | 3052 | .figure { float: top-corner } |
howcome@7417 | 3053 | </pre> |
howcome@7417 | 3054 | <img alt="sample rendering" src=6.png></div> |
howcome@7417 | 3055 | |
howcome@7417 | 3056 | <p>The ‘<code class=property>column-span</code>’ property is extended |
howcome@7417 | 3057 | with integer values so that elements can span several columns. If the |
howcome@7417 | 3058 | specified integer value is equal to, or larger than the number of columns |
howcome@7417 | 3059 | in the multicol element, the number of columns spanned will be the same as |
howcome@7417 | 3060 | if ‘<code class=css>column-span: all</code>’ had been specified. |
howcome@7417 | 3061 | |
howcome@7417 | 3062 | <div class=example> |
howcome@7417 | 3063 | <p>In combination with ‘<code class=property>column-span</code>’, the |
howcome@7417 | 3064 | figure is floated to the top corner of the multicol element on that page: |
howcome@7417 | 3065 | |
howcome@7417 | 3066 | <pre> |
howcome@7417 | 3067 | .figure { float: top-corner; column-span: 2; width: 100% } |
howcome@7417 | 3068 | </pre> |
howcome@7417 | 3069 | <img alt="sample rendering" src=8.png></div> |
howcome@7417 | 3070 | |
howcome@7417 | 3071 | <p> |
howcome@7417 | 3072 | |
howcome@7417 | 3073 | <div class=example> <img alt="sample rendering" src=regions.png> |
howcome@7417 | 3074 | <p>In this example, a commonly used newspaper layout is easily described: |
howcome@7417 | 3075 | |
howcome@7417 | 3076 | <pre> |
simon@7435 | 3077 | body { columns: 3 } |
howcome@7417 | 3078 | img.A { column-span: 2; width: 100% } /* image spans two columns */ |
howcome@7417 | 3079 | .one { column-span: 2 } /* lead paragraph spans two columns */ |
howcome@7417 | 3080 | </pre> |
howcome@7417 | 3081 | </div> |
howcome@7417 | 3082 | <!-- |
howcome@7417 | 3083 | <h3>Float modifiers</h3> |
howcome@7417 | 3084 | |
howcome@7417 | 3085 | <p>These values on 'float' can be combined with one of 'top'/'bottom'/'top-corner'/'bottom-corner' values: |
howcome@7417 | 3086 | |
howcome@7417 | 3087 | <dl> |
howcome@7417 | 3088 | |
howcome@7417 | 3089 | <dt>next-page |
howcome@7417 | 3090 | |
simon@7435 | 3091 | <dd>In paged media, float box to the next page. The first column of the multicol element on the next page is considered to be the natural column for boxes affected by this value. |
howcome@7417 | 3092 | |
howcome@7417 | 3093 | <div class=example> |
howcome@7417 | 3094 | |
howcome@7417 | 3095 | <pre> |
howcome@7417 | 3096 | .figure { float: top-corner next-page } |
howcome@7417 | 3097 | </pre> |
howcome@7417 | 3098 | |
howcome@7417 | 3099 | </div> |
howcome@7417 | 3100 | |
howcome@7417 | 3101 | <dt>next-column |
howcome@7417 | 3102 | |
simon@7435 | 3103 | <dd>In paged media, float box to the next column. |
howcome@7417 | 3104 | |
howcome@7417 | 3105 | <div class=example> |
howcome@7417 | 3106 | |
howcome@7417 | 3107 | <pre> |
howcome@7417 | 3108 | .figure { float: top next-column } |
howcome@7417 | 3109 | .figure { float: next-column top } |
howcome@7417 | 3110 | </pre> |
howcome@7417 | 3111 | |
howcome@7417 | 3112 | </div> |
howcome@7417 | 3113 | |
howcome@7417 | 3114 | !-- |
howcome@7417 | 3115 | <dt>unless-room |
howcome@7417 | 3116 | |
simon@7435 | 3117 | <dd>Only float the box if it otherwise would have lead to a column or page break. |
howcome@7417 | 3118 | |
howcome@7417 | 3119 | <div class=example> |
howcome@7417 | 3120 | |
howcome@7417 | 3121 | <pre> |
howcome@7417 | 3122 | .figure { float: top unless-room } |
howcome@7417 | 3123 | </pre> |
howcome@7417 | 3124 | |
howcome@7417 | 3125 | </div> |
howcome@7417 | 3126 | -- |
howcome@7417 | 3127 | |
howcome@7417 | 3128 | <dt>left/right |
howcome@7417 | 3129 | |
howcome@7417 | 3130 | <dd>'left'/'right' can be used in combination with 'top'/'bottom'/'top-corner'/'bottom-corner' to allow other content to flow around the box. |
howcome@7417 | 3131 | |
howcome@7417 | 3132 | <div class=example> |
howcome@7417 | 3133 | <pre> |
howcome@7417 | 3134 | .figure { float: top right; width: 60% } |
howcome@7417 | 3135 | </pre> |
howcome@7417 | 3136 | <img alt="sample rendering" src=13.png> |
howcome@7417 | 3137 | </div> |
howcome@7417 | 3138 | |
howcome@7417 | 3139 | |
howcome@7417 | 3140 | |
howcome@7417 | 3141 | </dl> |
howcome@7417 | 3142 | |
howcome@7417 | 3143 | --> |
howcome@7417 | 3144 | |
howcome@7419 | 3145 | <h3 id=page-float-delays><span class=secno>12.1. </span>Page float delays</h3> |
howcome@7419 | 3146 | |
howcome@7419 | 3147 | <p>A page float can ask to be displayed at a later point by adding a |
howcome@7419 | 3148 | numeric value to the keywords defined above |
howcome@7419 | 3149 | |
howcome@7419 | 3150 | <div class=example> |
howcome@7419 | 3151 | <p>Float figure to top of the natural column: |
howcome@7419 | 3152 | |
howcome@7419 | 3153 | <pre> |
howcome@7419 | 3154 | .figure { float: top(1) } |
howcome@7419 | 3155 | </pre> |
howcome@7419 | 3156 | </div> |
howcome@7419 | 3157 | |
howcome@7419 | 3158 | <div class=example> |
howcome@7419 | 3159 | <p>Float figure to the top of the column appearing after the natural |
howcome@7419 | 3160 | column: |
howcome@7419 | 3161 | |
howcome@7419 | 3162 | <pre> |
howcome@7419 | 3163 | .figure { float: top(2) } |
howcome@7419 | 3164 | </pre> |
howcome@7419 | 3165 | </div> |
howcome@7419 | 3166 | |
howcome@7419 | 3167 | <div class=example> |
howcome@7419 | 3168 | <p>Float figure to the top corner on the page appearing after the natural |
howcome@7419 | 3169 | page: |
howcome@7419 | 3170 | |
howcome@7419 | 3171 | <pre> |
howcome@7419 | 3172 | .figure { float: top-corner(2) } |
howcome@7419 | 3173 | </pre> |
howcome@7419 | 3174 | </div> |
howcome@7419 | 3175 | |
howcome@7419 | 3176 | <p class=issue>What should happen if the float request a column/page that |
howcome@7419 | 3177 | would otherwise not exist? |
howcome@7419 | 3178 | |
howcome@7419 | 3179 | <h3 id=clearing-page-floats><span class=secno>12.2. </span>Clearing page |
howcome@7417 | 3180 | floats</h3> |
howcome@7417 | 3181 | |
howcome@7419 | 3182 | <p>If more than page float request the same position (e.g, the top of a |
howcome@7419 | 3183 | column), they will normally be stacked like other floats. To avoid |
howcome@7419 | 3184 | stacking, two new values on ‘<code class=property>clear</code>’ can be |
howcome@7419 | 3185 | used: |
howcome@7419 | 3186 | |
howcome@7419 | 3187 | <dl> |
howcome@7419 | 3188 | <dt>column |
howcome@7419 | 3189 | |
howcome@7419 | 3190 | <dd>If there is already a page float at the requested position, the page |
howcome@7419 | 3191 | float is moved to the next column which does not have a page float in the |
howcome@7419 | 3192 | requested position. |
howcome@7419 | 3193 | |
howcome@7419 | 3194 | <dt>page |
howcome@7419 | 3195 | |
howcome@7419 | 3196 | <dd>If there is already a page float at the requested position, the page |
howcome@7419 | 3197 | float is moved to the next page which does not have a page float in the |
howcome@7419 | 3198 | requested position |
howcome@7419 | 3199 | </dl> |
howcome@7419 | 3200 | |
howcome@7417 | 3201 | <div class=example> |
howcome@7419 | 3202 | <p>In this example, the two figures end up the top corner of two different |
howcome@7419 | 3203 | pages: |
howcome@7419 | 3204 | |
howcome@7417 | 3205 | <pre> |
howcome@7417 | 3206 | .figure { float: top-corner; clear: page } |
howcome@7419 | 3207 | |
howcome@7419 | 3208 | <div class=figure></div> |
howcome@7419 | 3209 | <div class=figure></div> |
howcome@7417 | 3210 | </pre> |
howcome@7417 | 3211 | </div> |
howcome@7417 | 3212 | |
howcome@7417 | 3213 | <div class=example> |
howcome@7419 | 3214 | <p>In this example, the two figures request different positions, and they |
howcome@7419 | 3215 | may therefore end up in the same column: |
howcome@7419 | 3216 | |
howcome@7417 | 3217 | <pre> |
howcome@7419 | 3218 | .figure.one { float: top; clear: column } |
howcome@7419 | 3219 | .figure.two { float: bottom; clear: column } |
howcome@7419 | 3220 | |
howcome@7419 | 3221 | <div class="figure one"></div> |
howcome@7419 | 3222 | <div class="figure two"></div> |
howcome@7417 | 3223 | </pre> |
howcome@7417 | 3224 | </div> |
howcome@7417 | 3225 | |
howcome@7419 | 3226 | <h3 id=floating-inside-and-outside-pages><span class=secno>12.3. |
howcome@7417 | 3227 | </span>Floating inside and outside pages</h3> |
howcome@7417 | 3228 | |
howcome@7417 | 3229 | <p>Two allow content to flow to the inside and outside of a page, these |
howcome@7417 | 3230 | keywords are added to the ‘<code class=property>float</code>’ |
howcome@7417 | 3231 | property: |
howcome@7417 | 3232 | |
howcome@7417 | 3233 | <dl> |
howcome@7417 | 3234 | <dt>inside |
howcome@7417 | 3235 | |
howcome@7417 | 3236 | <dd>On a right page, this value is synonymous with ‘<code |
howcome@7417 | 3237 | class=property>left</code>’. On a left page, this value is synonymous |
howcome@7417 | 3238 | with ‘<code class=property>right</code>’. |
howcome@7417 | 3239 | |
howcome@7417 | 3240 | <dt>outside |
howcome@7417 | 3241 | |
howcome@7417 | 3242 | <dd>On a left page, this value is synonymous with ‘<code |
howcome@7417 | 3243 | class=property>left</code>’, On a right page, this value is synonymous |
howcome@7417 | 3244 | with ‘<code class=property>right</code>’. |
howcome@7417 | 3245 | </dl> |
howcome@7417 | 3246 | |
howcome@7417 | 3247 | <div class=example> |
howcome@7417 | 3248 | <pre> |
howcome@7417 | 3249 | .figure { float: outside } |
howcome@7417 | 3250 | </pre> |
howcome@7417 | 3251 | </div> |
howcome@7417 | 3252 | |
howcome@7417 | 3253 | <h2 id=page-and-column-floats-alternative-synta><span class=secno>13. |
howcome@7417 | 3254 | </span>Page and column floats, alternative syntax</h2> |
howcome@7417 | 3255 | |
howcome@7417 | 3256 | <p>This section describes an alternative syntax for page and column floats. |
howcome@7417 | 3257 | |
howcome@7417 | 3258 | <p>Four new keywords on ‘<code class=property>float</code>’ have been |
howcome@7417 | 3259 | added: |
howcome@7417 | 3260 | |
howcome@7417 | 3261 | <dl> |
howcome@7417 | 3262 | <dt>left, right, top, bottom |
howcome@7417 | 3263 | |
howcome@7417 | 3264 | <dd>relative to physical viewport |
howcome@7417 | 3265 | |
howcome@7417 | 3266 | <dt>line-left, line-right |
howcome@7417 | 3267 | |
howcome@7417 | 3268 | <dd>relative to inline axis |
howcome@7417 | 3269 | |
howcome@7417 | 3270 | <dt>before, after |
howcome@7417 | 3271 | |
howcome@7417 | 3272 | <dd>relative to block direction |
howcome@7417 | 3273 | |
howcome@7417 | 3274 | <dt>inside, outside |
howcome@7417 | 3275 | |
howcome@7417 | 3276 | <dd>as described in the previous section |
howcome@7417 | 3277 | |
howcome@7417 | 3278 | <dt>footnote |
howcome@7417 | 3279 | |
howcome@7417 | 3280 | <dd>as described above |
howcome@7417 | 3281 | |
howcome@7417 | 3282 | <dt>columns(n) |
howcome@7417 | 3283 | |
howcome@7417 | 3284 | <dd>makes the float span n columns, and sets the float context to be the |
howcome@7417 | 3285 | multicol element |
howcome@7417 | 3286 | |
howcome@7417 | 3287 | <dt>page |
howcome@7417 | 3288 | |
howcome@7417 | 3289 | <dd>sets the float context to be the page |
howcome@7417 | 3290 | </dl> |
howcome@7417 | 3291 | |
howcome@7417 | 3292 | <div class=example> |
howcome@7417 | 3293 | <p>Float figure to the top right corner of the multicol element, spanning |
howcome@7417 | 3294 | two columns: |
howcome@7417 | 3295 | |
howcome@7417 | 3296 | <pre> |
howcome@7417 | 3297 | .figure { float: top rigth columns(2); width: 100% } |
howcome@7417 | 3298 | </pre> |
howcome@7417 | 3299 | <img alt="sample rendering" src=8.png></div> |
howcome@7417 | 3300 | |
howcome@7417 | 3301 | <div class=example> |
howcome@7417 | 3302 | <p>Float figure to top of the last column of the multicol element on the |
howcome@7417 | 3303 | current page: |
howcome@7417 | 3304 | |
howcome@7417 | 3305 | <pre> |
howcome@7417 | 3306 | .figure { float: top right columns(1) } |
howcome@7417 | 3307 | </pre> |
howcome@7417 | 3308 | <img alt="sample rendering" src=6.png></div> |
howcome@7417 | 3309 | |
howcome@7417 | 3310 | <div class=example> |
howcome@7417 | 3311 | <p>Float figure to the top right of the current element, allowing other |
howcome@7417 | 3312 | content on its side: |
howcome@7417 | 3313 | |
howcome@7417 | 3314 | <pre> |
howcome@7417 | 3315 | .figure { float: top right; width: 60% } |
howcome@7417 | 3316 | </pre> |
howcome@7417 | 3317 | <img alt="sample rendering" src=13.png></div> |
howcome@7417 | 3318 | |
howcome@7417 | 3319 | <div class=example> |
howcome@7417 | 3320 | <p>Escape the multicol element and float to the top right of the page |
howcome@7417 | 3321 | area: |
howcome@7417 | 3322 | |
howcome@7417 | 3323 | <pre> |
howcome@7417 | 3324 | .figure { float: top right page } |
howcome@7417 | 3325 | </pre> |
howcome@7417 | 3326 | </div> |
howcome@7417 | 3327 | |
howcome@7417 | 3328 | <h2 id=exclusions><span class=secno>14. </span>Exclusions</h2> |
howcome@7417 | 3329 | |
howcome@7417 | 3330 | <h3 id=exclusions-based-on-floats><span class=secno>14.1. </span>Exclusions |
howcome@7417 | 3331 | based on floats</h3> |
howcome@7417 | 3332 | |
howcome@7417 | 3333 | <p>A new value on ‘<code class=property>float</code>’ is introduced to |
howcome@7417 | 3334 | support intrusion in columns: |
howcome@7417 | 3335 | |
howcome@7417 | 3336 | <dl> |
howcome@7417 | 3337 | <dt>intrude |
howcome@7417 | 3338 | |
howcome@7417 | 3339 | <dd>The element may intrude neighboring columns; if the element is not in |
howcome@7417 | 3340 | a multi-column element, this keyword has no effect. |
howcome@7417 | 3341 | </dl> |
howcome@7417 | 3342 | |
howcome@7417 | 3343 | <p>The ‘<code class=property>intrude</code>’ value only works in |
howcome@7417 | 3344 | combination with one of these keywords: ‘<code |
howcome@7417 | 3345 | class=property>left</code>’/‘<code |
howcome@7417 | 3346 | class=property>right</code>’/‘<code |
howcome@7417 | 3347 | class=property>top</code>’/‘<code |
howcome@7417 | 3348 | class=property>bottom</code>’/‘<code |
howcome@7417 | 3349 | class=property>top-corner</code>’/‘<code |
howcome@7417 | 3350 | class=property>bottom-corner</code>’. |
howcome@7417 | 3351 | |
howcome@7417 | 3352 | <div class=example> |
howcome@7417 | 3353 | <pre class=css> |
howcome@7417 | 3354 | img { float: left intrude; width: 120%; } |
howcome@7417 | 3355 | </pre> |
howcome@7417 | 3356 | |
howcome@7417 | 3357 | <p>In this example, the image is wider than the column and will therefore |
howcome@7417 | 3358 | intrude into the neighboring column. At the bottom of the middle column |
howcome@7417 | 3359 | is a long word that is clipped in the middle of the column gap. <img |
howcome@7417 | 3360 | alt="sample rendering" src=1.png> |
howcome@7417 | 3361 | </div> |
howcome@7417 | 3362 | |
howcome@7417 | 3363 | <h3 id=the-float-offset-property><span class=secno>14.2. </span>The ‘<a |
howcome@7417 | 3364 | href="#float-offset"><code class=property>float-offset</code></a>’ |
howcome@7417 | 3365 | property</h3> |
howcome@7417 | 3366 | |
howcome@7417 | 3367 | <table class=propdef> |
howcome@7417 | 3368 | <tbody> |
howcome@7417 | 3369 | <tr> |
howcome@7417 | 3370 | <td><em>Name:</em> |
howcome@7417 | 3371 | |
howcome@7417 | 3372 | <td><dfn id=float-offset>float-offset</dfn> |
howcome@7417 | 3373 | |
howcome@7417 | 3374 | <tr> |
howcome@7417 | 3375 | <td><em>Value:</em> |
howcome@7417 | 3376 | |
howcome@7417 | 3377 | <td><length> <length> ? |
howcome@7417 | 3378 | |
howcome@7417 | 3379 | <tr> |
howcome@7417 | 3380 | <td><em>Initial:</em> |
howcome@7417 | 3381 | |
howcome@7417 | 3382 | <td>0 0 |
howcome@7417 | 3383 | |
howcome@7417 | 3384 | <tr> |
howcome@7417 | 3385 | <td><em>Applies to:</em> |
howcome@7417 | 3386 | |
howcome@7417 | 3387 | <td>floated elements |
howcome@7417 | 3388 | |
howcome@7417 | 3389 | <tr> |
howcome@7417 | 3390 | <td><em>Inherited:</em> |
howcome@7417 | 3391 | |
howcome@7417 | 3392 | <td>no |
howcome@7417 | 3393 | |
howcome@7417 | 3394 | <tr> |
howcome@7417 | 3395 | <td><em>Percentages:</em> |
howcome@7417 | 3396 | |
howcome@7417 | 3397 | <td>see prose |
howcome@7417 | 3398 | |
howcome@7417 | 3399 | <tr> |
howcome@7417 | 3400 | <td><em>Media:</em> |
howcome@7417 | 3401 | |
howcome@7417 | 3402 | <td>visual, paged |
howcome@7417 | 3403 | |
howcome@7417 | 3404 | <tr> |
howcome@7417 | 3405 | <td><em>Computed value:</em> |
howcome@7417 | 3406 | |
howcome@7417 | 3407 | <td>one or two absolute lengths |
howcome@7417 | 3408 | </table> |
howcome@7417 | 3409 | |
howcome@7417 | 3410 | <p>This property pushes a float in opposite direction of the where it has |
howcome@7417 | 3411 | been floated with ‘<code class=property>float</code>’. If one value is |
howcome@7417 | 3412 | specified, it is the horizontal offset. If two values are specified, the |
howcome@7417 | 3413 | first is the horizontal and the second is the vertical offset. If no |
howcome@7417 | 3414 | vertical value has been specified, the vertical offset is set to zero. |
howcome@7417 | 3415 | |
howcome@7417 | 3416 | <p>This property can only influence a float along an axis it has been |
howcome@7417 | 3417 | floated. |
howcome@7417 | 3418 | |
howcome@7417 | 3419 | <div class=example> |
howcome@7417 | 3420 | <pre> |
simon@7435 | 3421 | img { |
howcome@7417 | 3422 | float: left; |
simon@7435 | 3423 | float-offset: 2em 3em; |
howcome@7417 | 3424 | } |
howcome@7417 | 3425 | </pre> |
howcome@7417 | 3426 | |
howcome@7417 | 3427 | <p>In this example, the image is floated to the left. Therefore, ‘<a |
howcome@7417 | 3428 | href="#float-offset"><code class=property>float-offset</code></a>’ may |
howcome@7417 | 3429 | only push the element in the horizontal direction, and the vertical value |
howcome@7417 | 3430 | is ignored. |
howcome@7417 | 3431 | </div> |
howcome@7417 | 3432 | |
howcome@7417 | 3433 | <p>Negative values are allowed; a negative values will push the float in |
howcome@7417 | 3434 | the same direction as it has been floated with ‘<code |
howcome@7417 | 3435 | class=property>float</code>’ |
howcome@7417 | 3436 | |
howcome@7417 | 3437 | <p>This property may move floats into other column than where they |
howcome@7417 | 3438 | naturally appear. |
howcome@7417 | 3439 | |
howcome@7417 | 3440 | <div class=example> |
simon@7435 | 3441 | <pre>img { |
howcome@7417 | 3442 | float: right; |
howcome@7417 | 3443 | float-offset: 5px; |
howcome@7417 | 3444 | } |
howcome@7417 | 3445 | </pre> |
howcome@7417 | 3446 | <img alt="sample rendering" src=14.png></div> |
howcome@7417 | 3447 | |
howcome@7417 | 3448 | <p>Percentage values are computed according to this formula: |
howcome@7417 | 3449 | |
howcome@7417 | 3450 | <pre> |
simon@7435 | 3451 | (containing-block-width - float-width) * percentage |
simon@7435 | 3452 | (containing-block-height - float-height) * percentage |
howcome@7417 | 3453 | </pre> |
howcome@7417 | 3454 | |
howcome@7417 | 3455 | <div class=example> Pull quotes are often centered in a column. In this |
howcome@7417 | 3456 | example, the pull quote is floated to the right, and then pushed back into |
howcome@7417 | 3457 | the center. <img src="exclusion_wrap_side_left.png" width=213> |
howcome@7417 | 3458 | <pre> |
howcome@7417 | 3459 | .pullquote { |
howcome@7417 | 3460 | float: right; |
howcome@7417 | 3461 | float-offset: 50%; /* 50% centers the box */ |
howcome@7417 | 3462 | } |
howcome@7417 | 3463 | </pre> |
howcome@7417 | 3464 | </div> |
howcome@7417 | 3465 | |
howcome@7417 | 3466 | <p>When negative values are set on this property, the column gap is also |
howcome@7417 | 3467 | part of the calculation: |
howcome@7417 | 3468 | |
howcome@7417 | 3469 | <pre> |
simon@7435 | 3470 | ((containing-block-width + 2 * column-gap) - float-width) * percentage |
howcome@7417 | 3471 | </pre> |
howcome@7417 | 3472 | |
howcome@7417 | 3473 | <div class=example> |
simon@7435 | 3474 | <pre>img { |
howcome@7417 | 3475 | float: top right; |
howcome@7417 | 3476 | float-offset: -50% 3em; /* 50% centers the box */ |
howcome@7417 | 3477 | width: 120%; |
howcome@7417 | 3478 | } |
howcome@7417 | 3479 | </pre> |
howcome@7417 | 3480 | <img alt="sample rendering" src=11.png></div> |
howcome@7417 | 3481 | |
howcome@7417 | 3482 | <div class=example> |
howcome@7417 | 3483 | <pre> |
howcome@7417 | 3484 | img { |
howcome@7417 | 3485 | float: top right; |
howcome@7417 | 3486 | float-offset: -80% 2em; |
howcome@7417 | 3487 | width: 100%; |
howcome@7417 | 3488 | } |
howcome@7417 | 3489 | </pre> |
howcome@7417 | 3490 | <img alt="sample rendering" src=12.png></div> |
howcome@7417 | 3491 | |
howcome@7417 | 3492 | <h3 id=the-clear-side-property><span class=secno>14.3. </span>The ‘<a |
howcome@7417 | 3493 | href="#clear-side"><code class=property>clear-side</code></a>’ property</h3> |
howcome@7417 | 3494 | |
howcome@7417 | 3495 | <table class=propdef> |
howcome@7417 | 3496 | <tbody> |
howcome@7417 | 3497 | <tr> |
howcome@7417 | 3498 | <td><em>Name:</em> |
howcome@7417 | 3499 | |
howcome@7417 | 3500 | <td><dfn id=clear-side>clear-side</dfn> |
howcome@7417 | 3501 | |
howcome@7417 | 3502 | <tr> |
howcome@7417 | 3503 | <td><em>Value:</em> |
howcome@7417 | 3504 | |
howcome@7417 | 3505 | <td>auto <!-- | left | right--> | both |
howcome@7417 | 3506 | |
howcome@7417 | 3507 | <tr> |
howcome@7417 | 3508 | <td><em>Initial:</em> |
howcome@7417 | 3509 | |
howcome@7417 | 3510 | <td>auto |
howcome@7417 | 3511 | |
howcome@7417 | 3512 | <tr> |
howcome@7417 | 3513 | <td><em>Applies to:</em> |
howcome@7417 | 3514 | |
howcome@7417 | 3515 | <td>floated elements |
howcome@7417 | 3516 | |
howcome@7417 | 3517 | <tr> |
howcome@7417 | 3518 | <td><em>Inherited:</em> |
howcome@7417 | 3519 | |
howcome@7417 | 3520 | <td>no |
howcome@7417 | 3521 | |
howcome@7417 | 3522 | <tr> |
howcome@7417 | 3523 | <td><em>Percentages:</em> |
howcome@7417 | 3524 | |
howcome@7417 | 3525 | <td>N/A |
howcome@7417 | 3526 | |
howcome@7417 | 3527 | <tr> |
howcome@7417 | 3528 | <td><em>Media:</em> |
howcome@7417 | 3529 | |
howcome@7417 | 3530 | <td>visual, paged |
howcome@7417 | 3531 | |
howcome@7417 | 3532 | <tr> |
howcome@7417 | 3533 | <td><em>Computed value:</em> |
howcome@7417 | 3534 | |
howcome@7417 | 3535 | <td>as specified |
howcome@7417 | 3536 | </table> |
howcome@7417 | 3537 | |
howcome@7417 | 3538 | <p>This property declares if the side of a float should be cleared of |
howcome@7417 | 3539 | content. Values have the following meaning: |
howcome@7417 | 3540 | |
howcome@7417 | 3541 | <dl> |
howcome@7417 | 3542 | <dt>auto |
howcome@7417 | 3543 | |
howcome@7417 | 3544 | <dd>if the float is left-floated, there should be no content to the left; |
howcome@7417 | 3545 | if the float is right-floated, there should be no content to the right |
howcome@7417 | 3546 | !_- |
howcome@7417 | 3547 | |
howcome@7417 | 3548 | <dt>left |
howcome@7417 | 3549 | |
howcome@7417 | 3550 | <dd>there should be no content to the left of the float |
howcome@7417 | 3551 | |
howcome@7417 | 3552 | <dt>right |
howcome@7417 | 3553 | |
howcome@7417 | 3554 | <dd>there should be no content to the left of the float --> |
howcome@7417 | 3555 | |
howcome@7417 | 3556 | <dt>none |
howcome@7417 | 3557 | |
howcome@7417 | 3558 | <dd>there may be content on either side of the float |
howcome@7417 | 3559 | </dl> |
howcome@7417 | 3560 | <!-- |
howcome@7417 | 3561 | <h3>Pull-quotes</h3> |
howcome@7417 | 3562 | |
howcome@7417 | 3563 | <div class=example> |
howcome@7417 | 3564 | <img width=213 src="exclusion_wrap_side_left.png"> |
howcome@7417 | 3565 | |
howcome@7417 | 3566 | <pre> |
howcome@7417 | 3567 | .pullquote { |
howcome@7417 | 3568 | float: right; |
howcome@7417 | 3569 | float-offset: 5em; |
howcome@7417 | 3570 | } |
howcome@7417 | 3571 | </pre> |
howcome@7417 | 3572 | |
howcome@7417 | 3573 | <pre> |
howcome@7417 | 3574 | .pullquote { |
howcome@7417 | 3575 | float: right; |
howcome@7417 | 3576 | float-offset: 50%; |
howcome@7417 | 3577 | } |
howcome@7417 | 3578 | </pre> |
howcome@7417 | 3579 | |
howcome@7417 | 3580 | |
howcome@7417 | 3581 | </div> |
howcome@7417 | 3582 | |
howcome@7417 | 3583 | <div class=example> |
howcome@7417 | 3584 | <p><img width=213 src="exclusion_wrap_side_right.png"> |
howcome@7417 | 3585 | |
howcome@7417 | 3586 | <pre> |
howcome@7417 | 3587 | .pullquote { |
howcome@7417 | 3588 | float: left; |
howcome@7417 | 3589 | float-offset: 5em; |
howcome@7417 | 3590 | } |
howcome@7417 | 3591 | </pre> |
howcome@7417 | 3592 | |
howcome@7417 | 3593 | <pre> |
howcome@7417 | 3594 | .pullquote { |
howcome@7417 | 3595 | float: left; |
howcome@7417 | 3596 | float-offset: 50%; |
howcome@7417 | 3597 | } |
howcome@7417 | 3598 | </pre> |
howcome@7417 | 3599 | |
howcome@7417 | 3600 | <pre> |
howcome@7417 | 3601 | .pullquote { |
howcome@7417 | 3602 | float: center; |
howcome@7417 | 3603 | clear-side: left; |
howcome@7417 | 3604 | } |
howcome@7417 | 3605 | </pre> |
howcome@7417 | 3606 | |
howcome@7417 | 3607 | </div> |
howcome@7417 | 3608 | |
howcome@7417 | 3609 | <pre> |
howcome@7417 | 3610 | .pullquote { |
howcome@7417 | 3611 | float: left; |
howcome@7417 | 3612 | float-offset: 50%; /* center */ |
howcome@7417 | 3613 | } |
howcome@7417 | 3614 | </pre> |
howcome@7417 | 3615 | |
howcome@7417 | 3616 | --> |
howcome@7417 | 3617 | |
howcome@7417 | 3618 | <div class=example> <img src="exclusion_wrap_side_both.png" width=213> <!-- |
howcome@7417 | 3619 | <pre> |
howcome@7417 | 3620 | .pullquote { |
simon@7435 | 3621 | float: center; |
howcome@7417 | 3622 | clear-side: none; |
howcome@7417 | 3623 | } |
howcome@7417 | 3624 | </pre> |
howcome@7417 | 3625 | --> |
howcome@7417 | 3626 | |
howcome@7417 | 3627 | <pre> |
howcome@7417 | 3628 | .pullquote { |
howcome@7417 | 3629 | float: left; |
howcome@7417 | 3630 | float-offset: 50%; |
howcome@7417 | 3631 | clear-side: none; |
howcome@7417 | 3632 | } |
howcome@7417 | 3633 | </pre> |
howcome@7417 | 3634 | <!-- |
howcome@7417 | 3635 | <pre> |
howcome@7417 | 3636 | .pullquote { |
howcome@7417 | 3637 | float: positioned; |
howcome@7417 | 3638 | left: 5em; |
simon@7435 | 3639 | clear-side: none; |
howcome@7417 | 3640 | } |
howcome@7417 | 3641 | </pre> |
howcome@7417 | 3642 | |
howcome@7417 | 3643 | <pre> |
howcome@7417 | 3644 | .pullquote { |
howcome@7417 | 3645 | float: center; |
howcome@7417 | 3646 | } |
howcome@7417 | 3647 | </pre> |
howcome@7417 | 3648 | --></div> |
howcome@7417 | 3649 | |
howcome@7417 | 3650 | <h3 id=exclusions-based-on-images><span class=secno>14.4. </span>Exclusions |
howcome@7417 | 3651 | based on images</h3> |
howcome@7417 | 3652 | |
howcome@7417 | 3653 | <p>Exclusions are often based on shapes found in images. In this |
howcome@7417 | 3654 | specification, background image can carry the shape, around which text is |
howcome@7417 | 3655 | wrapped. The new property ‘<code |
howcome@7417 | 3656 | class=property>background-exclude-level</code>’ indicates a level in the |
howcome@7417 | 3657 | alpha channel of the background image(s) that defines the shape. |
howcome@7417 | 3658 | |
howcome@7417 | 3659 | <div class=example> |
howcome@7417 | 3660 | <p>Here is an example that uses the background of the multicol element as |
howcome@7417 | 3661 | a template for exclusions. <img src=car1.jpg> |
howcome@7417 | 3662 | |
howcome@7417 | 3663 | <pre> |
howcome@7417 | 3664 | article { |
howcome@7417 | 3665 | padding: 4em; |
howcome@7417 | 3666 | columns: 15em; |
howcome@7417 | 3667 | background: url(nicecar.jpg); |
howcome@7417 | 3668 | background-exclude-level: 0.5; |
simon@7435 | 3669 | } |
howcome@7417 | 3670 | article h1 { column-span: all } /* Bonneville Speedway */ |
howcome@7417 | 3671 | </pre> |
howcome@7417 | 3672 | </div> |
howcome@7417 | 3673 | |
howcome@7417 | 3674 | <div class=example> |
howcome@7417 | 3675 | <p>This example is the same as the above, just with changed column widths. |
howcome@7417 | 3676 | <img src=car2.jpg> |
howcome@7417 | 3677 | |
howcome@7417 | 3678 | <pre> |
howcome@7417 | 3679 | article { |
howcome@7417 | 3680 | padding: 4em; |
howcome@7417 | 3681 | columns: 6em; |
howcome@7417 | 3682 | background: url(nicecar.jpg); |
howcome@7417 | 3683 | background-exclude-level: 0.5; |
simon@7435 | 3684 | } |
howcome@7417 | 3685 | article h1 { column-span: all } /* Bonneville Speedway */ |
howcome@7417 | 3686 | </pre> |
howcome@7417 | 3687 | </div> |
howcome@7417 | 3688 | |
howcome@7417 | 3689 | <p>Background images can be repeated. Therefore exclusions based on images |
howcome@7417 | 3690 | can be repeated. |
howcome@7417 | 3691 | |
howcome@7417 | 3692 | <div class=example> <img src="exclusions_repeating.jpg"> |
howcome@7417 | 3693 | <pre> |
howcome@7417 | 3694 | article { |
howcome@7417 | 3695 | background: repeat-y url(zigzag.png); |
howcome@7417 | 3696 | background-exclude-level: 0.5; |
howcome@7417 | 3697 | } |
howcome@7417 | 3698 | article h1 { |
howcome@7417 | 3699 | column-span: all; |
howcome@7417 | 3700 | } |
howcome@7417 | 3701 | </pre> |
howcome@7417 | 3702 | </div> |
howcome@7417 | 3703 | |
howcome@7417 | 3704 | <h3 id=exclusions-based-on-rendered-content><span class=secno>14.5. |
howcome@7417 | 3705 | </span>Exclusions based on rendered content</h3> |
howcome@7417 | 3706 | |
howcome@7417 | 3707 | <p>A new property. ‘<code class=property>exclude-level</code>’, is |
howcome@7417 | 3708 | introduced to allow wraps around the rendered content of the element. |
howcome@7417 | 3709 | |
howcome@7417 | 3710 | <div class=example> <img src=exclusions-dropcap.png> |
howcome@7417 | 3711 | <pre> |
howcome@7417 | 3712 | #dropcaps { |
howcome@7417 | 3713 | font-size: 3em; |
howcome@7417 | 3714 | float: left; |
howcome@7417 | 3715 | exclude-level: 0.5; |
howcome@7417 | 3716 | margin-top: -0.2em; |
howcome@7417 | 3717 | } |
howcome@7417 | 3718 | <p><span id="dropcaps">Many</span> instances ...</p> |
howcome@7417 | 3719 | <p>The text ....</p> |
howcome@7417 | 3720 | </pre> |
howcome@7417 | 3721 | </div> |
howcome@7417 | 3722 | |
howcome@7417 | 3723 | <p class=issue>Define behavior if both ‘<code |
howcome@7417 | 3724 | class=property>exclude-level</code>’ and ‘<code |
howcome@7417 | 3725 | class=property>background-exclude-level</code>’ is set. |
howcome@7417 | 3726 | |
howcome@7417 | 3727 | <p class=issue>Some kind of spacing behavior must be defined; ‘<code |
howcome@7417 | 3728 | class=property>exclude-margin</code>’ may be an option. |
howcome@7417 | 3729 | |
howcome@7417 | 3730 | <p class=issue>Define behavior if both ‘<code |
howcome@7417 | 3731 | class=property>exclude-level</code>’ and ‘<code |
howcome@7417 | 3732 | class=property>background-exclude-level</code>’ is set. |
howcome@7417 | 3733 | |
howcome@7417 | 3734 | <h3 id=exclusions-based-on-shapes><span class=secno>14.6. </span>Exclusions |
howcome@7417 | 3735 | based on shapes</h3> |
howcome@7417 | 3736 | |
howcome@7417 | 3737 | <p class=issue>I suggest not having exclusions based in shapes in the first |
howcome@7417 | 3738 | generation of exclusions; we may want to definde shapes for CSS in general |
howcome@7417 | 3739 | (e.g., for borders), so we may want to wait until we have a holistic |
howcome@7417 | 3740 | approach. |
howcome@7417 | 3741 | |
howcome@7417 | 3742 | <div class=example> <img src=heart1.png> |
howcome@7417 | 3743 | <pre> |
howcome@7417 | 3744 | article::column(1) { |
howcome@7417 | 3745 | content-inside: circle(50%, 50%, 30%); |
howcome@7417 | 3746 | } |
howcome@7417 | 3747 | |
howcome@7417 | 3748 | article::column(2) { |
howcome@7417 | 3749 | content-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn); |
howcome@7417 | 3750 | color: red; |
howcome@7417 | 3751 | } |
howcome@7417 | 3752 | </pre> |
howcome@7417 | 3753 | </div> |
howcome@7417 | 3754 | |
howcome@7417 | 3755 | <div class=example> <img src=heart2.png> |
howcome@7417 | 3756 | <pre> |
howcome@7417 | 3757 | article::column(1) { |
howcome@7417 | 3758 | content-outside: circle(x, y, z); |
howcome@7417 | 3759 | } |
howcome@7417 | 3760 | article::column(2) { |
howcome@7417 | 3761 | content-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn); |
howcome@7417 | 3762 | } |
howcome@7417 | 3763 | </pre> |
howcome@7417 | 3764 | </div> |
howcome@7417 | 3765 | <!-- |
howcome@7417 | 3766 | <h2>Aligning baselines in multi-column layouts</h2> |
howcome@7417 | 3767 | |
howcome@7417 | 3768 | <p>In multi-column layouts, baselines are typically aligned between |
howcome@7417 | 3769 | adjacent columns. This gives the presentation a visual rythm, and text |
howcome@7417 | 3770 | in the end of the columns will be alignend. To support this, a new |
howcome@7417 | 3771 | value on the <span class=property>'line-box-contain'</span> property is |
howcome@7417 | 3772 | defined: ''line-grid'' (or, perhaps, ''gap'', ''crack'', ''snap'', ''snap-gap'', ''void'', ''grid'', ''snap-to-grid''). |
howcome@7417 | 3773 | |
howcome@7417 | 3774 | <p>The value means that the height of the line in which the element |
howcome@7417 | 3775 | occurs should be rounded up to the smallest multiple of the used |
howcome@7417 | 3776 | 'line-height' value on the containing block. |
howcome@7417 | 3777 | |
howcome@7417 | 3778 | <div class=example> |
howcome@7417 | 3779 | <p>In this example, the stacking height of div.figure would be 30px (2 * 15px) |
howcome@7417 | 3780 | |
howcome@7417 | 3781 | <pre> |
howcome@7417 | 3782 | div.multicol { line-height: 15px } |
howcome@7417 | 3783 | div.figure { height: 20px; line-box-contain: block inline replaced line-grid } |
howcome@7417 | 3784 | </pre> |
howcome@7417 | 3785 | </div> |
howcome@7417 | 3786 | |
howcome@7417 | 3787 | <p class=note>The <a href="http://dev.w3.org/csswg/css3-linebox/#LineStacking">line-box-contain</a> property is defined in <a href="http://dev.w3.org/csswg/css3-linebox">CSS3 module: line</a>. |
howcome@7417 | 3788 | --> |
howcome@7417 | 3789 | <!-- |
howcome@7417 | 3790 | http://www.w3.org/Style/Group/css3-src/css3-linebox/Overview.html#LineStacking |
howcome@7417 | 3791 | --> |
howcome@7417 | 3792 | <!-- |
howcome@7417 | 3793 | <p class=note>A similar idea — 'line-stacking-strategy: grid-height' — was proposed in a <a href="http://www.w3.org/TR/css3-linebox/#line-stacking-strategy">previous version of the CSS3 line module</a>. The 'line-stacking-strategy' property is <a href="http://www.w3.org/TR/xsl/#line-stacking-strategy">used in XSL</a>. |
howcome@7417 | 3794 | --> |
howcome@7417 | 3795 | |
howcome@7417 | 3796 | <h2 id=regions><span class=secno>15. </span>Regions</h2> |
howcome@7417 | 3797 | |
howcome@7417 | 3798 | <p>Regions are series of stylable boxes into which content can be poured. |
howcome@7417 | 3799 | Columns are regions that are automatically generated to contain all the |
howcome@7417 | 3800 | content of the the multicol element. By adding selectors for columns, |
howcome@7417 | 3801 | columns can be styled and positioned and thereby escape the rigid patterns |
howcome@7417 | 3802 | that columns naturally live in. |
howcome@7417 | 3803 | |
howcome@7417 | 3804 | <div class=example> |
howcome@7417 | 3805 | <pre> |
howcome@7417 | 3806 | div.chapter::column(3) /* the 3rd column of the element */ |
howcome@7417 | 3807 | div.chapter::column(2n) /* all even columns of the element */ |
howcome@7417 | 3808 | div.chapter::column(3+) /* all columns but the 1st and 2nd */ |
howcome@7417 | 3809 | div.chapter::column(2,2) /* second column on second page */ |
howcome@7417 | 3810 | div.chapter::column(*,2) /* all columns on the second page */ |
howcome@7417 | 3811 | div.chapter::column(1,*) /* the first column on all pages */ |
howcome@7417 | 3812 | </pre> |
howcome@7417 | 3813 | </div> |
howcome@7417 | 3814 | |
howcome@7417 | 3815 | <p>To underline the fact that columns are regions, the "region" keyword can |
howcome@7417 | 3816 | be used as a substitute for "column". |
howcome@7417 | 3817 | |
howcome@7417 | 3818 | <div class=example> |
howcome@7417 | 3819 | <pre> |
howcome@7417 | 3820 | div.chapter::region(3) /* the 3rd region of the element */ |
howcome@7417 | 3821 | div.chapter::region(2n) /* all even regions of the element */ |
howcome@7417 | 3822 | div.chapter::region(3+) /* all regions but the 1st and 2nd */ |
howcome@7417 | 3823 | div.chapter::region(2,2) /* second region on second page */ |
howcome@7417 | 3824 | div.chapter::region(*,2) /* all regions on the second page */ |
howcome@7417 | 3825 | div.chapter::region(1,*) /* the first column on all pages */ |
howcome@7417 | 3826 | </pre> |
howcome@7417 | 3827 | </div> |
howcome@7417 | 3828 | |
howcome@7417 | 3829 | <div class=example> <img alt="sample rendering" src=regions.png> |
howcome@7417 | 3830 | <p>In this example, the multicol layout is changed so that the image |
howcome@7417 | 3831 | (which appears first in the markup) spans two columns and is floated to |
howcome@7417 | 3832 | the top, thereby escaping its natural column. The first column, which |
howcome@7417 | 3833 | holds the start of the textual content is also floated to the top, |
howcome@7417 | 3834 | spanning two columns, and therefore ends up just under the image. When |
howcome@7417 | 3835 | the first column/region is floated away, the second column will move into |
howcome@7417 | 3836 | its space. |
howcome@7417 | 3837 | |
howcome@7417 | 3838 | <pre> |
howcome@7417 | 3839 | article { columns: 3 } |
howcome@7417 | 3840 | img { column-span: 2; width: 100%; float: top } |
howcome@7417 | 3841 | article::region(1) { /* selects column 1 */ |
howcome@7417 | 3842 | column-span: 2; |
howcome@7417 | 3843 | float: top; |
howcome@7417 | 3844 | height: 3em; /* sets preferred height of region */ |
simon@7435 | 3845 | } |
howcome@7417 | 3846 | |
howcome@7417 | 3847 | <article> |
howcome@7417 | 3848 | <img ...> |
howcome@7417 | 3849 | <p>... <p>... <p>... |
howcome@7417 | 3850 | </article> |
howcome@7417 | 3851 | </pre> |
howcome@7417 | 3852 | </div> |
howcome@7417 | 3853 | |
howcome@7417 | 3854 | <div class=example> |
howcome@7417 | 3855 | <pre> |
howcome@7417 | 3856 | div.chapter::region(1) { |
howcome@7417 | 3857 | transform: rotate(6.5deg); |
howcome@7417 | 3858 | } |
simon@7435 | 3859 | div.chapter::region(2) { |
howcome@7417 | 3860 | transform: rotate(-5.5deg) translate(0, 40px); |
howcome@7417 | 3861 | } |
howcome@7417 | 3862 | </pre> |
howcome@7417 | 3863 | <img src="regions_rotated_columns.jpg"></div> |
howcome@7417 | 3864 | <!-- |
howcome@7417 | 3865 | <div class=example> |
howcome@7417 | 3866 | Consider this markup: |
howcome@7417 | 3867 | |
howcome@7417 | 3868 | <pre> |
howcome@7417 | 3869 | <div class=text> |
howcome@7417 | 3870 | <div lang=en> |
howcome@7417 | 3871 | Some words in English ... |
howcome@7417 | 3872 | </div> |
howcome@7417 | 3873 | <div lang=fr> |
howcome@7417 | 3874 | Quelques mots en Francaise... |
howcome@7417 | 3875 | </div> |
howcome@7417 | 3876 | </div> |
howcome@7417 | 3877 | </pre> |
howcome@7417 | 3878 | |
howcome@7417 | 3879 | <p>Here is the CSS code to lay these out into two columns with |
howcome@7417 | 3880 | different background colors: |
howcome@7417 | 3881 | |
howcome@7417 | 3882 | <pre> |
howcome@7417 | 3883 | div.text { |
howcome@7417 | 3884 | columns: 32em; |
howcome@7417 | 3885 | } |
howcome@7417 | 3886 | |
howcome@7417 | 3887 | div:lang(en) { |
howcome@7417 | 3888 | display: table-cell; |
howcome@7417 | 3889 | color: black; background: white; |
howcome@7417 | 3890 | } |
howcome@7417 | 3891 | |
howcome@7417 | 3892 | div:lang(fr) { |
howcome@7417 | 3893 | display: table-cell; |
howcome@7417 | 3894 | color: white; background: black; |
howcome@7417 | 3895 | } |
howcome@7417 | 3896 | </pre> |
howcome@7417 | 3897 | |
howcome@7417 | 3898 | <p>This example shows that use cases that first seem to require regions may be achieved with other methods. |
howcome@7417 | 3899 | |
howcome@7417 | 3900 | </div> |
howcome@7417 | 3901 | --> |
howcome@7417 | 3902 | <!-- |
howcome@7417 | 3903 | <div class=example> |
howcome@7417 | 3904 | <pre> |
howcome@7417 | 3905 | article { columns: 14em; } |
simon@7435 | 3906 | article::column(1) { |
simon@7435 | 3907 | position: absolute; |
howcome@7417 | 3908 | font-size: 1.2em; |
howcome@7417 | 3909 | visibility: collapse; /* makes space available others to use */ |
howcome@7417 | 3910 | ... |
howcome@7417 | 3911 | } |
howcome@7417 | 3912 | </pre> |
howcome@7417 | 3913 | </div> |
howcome@7417 | 3914 | --> |
howcome@7417 | 3915 | |
howcome@7417 | 3916 | <h2 id=regions-and-exclusions-examples><span class=secno>16. </span>Regions |
howcome@7417 | 3917 | and Exclusions examples</h2> |
howcome@7417 | 3918 | |
howcome@7417 | 3919 | <div class=example> <img src="exclusion_ordering.png"> |
howcome@7417 | 3920 | <pre> |
howcome@7417 | 3921 | article { |
howcome@7417 | 3922 | columns: 15em; |
howcome@7417 | 3923 | } |
howcome@7417 | 3924 | article::region(1-3) { |
howcome@7417 | 3925 | width: 15em; |
howcome@7417 | 3926 | height: 15em; |
howcome@7417 | 3927 | } |
howcome@7417 | 3928 | article::region(2-3) { |
howcome@7417 | 3929 | margin: 4em 0 0 -4em; |
howcome@7417 | 3930 | } |
howcome@7417 | 3931 | </pre> |
howcome@7417 | 3932 | </div> |
howcome@7417 | 3933 | |
howcome@7417 | 3934 | <div class=example> <img src="exclusion_ordering_z_order.png"> |
howcome@7417 | 3935 | <pre> |
howcome@7417 | 3936 | article { |
howcome@7417 | 3937 | columns: 15em; |
howcome@7417 | 3938 | } |
howcome@7417 | 3939 | acticle::region(1-3) { |
howcome@7417 | 3940 | height: 15em; |
howcome@7417 | 3941 | } |
howcome@7417 | 3942 | acticle::region(2-3) { |
howcome@7417 | 3943 | margin: 4em 0 0 -4em; |
howcome@7417 | 3944 | } |
howcome@7417 | 3945 | acticle::region(2) { |
howcome@7417 | 3946 | z-index: 1; |
howcome@7417 | 3947 | } |
howcome@7417 | 3948 | </pre> |
howcome@7417 | 3949 | </div> |
howcome@7417 | 3950 | |
howcome@7417 | 3951 | <h2 id=selecting-pages><span class=secno>17. </span>Selecting pages</h2> |
howcome@7417 | 3952 | |
howcome@7417 | 3953 | <p>In CSS 2.0, <a |
howcome@7417 | 3954 | href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and |
howcome@7417 | 3955 | right pages</a> can be selected. This specification adds support for |
howcome@7417 | 3956 | selecting a certain page generate by a certain element. |
howcome@7417 | 3957 | |
howcome@7417 | 3958 | <p>The ‘<code class=property>first-page</code>’ pseudo-element is |
howcome@7417 | 3959 | similar to the ‘<code class=property>first-letter</code>’ and ‘<code |
howcome@7417 | 3960 | class=property>first-line</code>’ elements; it is used to apply styling |
howcome@7417 | 3961 | to the part of an element that ends up on the starting page for that |
howcome@7417 | 3962 | element. If the whole element appears on the starting page, ‘<code |
howcome@7417 | 3963 | class=property>first-page</code>’ applies to the whole element. The |
howcome@7417 | 3964 | following properties apply to :first-page pseudo-elements: column |
howcome@7417 | 3965 | properties, background properties, margin properties, border properties, |
howcome@7417 | 3966 | and padding properties. UAs may apply other properties as well. |
howcome@7417 | 3967 | |
howcome@7417 | 3968 | <div class=example> |
howcome@7417 | 3969 | <p>In this example, there will be one column on the starting page of each |
howcome@7417 | 3970 | chapter, while subsequent pages will have two columns: |
howcome@7417 | 3971 | |
howcome@7417 | 3972 | <pre> |
howcome@7417 | 3973 | div.chapter { columns: 2 } |
howcome@7417 | 3974 | div.chapter::first-page { columns: 1 } |
howcome@7417 | 3975 | </pre> |
howcome@7417 | 3976 | </div> |
howcome@7417 | 3977 | |
howcome@7417 | 3978 | <div class=example> |
howcome@7417 | 3979 | <p>In this example, padding is added on the left side on the starting page |
howcome@7417 | 3980 | of each chapter: |
howcome@7417 | 3981 | |
howcome@7417 | 3982 | <pre> |
howcome@7417 | 3983 | div.chapter { break-before: left } |
howcome@7417 | 3984 | div.chapter::first-page { padding-left: 4em } |
howcome@7417 | 3985 | </pre> |
howcome@7417 | 3986 | </div> |
howcome@7417 | 3987 | |
howcome@7417 | 3988 | <p>As a generalization of the ‘<code class=property>first-page</code>’ |
howcome@7417 | 3989 | pseudo-element, the ‘<code class=css>page()</code>’ pseudo-selector |
howcome@7417 | 3990 | allows other pages to be selected. |
howcome@7417 | 3991 | |
howcome@7417 | 3992 | <div class=example> |
howcome@7417 | 3993 | <pre> |
howcome@7417 | 3994 | div.chapter::page(2) /* second page of the element */ |
howcome@7417 | 3995 | div.chapter::page(2n) /* even pages of the element */ |
howcome@7417 | 3996 | div.chapter::page(2-4) /* select page 2, 3, and 4 */ |
howcome@7417 | 3997 | div.chapter::page(2)::column(2) /* second column, but only if it appears on the second page */ |
howcome@7417 | 3998 | </pre> |
howcome@7417 | 3999 | </div> |
howcome@7417 | 4000 | <!-- |
simon@7435 | 4001 | nth page in the document, or the nth named page. |
howcome@7417 | 4002 | |
howcome@7417 | 4003 | |
howcome@7417 | 4004 | <div class=example> |
howcome@7417 | 4005 | <p>This example sets the background color of the second page in the document: |
howcome@7417 | 4006 | |
howcome@7417 | 4007 | <pre> |
simon@7435 | 4008 | @page :nth(2) { |
howcome@7417 | 4009 | background: green; |
howcome@7417 | 4010 | } |
howcome@7417 | 4011 | <pre> |
howcome@7417 | 4012 | </div> |
howcome@7417 | 4013 | |
howcome@7417 | 4014 | <div class=example> |
howcome@7417 | 4015 | <p>This example sets the background color of the second page of all chapters in a document: |
howcome@7417 | 4016 | |
howcome@7417 | 4017 | <pre> |
howcome@7417 | 4018 | @page chapter { |
howcome@7417 | 4019 | background: yellow; |
howcome@7417 | 4020 | } |
simon@7435 | 4021 | @page chapter:nth(2) { |
howcome@7417 | 4022 | background: green; |
howcome@7417 | 4023 | } |
howcome@7417 | 4024 | div.chapter { |
howcome@7417 | 4025 | page: chapter; |
howcome@7417 | 4026 | } |
howcome@7417 | 4027 | <pre> |
howcome@7417 | 4028 | </div> |
howcome@7417 | 4029 | |
howcome@7417 | 4030 | <p>The arguments to the nth() functional notation is the same as for the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child()</a> pseudo-class. |
howcome@7417 | 4031 | |
howcome@7417 | 4032 | <div class="example"> |
howcome@7417 | 4033 | <pre> |
simon@7435 | 4034 | @page chapter:nth(2n+1) { |
howcome@7417 | 4035 | background: green; |
howcome@7417 | 4036 | } |
howcome@7417 | 4037 | </pre> |
howcome@7417 | 4038 | </div> |
howcome@7417 | 4039 | |
howcome@7417 | 4040 | <p>Even when a named page is not defined through an <code>@page <em>name</em> { .. }</code> construct, the name can still be used with :nth(). |
howcome@7417 | 4041 | |
howcome@7417 | 4042 | <div class="example"> |
howcome@7417 | 4043 | <p>Even when the first line is commented out, the second page of all chapters in the document will be green. |
howcome@7417 | 4044 | |
howcome@7417 | 4045 | <pre> |
howcome@7417 | 4046 | /* @page chapter { ... } */ |
howcome@7417 | 4047 | |
howcome@7417 | 4048 | @page chapter:nth(2) { |
howcome@7417 | 4049 | background: green; |
howcome@7417 | 4050 | } |
howcome@7417 | 4051 | |
howcome@7417 | 4052 | div.chapter { page: chapter } |
howcome@7417 | 4053 | </pre> |
howcome@7417 | 4054 | </div> |
howcome@7417 | 4055 | |
howcome@7417 | 4056 | |
howcome@7417 | 4057 | <h3>Page pseudo-elements</h3> |
howcome@7417 | 4058 | |
howcome@7417 | 4059 | <p class=issue>This may no longer be needed du to generic page selectors |
howcome@7417 | 4060 | --> |
howcome@7417 | 4061 | |
howcome@7417 | 4062 | <h2 id=selecting-lines><span class=secno>18. </span>Selecting lines</h2> |
howcome@7417 | 4063 | |
howcome@7417 | 4064 | <p>The ‘<code class=property>first-line</code>’ pseudo-element selects |
howcome@7417 | 4065 | the first formatted line of an element. The ‘<code |
howcome@7417 | 4066 | class=css>first-lines(n)</code>’ pseudo-element selects the first n |
howcome@7417 | 4067 | formatted lines of an element. |
howcome@7417 | 4068 | |
howcome@7417 | 4069 | <div class=example> <img alt="sample rendering" src=regions.png> |
howcome@7417 | 4070 | <pre> |
howcome@7417 | 4071 | article { columns: 3 } |
howcome@7417 | 4072 | img, p.lead:first-lines(3) { |
howcome@7417 | 4073 | column-span: 2; |
howcome@7417 | 4074 | } |
howcome@7417 | 4075 | |
howcome@7417 | 4076 | <article> |
howcome@7417 | 4077 | <img> |
howcome@7417 | 4078 | <p class=lead> |
howcome@7417 | 4079 | <p>... <p>... <p>... <p>... <p>... |
howcome@7417 | 4080 | </article> |
howcome@7417 | 4081 | </pre> |
howcome@7417 | 4082 | </div> |
howcome@7417 | 4083 | |
howcome@7417 | 4084 | <h2 id=conditional-text><span class=secno>19. </span>Conditional text</h2> |
howcome@7417 | 4085 | |
howcome@7417 | 4086 | <div class=example> |
howcome@7417 | 4087 | <pre> |
howcome@7417 | 4088 | a:target-layout(attr(href url), same-page) { content: " on this page" } |
howcome@7417 | 4089 | a:target-layout(attr(href url), next-page) { content: " on the next page" } |
howcome@7417 | 4090 | a:target-layout(attr(href url), previous-page) { content: " on the previous page" } |
howcome@7417 | 4091 | </pre> |
howcome@7417 | 4092 | </div> |
howcome@7417 | 4093 | |
howcome@7417 | 4094 | <h2 id=conformance><span class=secno>20. </span>Conformance</h2> |
howcome@7417 | 4095 | |
howcome@7417 | 4096 | <p>TBD |
howcome@7417 | 4097 | |
howcome@7417 | 4098 | <h2 id=appendix-a-default-style-sheet><span class=secno>21. </span>Appendix |
howcome@7417 | 4099 | A: Default style sheet</h2> |
howcome@7417 | 4100 | |
howcome@7417 | 4101 | <pre> |
howcome@7417 | 4102 | @page { |
howcome@7417 | 4103 | counter-reset: footnote; |
howcome@7417 | 4104 | @footnote { |
howcome@7417 | 4105 | counter-increment: footnote; |
howcome@7417 | 4106 | float: page bottom; |
howcome@7417 | 4107 | width: 100%; |
howcome@7417 | 4108 | height: auto; |
howcome@7417 | 4109 | } |
howcome@7417 | 4110 | } |
howcome@7417 | 4111 | |
howcome@7417 | 4112 | ::footnote-call { |
howcome@7417 | 4113 | counter-increment: footnote; |
simon@7435 | 4114 | content: counter(footnote, super-decimal); |
howcome@7417 | 4115 | } |
howcome@7417 | 4116 | ::footnote-marker { |
simon@7435 | 4117 | content: counter(footnote, super-decimal); |
howcome@7417 | 4118 | } |
howcome@7417 | 4119 | |
howcome@7417 | 4120 | |
howcome@7417 | 4121 | h1 { bookmark-level: 1 } |
howcome@7417 | 4122 | h2 { bookmark-level: 2 } |
howcome@7417 | 4123 | h3 { bookmark-level: 3 } |
howcome@7417 | 4124 | h4 { bookmark-level: 4 } |
howcome@7417 | 4125 | h5 { bookmark-level: 5 } |
howcome@7417 | 4126 | h6 { bookmark-level: 6 } |
howcome@7417 | 4127 | </pre> |
howcome@7417 | 4128 | |
howcome@7417 | 4129 | <p class=issue>Add grammar for functions defined in this spec. |
howcome@7417 | 4130 | |
howcome@7417 | 4131 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
howcome@7417 | 4132 | |
howcome@7417 | 4133 | <p>This document has been improved by Bert Bos, Michael Day, Melinda Grant, |
howcome@7417 | 4134 | David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika Etemad, |
howcome@7417 | 4135 | Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly Miller, Werner |
howcome@7417 | 4136 | Donné, Tarquin (Mark) Wilton-Jones, Michel Fortin, Christian Roth, Brady |
howcome@7417 | 4137 | Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr., Jacob Grundtvig Refstrup, |
howcome@7417 | 4138 | James Elmore, Ian Tindale, Murakami Shinyu, Paul E. Merrell, Philip |
howcome@7417 | 4139 | Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek Çelik, Florian |
howcome@7417 | 4140 | Rivoal, Alex Mogilevsky, Simon Sapin, Cameron McCormack, Liam R E Quin, |
howcome@7421 | 4141 | Peter Moulder, Morten Stenshorne, Rune Lillesveen, Lars Erik Bolstad, |
howcome@7421 | 4142 | Anton Prowse, Michel Onoff |
howcome@7417 | 4143 | |
howcome@7417 | 4144 | <h2 class=no-num id=references>References</h2> |
howcome@7417 | 4145 | |
howcome@7417 | 4146 | <h3 class=no-num id=normative-references>Normative references</h3> |
howcome@7417 | 4147 | <!--begin-normative--> |
howcome@7417 | 4148 | <!-- Sorted by label --> |
howcome@7417 | 4149 | |
howcome@7417 | 4150 | <dl class=bibliography> |
howcome@7417 | 4151 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
howcome@7417 | 4152 | <!----> |
howcome@7417 | 4153 | |
howcome@7417 | 4154 | <dt id=CSS3LIST>[CSS3LIST] |
howcome@7417 | 4155 | |
howcome@7417 | 4156 | <dd>Tab Atkins Jr. <a |
howcome@7417 | 4157 | href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists |
howcome@7417 | 4158 | and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft. |
howcome@7417 | 4159 | (Work in progress.) URL: <a |
howcome@7417 | 4160 | href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a> |
howcome@7417 | 4161 | </dd> |
howcome@7417 | 4162 | <!----> |
howcome@7417 | 4163 | </dl> |
howcome@7417 | 4164 | <!--end-normative--> |
howcome@7417 | 4165 | |
howcome@7417 | 4166 | <h3 class=no-num id=other-references>Other references</h3> |
howcome@7417 | 4167 | <!--begin-informative--> |
howcome@7417 | 4168 | <!-- Sorted by label --> |
howcome@7417 | 4169 | |
howcome@7417 | 4170 | <dl class=bibliography> |
howcome@7417 | 4171 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
howcome@7417 | 4172 | <!----> |
howcome@7417 | 4173 | |
howcome@7417 | 4174 | <dt id=CSS2>[CSS2] |
howcome@7417 | 4175 | |
howcome@7417 | 4176 | <dd>Ian Jacobs; et al. <a |
howcome@7417 | 4177 | href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style |
howcome@7417 | 4178 | Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C |
howcome@7417 | 4179 | Recommendation. URL: <a |
howcome@7417 | 4180 | href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a> |
howcome@7417 | 4181 | </dd> |
howcome@7417 | 4182 | <!----> |
howcome@7417 | 4183 | |
howcome@7417 | 4184 | <dt id=CSS3PAGE>[CSS3PAGE] |
howcome@7417 | 4185 | |
howcome@7417 | 4186 | <dd>Håkon Wium Lie; Melinda Grant. <a |
howcome@7417 | 4187 | href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module: |
howcome@7417 | 4188 | Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in |
howcome@7417 | 4189 | progress.) URL: <a |
howcome@7417 | 4190 | href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a> |
howcome@7417 | 4191 | </dd> |
howcome@7417 | 4192 | <!----> |
howcome@7417 | 4193 | </dl> |
howcome@7417 | 4194 | <!--end-informative--> |
howcome@7417 | 4195 | |
howcome@7417 | 4196 | <h2 class=no-num id=index>Index</h2> |
howcome@7417 | 4197 | <!--begin-index--> |
howcome@7417 | 4198 | |
howcome@7417 | 4199 | <ul class=indexlist> |
howcome@7417 | 4200 | <li>bleed, <a href="#bleed" title="section 6."><strong>6.</strong></a> |
howcome@7417 | 4201 | |
howcome@7417 | 4202 | <li>bookmark-label, <a href="#bookmark-label0" |
howcome@7417 | 4203 | title="section 7.2."><strong>7.2.</strong></a> |
howcome@7417 | 4204 | |
howcome@7417 | 4205 | <li>bookmark-level, <a href="#bookmark-level0" |
howcome@7417 | 4206 | title="section 7.1."><strong>7.1.</strong></a> |
howcome@7417 | 4207 | |
howcome@7417 | 4208 | <li>bookmark-state, <a href="#bookmark-state0" |
howcome@7417 | 4209 | title="section 7.3."><strong>7.3.</strong></a> |
howcome@7417 | 4210 | |
howcome@7417 | 4211 | <li>clear-side, <a href="#clear-side" |
howcome@7417 | 4212 | title="section 14.3."><strong>14.3.</strong></a> |
howcome@7417 | 4213 | |
howcome@7417 | 4214 | <li>float-offset, <a href="#float-offset" |
howcome@7417 | 4215 | title="section 14.2."><strong>14.2.</strong></a> |
howcome@7417 | 4216 | |
howcome@7417 | 4217 | <li>marks, <a href="#marks" title="section 6."><strong>6.</strong></a> |
howcome@7417 | 4218 | |
howcome@7417 | 4219 | <li>named strings, <a href="#named-strings0" |
howcome@7417 | 4220 | title="section 2."><strong>2.</strong></a> |
howcome@7417 | 4221 | |
howcome@7417 | 4222 | <li>running elements, <a href="#running-elements0" |
howcome@7417 | 4223 | title="section 2."><strong>2.</strong></a> |
howcome@7417 | 4224 | |
howcome@7417 | 4225 | <li>string-set, <a href="#string-set" |
howcome@7417 | 4226 | title="section 2.1.1."><strong>2.1.1.</strong></a> |
howcome@7417 | 4227 | </ul> |
howcome@7417 | 4228 | <!--end-index--> |
howcome@7417 | 4229 | |
howcome@7417 | 4230 | <h2 class=no-num id=property-index>Property index</h2> |
howcome@7417 | 4231 | <!--begin-properties--> |
howcome@7417 | 4232 | |
howcome@7417 | 4233 | <table class=proptable> |
howcome@7417 | 4234 | <thead> |
howcome@7417 | 4235 | <tr> |
howcome@7417 | 4236 | <th>Property |
howcome@7417 | 4237 | |
howcome@7417 | 4238 | <th>Values |
howcome@7417 | 4239 | |
howcome@7417 | 4240 | <th>Initial |
howcome@7417 | 4241 | |
howcome@7417 | 4242 | <th>Applies to |
howcome@7417 | 4243 | |
howcome@7417 | 4244 | <th>Inh. |
howcome@7417 | 4245 | |
howcome@7417 | 4246 | <th>Percentages |
howcome@7417 | 4247 | |
howcome@7417 | 4248 | <th>Media |
howcome@7417 | 4249 | |
howcome@7417 | 4250 | <tbody> |
howcome@7417 | 4251 | <tr> |
howcome@7417 | 4252 | <th><a class=property href="#bleed">bleed</a> |
howcome@7417 | 4253 | |
howcome@7417 | 4254 | <td><length> |
howcome@7417 | 4255 | |
howcome@7417 | 4256 | <td>6pt |
howcome@7417 | 4257 | |
howcome@7417 | 4258 | <td>page context |
howcome@7417 | 4259 | |
howcome@7417 | 4260 | <td>no |
howcome@7417 | 4261 | |
howcome@7417 | 4262 | <td>refer to width of page box |
howcome@7417 | 4263 | |
howcome@7417 | 4264 | <td>visual |
howcome@7417 | 4265 | |
howcome@7417 | 4266 | <tr> |
howcome@7417 | 4267 | <th><a class=property href="#bookmark-label0">bookmark-label</a> |
howcome@7417 | 4268 | |
howcome@7417 | 4269 | <td><content-list> | none |
howcome@7417 | 4270 | |
howcome@7417 | 4271 | <td>none |
howcome@7417 | 4272 | |
howcome@7417 | 4273 | <td>all elements |
howcome@7417 | 4274 | |
howcome@7417 | 4275 | <td>no |
howcome@7417 | 4276 | |
howcome@7417 | 4277 | <td>N/A |
howcome@7417 | 4278 | |
howcome@7417 | 4279 | <td>all |
howcome@7417 | 4280 | |
howcome@7417 | 4281 | <tr> |
howcome@7417 | 4282 | <th><a class=property href="#bookmark-level0">bookmark-level</a> |
howcome@7417 | 4283 | |
howcome@7417 | 4284 | <td>none | <integer> |
howcome@7417 | 4285 | |
howcome@7417 | 4286 | <td>none |
howcome@7417 | 4287 | |
howcome@7417 | 4288 | <td>all elements |
howcome@7417 | 4289 | |
howcome@7417 | 4290 | <td>no |
howcome@7417 | 4291 | |
howcome@7417 | 4292 | <td>N/A |
howcome@7417 | 4293 | |
howcome@7417 | 4294 | <td>all |
howcome@7417 | 4295 | |
howcome@7417 | 4296 | <tr> |
howcome@7417 | 4297 | <th><a class=property href="#bookmark-state0">bookmark-state</a> |
howcome@7417 | 4298 | |
howcome@7417 | 4299 | <td>open | closed |
howcome@7417 | 4300 | |
howcome@7417 | 4301 | <td>open |
howcome@7417 | 4302 | |
howcome@7417 | 4303 | <td>block-level elements |
howcome@7417 | 4304 | |
howcome@7417 | 4305 | <td>no |
howcome@7417 | 4306 | |
howcome@7417 | 4307 | <td>N/A |
howcome@7417 | 4308 | |
howcome@7417 | 4309 | <td>all |
howcome@7417 | 4310 | |
howcome@7417 | 4311 | <tr> |
howcome@7417 | 4312 | <th><a class=property href="#clear-side">clear-side</a> |
howcome@7417 | 4313 | |
howcome@7417 | 4314 | <td>auto | both |
howcome@7417 | 4315 | |
howcome@7417 | 4316 | <td>auto |
howcome@7417 | 4317 | |
howcome@7417 | 4318 | <td>floated elements |
howcome@7417 | 4319 | |
howcome@7417 | 4320 | <td>no |
howcome@7417 | 4321 | |
howcome@7417 | 4322 | <td>N/A |
howcome@7417 | 4323 | |
howcome@7417 | 4324 | <td>visual, paged |
howcome@7417 | 4325 | |
howcome@7417 | 4326 | <tr> |
howcome@7417 | 4327 | <th><a class=property href="#float-offset">float-offset</a> |
howcome@7417 | 4328 | |
howcome@7417 | 4329 | <td><length> <length> ? |
howcome@7417 | 4330 | |
howcome@7417 | 4331 | <td>0 0 |
howcome@7417 | 4332 | |
howcome@7417 | 4333 | <td>floated elements |
howcome@7417 | 4334 | |
howcome@7417 | 4335 | <td>no |
howcome@7417 | 4336 | |
howcome@7417 | 4337 | <td>see prose |
howcome@7417 | 4338 | |
howcome@7417 | 4339 | <td>visual, paged |
howcome@7417 | 4340 | |
howcome@7417 | 4341 | <tr> |
howcome@7417 | 4342 | <th><a class=property href="#marks">marks</a> |
howcome@7417 | 4343 | |
howcome@7417 | 4344 | <td>[ crop || cross ] | none |
howcome@7417 | 4345 | |
howcome@7417 | 4346 | <td>none |
howcome@7417 | 4347 | |
howcome@7417 | 4348 | <td>page context |
howcome@7417 | 4349 | |
howcome@7417 | 4350 | <td>no |
howcome@7417 | 4351 | |
howcome@7417 | 4352 | <td>N/A |
howcome@7417 | 4353 | |
howcome@7417 | 4354 | <td>visual, paged |
howcome@7417 | 4355 | |
howcome@7417 | 4356 | <tr> |
howcome@7417 | 4357 | <th><a class=property href="#string-set">string-set</a> |
howcome@7417 | 4358 | |
howcome@7417 | 4359 | <td>[[ <identifier> <content-list>] [, <identifier> |
howcome@7417 | 4360 | <content-list>]* ] | none |
howcome@7417 | 4361 | |
howcome@7417 | 4362 | <td>none |
howcome@7417 | 4363 | |
howcome@7417 | 4364 | <td>all elements |
howcome@7417 | 4365 | |
howcome@7417 | 4366 | <td>no |
howcome@7417 | 4367 | |
howcome@7417 | 4368 | <td>N/A |
howcome@7417 | 4369 | |
howcome@7417 | 4370 | <td>all |
howcome@7417 | 4371 | </table> |
howcome@7417 | 4372 | <!--end-properties--> |