├── LICENSE
└── Overview.src.html
/LICENSE:
--------------------------------------------------------------------------------
1 | CC0 1.0 Universal
2 |
3 | Statement of Purpose
4 |
5 | The laws of most jurisdictions throughout the world automatically confer
6 | exclusive Copyright and Related Rights (defined below) upon the creator and
7 | subsequent owner(s) (each and all, an "owner") of an original work of
8 | authorship and/or a database (each, a "Work").
9 |
10 | Certain owners wish to permanently relinquish those rights to a Work for the
11 | purpose of contributing to a commons of creative, cultural and scientific
12 | works ("Commons") that the public can reliably and without fear of later
13 | claims of infringement build upon, modify, incorporate in other works, reuse
14 | and redistribute as freely as possible in any form whatsoever and for any
15 | purposes, including without limitation commercial purposes. These owners may
16 | contribute to the Commons to promote the ideal of a free culture and the
17 | further production of creative, cultural and scientific works, or to gain
18 | reputation or greater distribution for their Work in part through the use and
19 | efforts of others.
20 |
21 | For these and/or other purposes and motivations, and without any expectation
22 | of additional consideration or compensation, the person associating CC0 with a
23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
25 | and publicly distribute the Work under its terms, with knowledge of his or her
26 | Copyright and Related Rights in the Work and the meaning and intended legal
27 | effect of CC0 on those rights.
28 |
29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
30 | protected by copyright and related or neighboring rights ("Copyright and
31 | Related Rights"). Copyright and Related Rights include, but are not limited
32 | to, the following:
33 |
34 | i. the right to reproduce, adapt, distribute, perform, display, communicate,
35 | and translate a Work;
36 |
37 | ii. moral rights retained by the original author(s) and/or performer(s);
38 |
39 | iii. publicity and privacy rights pertaining to a person's image or likeness
40 | depicted in a Work;
41 |
42 | iv. rights protecting against unfair competition in regards to a Work,
43 | subject to the limitations in paragraph 4(a), below;
44 |
45 | v. rights protecting the extraction, dissemination, use and reuse of data in
46 | a Work;
47 |
48 | vi. database rights (such as those arising under Directive 96/9/EC of the
49 | European Parliament and of the Council of 11 March 1996 on the legal
50 | protection of databases, and under any national implementation thereof,
51 | including any amended or successor version of such directive); and
52 |
53 | vii. other similar, equivalent or corresponding rights throughout the world
54 | based on applicable law or treaty, and any national implementations thereof.
55 |
56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
59 | and Related Rights and associated claims and causes of action, whether now
60 | known or unknown (including existing as well as future claims and causes of
61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
62 | duration provided by applicable law or treaty (including future time
63 | extensions), (iii) in any current or future medium and for any number of
64 | copies, and (iv) for any purpose whatsoever, including without limitation
65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
66 | the Waiver for the benefit of each member of the public at large and to the
67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
68 | shall not be subject to revocation, rescission, cancellation, termination, or
69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
70 | by the public as contemplated by Affirmer's express Statement of Purpose.
71 |
72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
73 | judged legally invalid or ineffective under applicable law, then the Waiver
74 | shall be preserved to the maximum extent permitted taking into account
75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
77 | non transferable, non sublicensable, non exclusive, irrevocable and
78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
80 | provided by applicable law or treaty (including future time extensions), (iii)
81 | in any current or future medium and for any number of copies, and (iv) for any
82 | purpose whatsoever, including without limitation commercial, advertising or
83 | promotional purposes (the "License"). The License shall be deemed effective as
84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
85 | License for any reason be judged legally invalid or ineffective under
86 | applicable law, such partial invalidity or ineffectiveness shall not
87 | invalidate the remainder of the License, and in such case Affirmer hereby
88 | affirms that he or she will not (i) exercise any of his or her remaining
89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
90 | and causes of action with respect to the Work, in either case contrary to
91 | Affirmer's express Statement of Purpose.
92 |
93 | 4. Limitations and Disclaimers.
94 |
95 | a. No trademark or patent rights held by Affirmer are waived, abandoned,
96 | surrendered, licensed or otherwise affected by this document.
97 |
98 | b. Affirmer offers the Work as-is and makes no representations or warranties
99 | of any kind concerning the Work, express, implied, statutory or otherwise,
100 | including without limitation warranties of title, merchantability, fitness
101 | for a particular purpose, non infringement, or the absence of latent or
102 | other defects, accuracy, or the present or absence of errors, whether or not
103 | discoverable, all to the greatest extent permissible under applicable law.
104 |
105 | c. Affirmer disclaims responsibility for clearing rights of other persons
106 | that may apply to the Work or any use thereof, including without limitation
107 | any person's Copyright and Related Rights in the Work. Further, Affirmer
108 | disclaims responsibility for obtaining any necessary consents, permissions
109 | or other rights required for any use of the Work.
110 |
111 | d. Affirmer understands and acknowledges that Creative Commons is not a
112 | party to this document and has no duty or obligation with respect to this
113 | CC0 or use of the Work.
114 |
115 | For more information, please see
116 |
117 |
118 |
--------------------------------------------------------------------------------
/Overview.src.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSS Books
6 |
20 |
21 |
22 |
23 |
To the extent possible under law, the editor has waived all copyright and related or neighboring rights to this work. In addition, as of [DATE], the editor has made this specification available under the
50 | Open Web Foundation Agreement Version 1.0, which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
51 |
52 |
53 |
54 |
Abstract
55 |
56 |
This specification defines features often used when printing books or magazines. Using this functionality, documents written in HTML can be presented in a book-like manner, either on screen or on paper. Real books are being published with functionality described in this specification.
57 |
58 |
Status
59 |
60 |
This specification is in the process of establishing itself in WHATWG. Most of this specification has been interoperably implemented and is in daily use by publishers. Implementation coverage is documented here.
61 |
62 |
Table of Contents
63 |
64 |
65 |
66 |
67 |
Goals
68 |
69 |
The main goal of this specification is to enable authors to write books in HTML or other markup languages. Book publishing is a craft with long traditions and certain formatting conventions have developed over time. This specification adds functionality to CSS so that style sheets can express commonly used features in printed books, on-screen books, and page description languages. These features are also often used by magazines, in brochures, and in other publications.
70 |
71 |
72 |
Conformance
73 |
74 |
All diagrams, examples, and notes in this specification are
75 | non-normative, as are all sections explicitly marked non-normative.
76 | Everything else in this specification is normative.
77 |
78 |
The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
80 | "OPTIONAL" in the normative parts of this specification are to be
81 | interpreted as described in RFC2119. For readability, these words do
82 | not appear in all uppercase letters in this specification.
83 | RFC2119
84 |
85 |
Conformance requirements phrased as algorithms or specific steps
86 | may be implemented in any manner, so long as the end result is
87 | equivalent.
88 |
89 |
User agents may impose
90 | implementation-specific limits on otherwise unconstrained inputs,
91 | e.g. to prevent denial of service attacks, to guard against running
92 | out of memory, or to work around platform-specific limitations.
93 |
94 |
95 |
Introduction
96 |
97 |
A book is a collection of sheets, bound together within covers.
98 | Usually, the sheets are printed paper sheets of a uniform size. The
99 | book format, known as the codex was developed around 2000
100 | years ago and books gradually replaced scrolls, clay tablets and other
101 | competing formats. With the invention of the printing press, books
102 | could be printed and distributed inexpesively.
103 |
104 |
Each sheet of paper has two sides, and most books are have content
105 | on both sides of the sheets. Each side is called a "page". When a book
106 | is opened, two pages are visible; these form one "spread". The main
107 | problem when producing books from web content is to split content into
108 | pages and spreads of certain fixed sizes. This problem is not
109 | addressed by this specification. Instead, this specification describes
110 | how to achieve many of the features printers have developed over the
111 | centuries, e.g, running headers, footnotes, sidenotes, and page
112 | groups.
113 |
114 |
115 |
Running headers and footers
116 |
117 |
To aid navigation in printed material, headers and footers are often
118 | printed in the page margins. CSSPAGE describes how to place
119 | headers and footers on a page, but not how to fetch headers and
120 | footers from elements in the document. This specification offers two
121 | ways to achieve this. The first mechanism is named strings
122 | which copies the text (without style, structure, or replaced
123 | content) of an element for later reuse in margin boxes. The second
124 | mechanism is running elements which moves elements
125 | (with style, structure, and replaced content) into a margin box.
126 |
127 |
128 |
129 |
A named string can be thought of as a variable that hold a
146 | string of text. Named strings are created with the 'string-set'
147 | property which copies a string of text into a named string. Only text
148 | is copied; not style, structure, or replaced content.
149 |
150 |
Whenever an h1 element is encountered,
165 | its textual content is copied into a named string called
166 | heading. The string can later be retrieved in the 'content'
167 | property:
168 |
169 |
The 'string-set' property accepts a comma-separated list of named strings. Each named string is followed by a content list that specifies the text to assign to the named string. Whenever an element with value of 'string-set' different from ''none'' is encountered, the named strings are assigned their respective value. Implementations must keep track of named string assigments on a per-element basis; references to named strings can only be resolved after pagination (see Using named strings below).
206 |
207 |
<content-list> expands to one or more of these values, in any order:
208 |
209 |
The textual content of the element, not including the content of its ::before and ::after pseudo-element. The content of the element's descendants, including their respective ::before and ::after pseudo-elements, are included in the returned content. This is the default value, so ''content()'' is equivalent to ''content(text)''.
220 |
221 |
content(before)
222 |
223 |
The textual content of the ::before pseudo-element of the element.
224 |
225 |
content(after)
226 |
227 |
The textual content of the ::after pseudo-element of the element.
228 |
229 |
content(first-letter)
230 |
231 |
The first letter of the textual content of the element. The definition of a letter is the same as for the :first-letter pseudo-element, as per CSS 2.1 section 5.12.2.
232 |
233 |
Named strings can only hold the result of one assignment; whenever
242 | a new assignment is made to a named string, its old value is replaced.
243 |
244 |
User agents, however, must be able to remember the
245 | several assignments as the ''string()'' functional value
246 | (described below) can refer to different assignments.
247 |
248 |
The scope of a named string is the page of the element to which the
249 | 'string-set' property is attached and subsequent pages.
250 |
251 |
255 |
256 |
257 |
Note that the string called "header" is different from the counter with the same name. The above code may result in the string called "header" is set to "Chapter 1: Europa".
275 |
276 |
277 |
278 |
279 |
The textual content of the named string is processed as if 'white-space: normal' has been set.
280 |
281 |
Named strings can be referred to with the ''string()'' value on the
333 | 'content' property. The ''string()'' value has one required argument
334 | (the name of the string), and one optional argument that indicates
335 | which string assignment to use. References to named strings can only
336 | be resolved after pagination.
337 |
338 |
If the value of the named string is changed by an element on a certain
352 | page, the named string may have several values on that page. In order to specify
353 | which of these values should be used, an optional second argument is accepted
354 | on the ''string()'' value. This argument can have one of four keywords:
355 |
356 |
357 |
''first'': the value of the first assignment on the page is used. If there is no assignment on the page, the named string's entry value is used. The entry value is the value held by the string at the end of the previous page. ''first'' is the default value.
358 |
359 |
''start'': the value of the first assignment on the page is used if the element begins the page or the named string has not been assigned a value. Otherwise, the named string's entry value is used.
360 |
361 |
''last'': the named string's exit value is used
362 |
363 |
''first-except'': similar to ''first'', except on the page where the value was assigned. On that page, the empty string is used.
364 |
365 |
366 |
367 |
The syntax of the ''string()'' value is:
368 |
369 |
370 | string( <custom-ident> [ , [ first | start | last | first-except ]]? )
371 |
372 |
373 |
The assignment is considered to take place on the first page where a content box representing the element occurs. If the element does not have any content boxes (e.g., if 'display: none' is set), the assignment is considered to take place on the page where the first content box would have occured if the element had been in the normal flow.
374 |
375 |
376 |
In this example, the first term on the page will be shown in the top left corner and the last term on the page will be shown in the top right corner. In top center of the page, the first letter of first term will be shown.
377 |
In this example, the header in the top center will be blank on pages where 'h1' elements appear. On other pages, the string of the previous 'h1' element will be shown.
488 |
Named strings, as described above, can only hold textual content; any
508 | style, structure or replaced content associated with the element is
509 | ignored. To overcome this limitation, a way of moving elements into
510 | running headers and footers is introduced.
511 |
512 |
Elements that are moved into headers and footers are repeated on
513 | several pages; they are said to be running elements. To
514 | support running elements, a new value – running() – is
515 | introduced on the 'position' property. It has one required argument:
516 | the name by which the running element can be referred to. A running
517 | element is not shown in its natural place; there it is treated as if
518 | 'display: none' had been set. Instead, the running element is
519 | displayed when referred to by the ''element()'' value.
520 |
521 |
Like counters and named strings, the name of a running element is chosen by
522 | the style sheet author, and the names have a separate namespace. A
523 | running element can hold one element, including its pseudo-elements
524 | and its descendants. Whenever a new element is assigned to a running
525 | element, the old element is lost.
526 |
527 |
User agents, however, must be able to remember the
528 | result of more than one assignment as the ''element()'' value
529 | (described below) can refer to different assignments.
530 |
531 |
Running elements inherit through their normal place in the
532 | structure of the document.
533 |
534 |
535 |
Like the ''string()'' value, the ''element()'' value accepts an
559 | optional second argument. The syntax is defined as:
560 |
561 |
562 | element( <custom-ident> [ , [ first | start | last | first-except ]]? )
563 |
564 |
565 |
The keywords have the same meaning as for the ''string()'' value.
566 |
567 |
The ''element()'' value is only allowed on the 'content' property within a margin box. The ''element()'' value cannot be combined with any other values.
568 |
569 |
570 |
In this example, the header is hidden from view in all media types
571 | except print. On printed pages, the header is displayed top center on
572 | all pages, except where h1 elements appear.
573 |
574 |
This code illustrates how to change the running header on one page in the middle of a run of pages:
593 |
594 |
595 | ...
596 | <style>
597 | @page { @top-center {
598 | content: element(header, first) }}
599 | .header { position: running(header) }
600 | .once { font-weight: bold }
601 | </style>
602 | ...
603 | <div class="header">Not now</div>
604 | <p>Da di ha di da di ...
605 | <span class="header once">NOW!</span>
606 | <span class="header">Not now</span>
607 | ... da di ha di hum.</p>
608 | ...
609 |
610 |
611 | The header is "Not now" from the outset, due to the "div" element. The
612 | first "span" element changes it to "NOW!" on the page where the
613 | "span" element would have appeared. The second "span" element, which
614 | would have appeared on the same page as the first is not used because the
615 | ''first'' keyword has been specified. However, the second "span"
616 | element still sets the exit value for "header" and this value is
617 | used on subsequent pages.
618 |
A leader is a visual pattern that guides the eye. Typically,
632 | leaders are used to visually connect an entry in a list with a
633 | corresponding code. For example, there are often leaders between
634 | titles and page numbers in a table of contents (TOC). Another example
635 | is the phone book where there are leaders between a name and a
636 | telephone number.
637 |
638 |
In CSS3, a leader is composed of series of glyphs through the
639 | ''leader()'' value on the 'content' property. The functional notation
640 | accepts two values. The first describes the glyph pattern that makes up the
641 | leader. The syntax is:
642 |
643 |
Using the keyword values is equivalent to setting a string value.
648 | The table below shows the equivalents:
649 |
650 |
651 |
Keyword
String
Unicode characters
652 |
leader(dotted)
leader('. ')
\002E \0020
653 |
leader(solid)
leader('_')
\005F
654 |
leader(space)
leader(' ')
\0020
655 |
656 |
657 |
658 |
The string inside the parenthesis is called the leader
659 | string. The leader string must be shown in full at least once,
660 | thereby pushing other content to the side (in the writing direction of
661 | the element to which the leader is attached). The leader string
662 | establishes the minimum length of the leader. If there is empty space
663 | on the line, the leader is expanded by repeating it as many times as
664 | possible. The expansion of a leader from its minimum length never
665 | causes line breaks to change. At the end of the leader, a partial
666 | leader string may be shown.
667 |
668 |
Line-breaking characters inside leader strings must be ignored. A list of line-breaking characters are found in
669 | [Unicode
670 | Technical Report #13]. Other white space characters are collapsed according to the values of
671 | white-space properties. A leader consisting only of whitespace
672 | characters is called a whitespace leader.
673 |
674 |
675 |
To determine the length of the leaders, user agents must do the
676 | following for each line where a leader appears:
677 |
678 |
679 |
Lay out the content with leaders of minimum lengths.
680 |
681 |
Determine the empty space on the line. The empty space is the difference between the width of the line box (as per CSS 2.1, section 9.4.2) and the formatted content in the line box. For table cells in automatic table layout, leaders may influence the layout by enlarging the "maximum cell width" (as per CSS 2.1 17.5.2.2).
682 |
683 |
Distribute the empty space between all leaders on the line and
684 | fill the empty space with the specified leader patterns. Glyphs must
685 | not be shown partially. All leaders on the line should, to the extent
686 | possible, have the same length. This may not always be possible as the
687 | minimum leader length must be honored.
688 |
689 |
690 |
691 |
692 |
693 |
By adding a leader to the ::after pseudo-element, a leader is added after the content of an element:
694 |
If a leader is set on an inline element inside a justified paragraph, there will not be any empty space on the line. Therefore, the leader is shown only once.
723 |
724 |
A table of contents often use leaders to visually connect a chapter
774 | title with the corresponding page number. This can be achieved with code like:
775 |
776 |
Line numbers sometimes displayed on the side of poetry, for reference purposes. In this example, a counter is dsplayed on every other line and pushed to the right by an invisible leader.
813 |
814 |
823 | Oh! let that eye, which, wild as the gazelle's, 1
824 | Now brightly bold or beautifully shy,
825 | Wins as it wanders, dazzles where it dwells, 3
826 | Glance o'er this page, nor to my verse deny
827 |
828 |
829 |
Note that the formatter doesn't really count lines, but rather elements marked up as lines.
830 |
831 |
832 |
835 |
836 |
A leader is only present on one line. If the presence of a minimum length leader at the end of a line results in subsequent content being moved to the next line, the leader will also be moved to the next line.
837 |
838 |
Depending on the width of the containing block, the content may or may not fit on one line. In the rendered examples below, the thrird rendition the leader and its subsequent content is moved to the second line.
852 |
853 |
The purpose of a leader is most often to connect two
869 | strings visually. To achieve this, User Agents may chose to move
870 | content appearing before the leader onto the same line as the leader.
871 |
872 |
873 |
In this renditon, the User Agen has chosen to move "Adams" to the next line to preserve a visual connection:
874 |
875 |
876 | |Douglas |
877 | |Adams.........42|
878 |
879 |
880 |
881 |
882 |
883 |
In cases where there is not enough space for content on both sides of the leader, the leader will remain on the same line as the following content.
884 |
885 |
In this example, a whitespace leader is placed before a <cite> element:
900 |
901 |
902 | <style>
903 | cite::before { content: leader(' ') }
904 | </style>
905 | <blockquote>
906 | For a moment, nothing happend.
907 | Then, after a second or so,
908 | nothing continued to happen.
909 | <cite>Douglas Adams</cite>
910 | </blockquote>
911 |
912 |
913 |
Whitespace leaders do not connect two strings in the same way that visible leaders do. User Agents may therefore chose to not move content appearing before the leader onto the same line as the leader. This may result in a rendition like:
914 |
915 |
916 | |For a moment, nothing happend. |
917 | |Then, after a second or so, |
918 | |nothing continued to happen. |
919 | | Douglas Adams|
920 |
921 |
922 |
Rather than:
923 |
924 |
925 | |For a moment, nothing happend. |
926 | |Then, after a second or so, |
927 | |nothing continued to |
928 | |happen. Douglas Adams|
929 |
930 |
931 |
932 |
933 |
969 |
970 |
When possible, User Agents should align corresponding glyphs from the
971 | leaders of consecutive lines.
972 |
973 |
974 |
In this example, the dotted lines are aligned horizontally so that the dots appear directly above and below each other:
975 |
It is common to refer to other parts of a document by way of a
987 | section number (e.g., "See section 3.4.1"), a page number (e.g., "See
988 | discussion on page 72"), or a string (e.g., "See the chapter on
989 | Europe"). This specification describes how to resolve cross-references
990 | automatically by introducing two new values on the 'content' property.
991 |
992 |
The ''target-counter'' and ''target-counters'' values
993 |
994 |
Numerical cross-references are generated by ''target-counter()''
995 | and ''target-counters()'' values on the 'content' property that fetch the value of a counter at
996 | the target end of the link. These functions are similar to the
997 | ''counter()'' and ''counters()'' functions, except that they fetch
998 | counter values from remote elements. ''target-counter()'' has two
999 | required arguments: the url of the link, and the name of a counter.
1000 | ''target-counters()'' has three required arguments: the url of the
1001 | link, the name of a counter, and a separator string. Both functions
1002 | accepts an optional argument at the end that describes which list
1003 | style type to use when presenting the resulting number; ''decimal''
1004 | being the default. The syntax is defined as:
1005 |
1006 |
Textual cross-references are generated by ''target-text()'' which
1049 | fetches the textual content from the target end of the link. Only text
1050 | is copied; not style, structure, or replaced content.
1051 | ''target-text()'' has one required argument: the url of the link. An
1052 | optional second argument specifies exactly which content is fetched.
1053 | There are four possible values: ''content'', ''before'', ''after'',
1054 | ''first-letter''; these keywords are defined on 'string-set' above. The syntax is:
1055 |
1056 |
1057 | target-text( <url> [, [ content | before | after | first-letter ]]? )
1058 |
1059 |
1060 |
1061 |
1062 |
To generate this text:
1063 |
1064 |
1065 |
See Chapter 3 ("A better way") on page 31 for an in-depth evaluation.
1066 |
When an element is turned into a footnote, certain things
1098 | happen: the element is moved to the footnote area, a footnote call is
1099 | left behind in its place, a footnote marker is displayed before the
1100 | element, and the footnote counter is incremented.
1101 |
1102 |
A footnote is a note typically placed at the bottom of a page that
1103 | comments on, or cites, a reference. References to footnotes are marked
1104 | with a footnote call in the main text which corresponds to
1105 | a footnote marker in the footnote area. The
1106 | rendering of footnotes is complex. As far as possible, footnotes try
1107 | to reuse other parts of CSS. However, due to the typographic
1108 | traditions of footnotes, some new functionality is required.
1109 |
1110 |
1125 |
1126 |
1127 |
In its simplest form, making a footnote is simple.
1128 |
1129 |
In this example, the text Most often. will be placed in a
1138 | footnote. A note-call will be left behind in the main text and a
1139 | corresponding marker will be shown next to the footnote. Here is one
1140 | possible rendering:
1141 |
1142 |
1143 | A sentence consists of words.¹
1144 |
1145 | ¹ Most often.
1146 |
1147 |
1148 |
1149 |
1150 |
Footnotes make sense in paged media, but in continous media the information is better displayed inline. Here is an example of how to support both paged and contious media:
1151 |
1152 |
An element with ''float: footnote'' (called a footnote
1234 | element) is moved to the footnote area and a footnote-call
1235 | pseudo-element is put in its original place.
1236 |
1237 |
Footnote elements are presented inside the footnote area,
1246 | but they inherit through their normal place in the structure of the
1247 | document.
1248 |
1249 |
1276 |
1279 |
1280 |
For each new footnote element, the ''footnote'' counter is automatically
1281 | incremented.
1282 |
1283 |
1284 |
The footnote area
1285 |
1286 |
All elements with ''float: footnote'' are moved to the footnote
1287 | area. The footnote area is described by an @footnote-rule inside
1288 | the @page-rule. By default, the footnote area appears at the bottom of
1289 | the page, but it can be positioned in other places.
1290 |
1291 |
1292 |
1293 |
These rules place the footnote area at the bottom of the page,
1294 | spanning all columns of the outermost multicol element:
1295 |
1296 |
These rules place the footnote area at the bottom of the page. Also, the footnote area is split into three columns which the footnotes are flowed into:
1324 |
1325 |
The content of the footnote area is considered to come before other
1352 | content which may compete for the same space on the same page.
1353 |
1354 |
If figures and footnotes are on the same page, the footnotes will appear below the figures as they are floated to the bottom before the figures.
1361 |
1362 |
1363 |
Potentially, every page has a footnote area. If there
1364 | are no footnotes on the page, the footnote area will not take up any
1365 | space. If there are footnotes on a page, the layout of the footnote
1366 | area will be determined by the properties/values set on it, and by the
1367 | footnote elements inside it.
1368 |
1369 |
These properties apply to the footnote area: 'float', 'float-reference', 'content', 'border',
1370 | 'padding', 'margin', 'height', 'width', 'max-height', 'max-width',
1371 | 'min-height', 'min-width', and the background properties.
1372 |
1373 |
1382 |
1383 |
1384 |
1385 |
This example uses some of the applicable properties on @footnote:
1386 |
1387 |
The result of this code is a footnote area separated from other content above it by margin, border and padding. Only 4em of the border is visible due to the 'border-clip' property, which is defined in CSS Backgrounds and Borders Module Level 4.
1397 |
1398 |
1399 |
1400 |
1405 |
1406 |
Footnote calls
1407 |
1408 |
When an element is moved to the footnote area,
1409 | a footnote-call is left behind. By default, User Agents must
1410 | behave as if this code is part of the default style sheet:
1411 |
1412 |
The resulting note call is a super-script decimal number.
1419 |
1420 |
1421 |
Footnote markers
1422 |
1423 |
A ::footnote-marker pseudo-element is added to each footnote
1424 | element, before the ::before
1425 | pseudo-element (if any), and replacing the ::marker pseudo-element (if any). User agents must, by default, show the "footnote"
1426 | counter in the footnote-marker.
1427 |
1428 |
1429 |
User Agents may display footnote-calls and footnote-markers this way by default:
1430 |
1431 |
Marker elements are discussed in more detail in the CSS Lists
1450 | module [CSSLIST]. One suggested change to that module is to honor
1451 | the value of 'list-style-position' on the ::footnote-marker
1452 | pseudo-element itself rather than the corresponding list-item element.
1453 | Further, one clarification to the horizontal placement of the marker
1454 | is suggested: the margin box of the marker box is
1455 | horizontally aligned with the start of the line box.
1456 |
1457 |
1458 |
Counting footnotes
1459 |
1460 |
The "footnote" counter is automatically incremented each time a
1461 | footnote is generated. That is, the "footnote" counter is incremented
1462 | by one each time an element with ''float: footnote'' appears.
1463 |
1464 |
1465 |
This code adds square brackets around footnote calls and
1466 |
1467 |
Footnotes can also be combined with other counters. In this example, a poem is shown with line numbers on the side. The "line" counter is also used in the footnoter marker.
1514 |
1515 |
1527 | Come, blue-eyed maid of heaven! - but thou, alas, 1
1528 | Didst never yet one mortal song inspire -
1529 | Goddess of Wisdom! here thy temple was, 3
1530 | And is, despite of war and wasting fire,
1531 |
1532 | 1 From "Childe Harold's Pilgrimage" by Lord Byron
1533 | 3 The use of uppercase "W" indicates great wisdom
1534 |
1535 |
1536 |
1537 |
1538 |
1539 |
Laying out footnotes
1540 |
1541 |
Footnotes must appear as early as possible under the following constraints:
1542 |
1543 |
1544 |
1545 |
A footnote marker may not appear on an earlier page than the
1546 | footnote call.
1547 |
1548 |
Footnotes may not appear out of document order.
1549 |
1550 |
1555 |
1556 |
The footnote area is limited in size by 'max-height', unless the
1557 | page contains only footnotes. (E.g., if at the end of the document
1558 | there are still footnotes unprinted, the User Agent can use the whole page to
1559 | display footnotes.)
1560 |
1561 |
If there is a footnote call on a page, the footnote area may not
1562 | be empty, unless its 'max-height' is too small.
1563 |
1564 |
1565 |
1566 |
1591 |
1592 |
Named Areas
1593 |
1598 |
1599 |
The page area and footnote area are predefined areas in CSS; all content is shown in the page area by default, and footnotes can be floated to the page area. This section describes a generic mechanism to create named areas, how to posistion named areas, and how to flow content into named areas.
1600 |
1601 |
Creating names areas: @area
1602 |
1603 |
Named areas can be generated by the style sheet to provide space for sidenotes, figures and other content which is presented apart from the main flow. The @area construct is used to create named areas, into which content can be flowed into with the 'flow' property.
1604 |
1605 |
Named areas are can be absolutely positioned, or positiond with the 'float' property. When absolutely positioned, measurements are relative to the page box.
1606 |
1607 |
1608 |
In this example, a named area called sidenote is created.
1609 |
1610 |
The baseline of the sidenotes are aligned with the baseline of their reference point.
1638 |
1639 |
1640 |
1641 |
To support having several identically named areas on the same page,
1642 | a second level of @area blocks are used. Only two levels of @area are
1643 | allowed. The outer @area must always have a name, and the inner @area
1644 | must never have a name. The named areas are painted as if they
1645 | appeared in the source file after the footnote area, and before any
1646 | content.
1647 |
1648 |
The 'flow' property is introduced to flow content into a named area. A functional notation indicates a named area, alignment within the named area, and placement policy.
1664 |
1665 |
element requests that its first baseline is aligned with the baseline of its reference point in the closest matching named area. This is the default value.
1675 |
1676 |
same-page
1677 |
1678 |
element requests to be filled into the first available space in the first matching named area on the same page
1679 |
1680 |
same-spread
1681 |
1682 |
element requests to be filled into the first available space in the first matching named area on the same spread
1683 |
1684 |
fill
1685 |
element requests to be filled into the first available space in the first matching named area on any page
1686 |
1687 |
top-edge
1688 |
element requests that its top border edge is aligned with the top border edge of the BFC of the reference point in the closest matching named area
1689 |
1690 |
bottom-edge
1691 |
element requests that it bottom border edge is aligned with the bottom border edge of the BFC of the reference point in the closest matching named area
1692 |
1693 |
1694 |
1695 |
An optional exclamation mark ('!') can be added to the above keywords to express that aligment is essential: if it cannot be honored, the ele,ment will not be shown.
1696 |
1697 |
1698 |
1699 |
This code moves <aside> elements to the named area called "sidenote" on the same page as the reference point:
1700 |
1701 |
The result is a document where content in the normal flow is shown on left pages, and right pages hold images. The images are filled into the named area in sequential order.
1722 |
1723 |
In this example there are two streams of footnotes, both using named areas. The first stream flowed into the "fn1" area, and the second is flowed into "fn2". The first stream is referenced by numbers, and the second by lower-alpha.
1763 |
1764 |
In the formatted result, the named areas appear at the bottom of the page; fn1 is floated to the bottom first and therefore appears below fn2. A possible rendering could be:
1780 |
1781 |
1782 | [a] From "Childe Harold's Pilgrimage" by Lord Byron
1783 | [3] The use of uppercase "W" indicates great wisdom
1784 |
1785 |
1786 |
1787 |
1788 |
1795 |
1796 |
1797 |
In this example there are two streams of footnotes. The first stream is floated to the predefined "footnote" area, and the second is flowed to a name area called "fn2". The first stream is referenced by line numbers, and the second by lower-alpha.
1798 |
1799 |
In the formatted result, the footnote area appears below the named area.
1821 |
1822 |
1823 | Come, blue-eyed maid of heaven! - but thou, alas,[a] 1
1824 | Didst never yet one mortal song inspire -
1825 | Goddess of Wisdom! here thy temple was, 3
1826 | And is, despite of war and wasting fire,
1827 |
1828 | [3] The use of uppercase "W" indicates great wisdom
1829 | [a] From "Childe Harold's Pilgrimage" by Lord Byron
1830 |
This example is similar to the previous example, except that there are two sidenote areas: left of the first column, and right of the second column. The sidenote elements are move to the closest sidenote area:
1862 |
1863 |
In this example, figures appear in the main flow, while captions are flowed to the closest sidenote areas (there are two: left of the first column, and right of the second column). The captions are aligned with the top of the figure element.
1884 |
1885 |
In this example, the figure has an image that spans the width of the page and bleeds to the edges. The caption follows underneath, in the sidenote area. The intended rendering is:
1914 |
1915 |
The style sheet define two name areas, one for the photograph and one for the sidenote. The "photo" named area is floated to the top, while the "sidenote" area is absolutely positioned. The two named areas overlap. Therefore, the order of the content is significant; the image is first flowed into the "photo" area. The position of the caption will be influcenced by the height of the image.
1929 |
1930 |
An optional argument indicates a placement policy:
2008 |
2009 |
2010 |
erase
2011 |
element erases any other content which may have been flowed to the named area
2012 |
2013 |
stick
2014 |
Element sticks to the named area and is repeated on any subsequent pages which has the same named ares. Also, element erases any other content which may have been flowed to the named area.
2015 |
2016 |
copy
2017 |
rather than being moved, the element is copied to the named area.
2018 |
2019 |
2020 |
2021 |
2022 |
2023 |
2024 |
In this example, there are two named areas called "sidenote", one
2025 | on the left side of the first column, and the other on the right side
2026 | of the second column. Three reference points are marked with 1,
2027 | 2, and 3. Exact alignment along the baseline is possible for all three notes.
2028 |
2029 |
This example is similar to the previous one, except for the placement of the third reference point: it appears much closer to the second reference point. As a result, the second sidenote pushes down the third sidenote, which is no longer exactly aligned along the baseline.
2053 |
2054 |
In this example, the h1 element is copied into a running header which is defined with @area. The copied element is restyled. It erases the running header when it enters, and is set to stick (until eased by another element):
2120 |
2121 |
In this example, the named area called "running header" is placed in the center top of the page. It is filled with three elements, one being the copy
2148 |
2149 |
Margin boxes can be considered a special type of named areas. Unlike names areas, margin boxes:
2193 |
2194 |
2195 |
are predefined (there are 16 of them)
2196 |
come with default settings on 'text-align' and 'vertical-align'
2197 |
2198 |
2199 |
The 'margin()' function moves elements to margin areas:
2200 |
2201 |
2202 | div.running-header { flow: margin(top-left) } /* move to top-left margin area */
2203 | h1 { flow: margin(top-right, copy) } /* copy to margin area */
2204 |
2205 |
2206 |
2207 |
2208 |
Pulling content: target-pull()
2209 |
2210 |
2211 |
2212 |
To support legacy browsers, it is often better to make a link to
2213 | the note rather than including the text inline. This example shows how
2214 | to fetch the content of a note and place it in a footnote.
2215 |
2216 |
When shown in a legacy browser, the content of the element will be
2232 | shown as a clickable link to an endnote. When printed according to
2233 | this specification, there will be a footnote:
2234 |
2235 |
2236 | A sentence consists of words¹.
2237 |
2238 | ¹ Most often.
2239 |
2240 |
2241 |
2242 |
2243 |
When footnotes are long or complex, it may be impractical to keep their content at the point of reference. Instead, the content of the footnote may be stored at some other point in the source file. This example shows how to fetch the content of a note and place it in a footnote.
2244 |
2245 |
2246 | <style>
2247 | @media print {
2248 | .footnote {
2249 | float: footnote;
2250 | content: target-pull(attr(href url)) }
2251 | }
2252 | </style>
2253 | ...
2254 | <p>A sentence consists of words<a class="footnote" href="#words"></a>.
2255 | ...
2256 | <div id=words>Most often, a sentence consists of words. However, some sentences also
2257 | have <em>numbers</em>. And punctuation, don't forget punctuation.</div>
2258 |
Some document formats have the capability to represent bookmarks
2277 | into the document. These bookmarks can e.g. be used to show an outline
2278 | or an index of the document. Bookmarks are typically shown outside the
2279 | document itself, often in a tree-structured and clickable table of
2280 | contents. To generate bookmarks, these properties are defined:
2281 | 'bookmark-level', 'bookmark-label', and 'bookmark-state'.
2282 |
2283 |
'bookmark-level'
2284 |
2285 |
2286 |
2287 |
Name:
2288 |
bookmark-level
2289 |
2290 |
Value:
2291 |
none | <integer>
2292 |
2293 |
Initial:
2294 |
none
2295 |
2296 |
Applies to:
2297 |
all elements
2298 |
2299 |
Inherited:
2300 |
no
2301 |
2302 |
Percentages:
2303 |
N/A
2304 |
2305 |
Media:
2306 |
all
2307 |
2308 |
Computed value:
2309 |
specified value
2310 |
2311 |
2312 |
This property describes what level a certain bookmark has in a
2313 | hierarchical bookmark structure. The values are:
2314 |
2315 |
2316 |
2317 |
none
2318 |
2319 |
no bookmark is generated
2320 |
2321 |
<integer>
2322 |
2323 |
Indicates the level of the bookmark; the highest level is ''1'', then ''2'', ''3'' etc. Zero and negative values are not allowed.
2324 |
2325 |
This property specifies the label of the bookmark, i.e., the text that will represent the bookmark in the bookmark structure. This properly will only be consulted if 'bookmark-level' is different from 'none'. The values are:
2358 |
2359 |
The resulting bookmark would be: "Chapter: Africa".
2409 |
2410 |
2411 |
2412 |
'bookmark-state'
2413 |
2414 |
2415 |
2416 |
2417 |
Name:
2418 |
bookmark-state
2419 |
2420 |
Value:
2421 |
open | closed
2422 |
2423 |
Initial:
2424 |
open
2425 |
2426 |
Applies to:
2427 |
block-level elements
2428 |
2429 |
Inherited:
2430 |
no
2431 |
2432 |
Percentages:
2433 |
N/A
2434 |
2435 |
Media:
2436 |
all
2437 |
2438 |
Computed value:
2439 |
specified value
2440 |
2441 |
2442 |
A hierarchy of bookmarks may be shown in an open or closed state.
2443 | The user will typically be able to toggle the state to navigate in the
2444 | bookmarks. This property describes the initial state of a bookmark.
2445 |
2446 |
2447 |
In this example, h1 and h2 elements are set to have an open initial bookmark stat, all other elements will be closed initially:
2448 |
2449 |
A document consists of a linear sequence of pages. In simple documents, all pages have the same page area and marginalia. In more complex documents, pages may have different sizes, marginalia and orientation. Being able to style pages differently is therefore important.
2459 |
2460 |
In CSS2, first, left and right pages, as well as named pages, can be selected. This specification adds more advanced page selectors. Page selectors are similar to normal selectors in the sense that they query a data set and select parts of it. However, page selectors and normal selector are different in what they query (normal selectors query a document tree; page selectors query a sequence of pages) and what they select (normal selectors find structured elements, page selectors find formatted pages).
2461 |
2462 |
The nth() page pseudo-class
2463 |
2464 |
The nth() construct is added to select a numbered page.
2465 |
2466 |
2467 |
These are equivalent, they both select the first page of a document:
2468 |
A page group is a sequence of pages with the same name. Being able to style the first page of page group different from the other pages in the page group is important. To support this, the named page and the :first and :nth() selector can be combined with the page name in page selectors:
2522 |
2523 |
2524 |
In this example, various background colors will be set on different pages in the "chapter" page group:
2525 |
2526 | @page chapter:first { background: pink } /* the first page */
2527 | @page chapter:nth(1) { background: pink } /* the first page */
2528 | @page chapter:nth(2) { background: lime } /* the second page */
2529 | @page chapter:nth(3n+2) { background: white } /* every third page */
2530 |
2531 |
2532 |
2533 |
A new page group is started when an element is set to a named page which is different from the preceding element, or different from the ancestor element.
2534 |
2535 |
2536 |
In this example, the first article starts a new page group due to having a different named page than its ancestor. However, the second article continues in the same page group as the first, due to having the same named page. As a result, there will only be one page with a green background.
2537 |
2538 |
To enable page groups to be created when sibling elements use the same named page, the 'break-before' and 'break-after' properties are consulted. When a forced page break has been set between the two elements (either 'break-after: page' on the first element, or 'break-before: page' on the second element), the second element will create a new page group.
2551 |
2552 |
2553 |
In this example, both articles start new page groups due to there being an explicit page break between them.
2554 |
2555 |
Content is sometimes displayed or hidden based on their placement
2719 | after formatting. This specification proposes the 'condition' property
2720 | to express conditions that must be met in order for the element to be
2721 | displayed; if the condition is not met, the effect will be as if
2722 | 'display: none' had been set.
2723 |
2724 |
2725 |
In this example, thematic breaks within the prose is normally indicated by a few blank lines. However, if the thematic break appears at a page break, it will be indicated by three asterisks.
2726 |
2727 |
column rules are clipped so that they align with prominent font features; for latin scripts this means that the top end of the column rule aligns with the ex-height of the dominant font, while the bottom end of the rule aligns with the baseline of the dominiant font.
2777 |
2778 |
length
2779 |
If one value is specified, the top and bottom of all column rules are clipped by specified length. If two values are specified, the first value applies to the top column rules and the second value applies to the bottom column rules.
2780 |
2781 |
2782 |
Spanners split column rules, and each fragment is possibly clipped by this property.
2783 |
2784 |
Selecting elements within pages
2785 |
2786 |
This section sketches several possible solutions.
2787 |
2788 |
2789 |
2790 |
2791 |
To select elements depending on which page they start on, these pseudo-classes can be used:
2792 |
2793 |
2794 | aside:left { background: red }
2795 | aside:right { background: green }
2796 | aside:first { background: blue }
2797 | aside:nth(4n+1) { background: pink }
2798 |
2799 |
2800 |
2801 |
2802 |
To select elements within a page, normal selectors can be combined with a page selector.
2803 |
2804 |
In an alternative longhand syntax, selectors are placed inside an @inside-block:
2821 |
2822 |
2823 |
These are identical:
2824 |
2825 |
2826 | @page :left {
2827 | @inside {
2828 | p { text-align: left }
2829 | }
2830 | }
2831 |
2832 | @page :left p { text-align: left }
2833 |
2834 |
2835 |
2836 |
The longhand syntax also allows the styling of elements that appear inside page areas and margin boxes.
2837 |
2838 |
2839 |
In this example, two sidenote areas are declared. Paragraphs inside those areas are given a differnet styling based on which side they are in.
2840 |
2841 | @page {
2842 | margin-left: 1cm 5cm; /* wide side margins */
2843 | @area sidenote {
2844 | @area {
2845 | position: absolute; left: -4cm; top: 0; bottom: 0; width: 3.5cm; /* left sidenote */
2846 | @inside p {
2847 | text-align: right; /* paragraphs in left sidenotes are aligned right */
2848 | }
2849 | }
2850 | @area {
2851 | position: absolute; right: -4cm; top: 0; bottom: 0; width: 3.5cm; /* right sidenote */
2852 | @inside p {
2853 | text-align: left; /* paragraphs in right sidenotes are aligned left */
2854 | }
2855 | }
2856 | }
2857 | }
2858 |
2859 |
2860 |
2861 |
2862 |
2863 | @page :left {
2864 | background: pink; /* declaration applies to pages */
2865 | @inside {
2866 | p { text-align: left } /* declaration applies to elements on page */
2867 | }
2868 | @top-center {
2869 | background: orange; /* declaration applies to margin box */
2870 | @inside {
2871 | p { text-align: left } /* declaration applies to elements in top-center margin boxes */
2872 | }
2873 | }
2874 | }
2875 |
2876 |
2877 |
2878 |
2879 |
Selecting columns
2880 |
2881 |
This section is not fully developed.
2882 |
2883 |
2884 |
2885 | div.chapter:column(3) /* the 3rd column of the element */
2886 | div.chapter:column(2n) /* all even columns of the element */
2887 | div.chapter:column(3+) /* all columns but the 1st and 2nd */
2888 | div.chapter:column(2,2) /* second column on second page */
2889 | div.chapter:column(*,2) /* all columns on the second page */
2890 | div.chapter:column(1,*) /* the first column on all pages */
2891 |
Text in adjacent columns often use the same baselines. This appears more pleasant to typographers, and reduces show-through, where a printed line shows through to the other side of the sheet. By aligning text to a grid of baselines, a baseline rhythm is established. Subheadings and figures may disturb the baseline rhythm, but subsequent text should find it again. The 'baseline-grid' property is introduced to define, engage and clear baseline grids, while the 'baseline-block-snap' property indicates how to align elements that do not align themselves with a baseline grid.
2908 |
2909 |
'baseline-grid'
2910 |
2911 |
2912 |
2913 |
Name:
2914 |
baseline-grid
2915 |
2916 |
Value:
2917 |
normal | none | new | root | page
2918 |
2919 |
Initial:
2920 |
normal
2921 |
2922 |
Applies to:
2923 |
block containers
2924 |
2925 |
Inherited:
2926 |
no
2927 |
2928 |
Percentages:
2929 |
N/A
2930 |
2931 |
Media:
2932 |
visual
2933 |
2934 |
Computed value:
2935 |
as specified
2936 |
2937 |
2938 |
This property is used to define, engage, and clear baseline grids. When a baseline grid is enganged, it will be in effect on content inside the block container (including child elements) until another baseline grid is engaged, or the baseline grid is cleared. When a baseline grid is in effect, content will be aligned with the baseline grid.
2939 |
2940 |
2941 |
2942 |
normal
2943 |
2944 |
The element does not define, engage, or clear a baseline grid.
2945 |
2946 |
none
2947 |
2948 |
the element clears the baseline grid
2949 |
2950 |
new
2951 |
2952 |
the element defines and engages a new baseline grid for its content. The new baseline grid is defined by establishing the first baseline of the element by using the first available font; thereafter the frequency of the baseline grid is equal to the used value of 'line-height'.
2953 |
2954 |
root
2955 |
2956 |
the element enganges the root baseline grid. The root baseline grid is automatically defined by the root element; the calculation for finding the root baseline grid is the same as for the 'new' value. While the root element defines the root baseline grid, it does not engage it.
2957 |
2958 |
page
2959 |
2960 |
the element engages the page baseline grid. The page baseline grid is automaticalle defined by the page box on the current page and the font properties of the root element; the calculation for finding the page baseline grid is the same as for the root baseline grid, except that the page box is used to position the baseline grid. In continous media, this value is the same as 'root'.
2961 |
2962 |
2963 |
2964 |
2965 |
2966 |
In this example, the article element defines an enganges a baseline grid. Content inside the article will align with the baseline grid, except for headlines and figures.
2967 |
2968 |
Notice how the body text aligns with the baseline grid (shown in orange for illustration purposes), while the heading, figure and figure caption do not. After the heading and figure, the main text starts again on the next available baseline.
3025 |
3026 |
3027 |
3028 |
3029 |
3030 |
3031 |
In this example there are sidenotes in different scripts:
3032 |
3033 |
The <aside> elements establish a baseline grid from the used font (font: 12pt serif). Content inside the <aside> elements, even in different scripts, fonts and sizes, align with the baseline grid established by the <aside> elements.
3043 |
3044 |
3045 |
3046 |
3047 |
3048 |
The root baseling grid is automatically defined, but is not automatically engaged. In this example, the root baseline grid is enganged by the root element.
3049 |
3050 |
3051 | :root { baseline-grid: root }
3052 |
3053 |
3054 |
3055 |
3056 |
3057 |
3058 |
The root baseline grid is handy when only a few elements want to opt-in to use a baseline grid.
3059 |
3060 |
The 'page' baseline grid is automatically defined so that pages with different page margins still can align content to to the same baseline grid. In this example, the 'page' basedline grid is applied to all sidenotes:
3070 |
3071 |
3072 | aside { baseline-grid: page }
3073 |
3074 |
3075 |
3076 |
3077 |
3078 |
3079 |
'baseline-block-snap'
3080 |
3081 |
3082 |
3083 |
Name:
3084 |
baseline-block-snap
3085 |
3086 |
Value:
3087 |
[before | after | center | auto] || [margin-box | border-box]
3088 |
3089 |
Initial:
3090 |
auto
3091 |
3092 |
Applies to:
3093 |
elements with 'baseline-grid: new' or 'baseline-grid: none'
3094 |
3095 |
Inherited:
3096 |
no
3097 |
3098 |
Percentages:
3099 |
N/A
3100 |
3101 |
Computed value:
3102 |
specified value
3103 |
3104 |
3105 |
This property describes how to align content that is not aligned to a baseline grid. Values are:
3106 |
3107 |
3108 |
auto
3109 |
same as 'before' on top of column, same as 'after' at bottom of column, otherwise 'center'
3110 |
before
3111 |
the element is placed as close to the previous content as possible
3112 |
after
3113 |
the element is placed as close to the following content as possible
3114 |
center
3115 |
the element is centered between the previous and following content.
3116 |
3117 |
margin-box
3118 |
the margin edge is used to align the block on the baseline grid
3119 |
border-box
3120 |
the border edge is used to align the block on the baseline grid
3121 |
3122 |
3123 |
3124 |
3125 |
3126 |
In this example, elements that do not follow the baseline grid will snap upwards towards their older siblings.
3127 |
3128 |
It is sometimes convenient to replace one character or string with another without changing the source document. The ‘text-replace’ property offers a way to perform the replacement in the style sheet.
3439 |
3440 |
3441 |
3442 |
Name:
3443 |
text-replace
3444 |
3445 |
3446 |
Value:
3447 |
[<string> <string>]+ | none
3448 |
3449 |
3450 |
Initial:
3451 |
none
3452 |
3453 |
3454 |
Applies to:
3455 |
all elements
3456 |
3457 |
3458 |
Inherited:
3459 |
yes
3460 |
3461 |
3462 |
Percentages:
3463 |
N/A
3464 |
3465 |
3466 |
Media:
3467 |
visual
3468 |
3469 |
3470 |
Computed value:
3471 |
as specified value
3472 |
3473 |
3474 |
This property replaces all occurrences of a certain string with another string in the content of the element. The property accepts pairs of strings as value, in addition to the initial 'none' value. For each pair of strings, occurrences of the first string in the content will be replaced with the second string. If 'none' is specified, no replacements will occur.
3475 |
3476 |
In this example, three consecutive period characters are replaced with an ellipsis character and the apostrophe character is replaced with a quotation character:
3484 |
3485 |
As a result, the string "It's the beginning...!" will be changed to "It’s the beginning…!".
3490 |
3491 |
3492 |
3493 |
In this example, a narrow no-break space is added before exclamation marks in French texts. This is known as "quart de cadratin" in French.
3494 |
3495 |
As a result, the string "Mais, oui!" is changed to "Mais, oui !".
3500 |
3501 |
3502 |
3503 |
3504 |
In this example, a hair space is added before and after em-dashes.
3505 |
3506 |
3507 | body { text-replace: "—" "\200A—\200A" }
3508 |
3509 |
3510 |
As a result, this string "no—not yet" is changed to "no — not yet".
3511 |
3512 |
3513 |
3514 |
3515 |
3524 |
3525 |
Text replacements are applied serially; the first pair of strings is applied to the textual content of the element, then the second pair of strings is applied to the outcome etc.
3526 |
3527 |
3528 |
3529 |
The two rules below yield the same result. In the first rule all 'a' characters are converted to 'b'. Subsequently, all 'b' characters are converted to 'c'. In the second rule, all 'a' and 'b' characters are converted directly to 'c'.
3530 |
3531 |
3532 | body { text-replace: "a" "b" "b" "c" }
3533 | body { text-replace: "a" "c" "b" "c" }
3534 |
3535 |
3536 |
3537 |
The first string in a pair must have at least one character, while the second may be empty.
3538 |
3539 |
3540 |
In this example, all 'a' characters are removed.
3541 |
3542 |
3543 | body { text-replace: "a" "" }
3544 |
3545 |
3546 |
3547 |
If the first string of a pair is empty, or if an odd number of strings has been specified, the whole value is ignored and no text replacements are performed. Text replacements do not occur across element boundaries.
3548 |
3549 |
3550 |
No text replacement will occur in this example:
3551 |
3552 |
3553 | h1 { text-replace: "foo" "bar" "" "foo" } /* ignore value */
3554 | h2 { text-replace: "foo" "bar" "foobar" } /* ignore value */
3555 | h3 { text-replace: "foobar" "barfoo" } /* accept value, but ... */
3556 |
3557 | <h3>foo<span>bar</span></h3> <!-- ... start tag breaks string which would otherwise match -->
3558 |
3559 |
3560 |
3561 |
This property is evaluated after the content property, and before text-transform.
3562 |
3563 |
Microtypography
3564 |
3565 |
Microtypography is a range of methods for improving the appearance of text. Often, small adjustments in the space between letters and words can achieve a more even presentation with less need for hyphenation and fewer widows and orphans. This specification extends two existing CSS properties — 'letter-spacing' and 'word-spacing' — with minimum and maximum values to guide User Agents when laying out text.
3566 |
3567 |
Minimum, maximum and optimal spacing
3568 |
3569 |
3570 |
The 'letter-spacing' and 'word-spacing' properties are extended to accept up to three values:
3571 |
3572 |
3573 | [ normal | <length> | <percentage>]{1,3}
3574 |
3575 |
3576 |
3577 |
3578 |
Values are:
3579 |
3580 |
3581 |
normal
3582 |
3583 |
The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text.
3584 |
3585 |
<length>
3586 |
Specifies extra spacing in addition to the default space between characters and words. Values may be negative, but there may be implementation-specific limits.
3587 |
3588 |
<percentage>
3589 |
Relative to width of space character.
3590 |
3591 |
3592 |
3593 |
If one value is specified, it describes the optimum value, as well as the minimum and maximum values. If two values are specified, the first denotes the optimum and the minimum, and the second denotes the maximum. If three values are specified, they describe the optimum, minimum and maximum values.
3594 |
3595 |
What are min/max values relative to? Are they relative to the
3611 | normal position (like the opt values are), or to the opt position?
3612 |
3613 |
3614 |
3615 |
If we add percentage values, what are they relative to? Something other than em? CSS3 Text suggested advance measure/width for word-spacing, which probably means the space character?
3616 |
3617 |
If so, one could often just use two values::
3636 |
3637 | p {
3638 | letter-spacing: 0 0.05em;
3639 | word-spacing: normal 0.2em;
3640 | }
3641 |
3642 |
3643 |
3644 |
3645 |
Spatial layout of pages; @layout
3646 |
3647 |
In commonly used apps, pages are often laid out spatially so that
3648 | users can nagivate from one page to another by moving up, down, right
3649 | or left. To support this feature for web content, a new @-rule is
3650 | proposed: @layout. The purpose of @layout is to describe how pages are
3651 | laid out spatially relative to the current document.
3652 |
3653 |
Four new properties are allowed inside @layout: nav-up, nav-right, nav-bottom, nav-right.
3654 |
3655 |
This functionality relies on semantics in HTML and CSS. Other languages may have other other ways to describe such semantics. One possible solution for other languages is "link[rel=index] { nav-up: attr(href) }"
3681 |
3682 |
''back''
3683 |
3684 |
The keyword takes the user one step back in the history of browsed pages.
3685 |
3686 |
alternative name: @navigation, @neighborhood, @hood
3747 |
3748 |
Page shift effects
3749 |
3750 |
To describe page shift effects, four new properties inside
3751 | @layout are proposed: nav-up-shift, nav-right-shift,
3752 | nav-down-shift, nav-left-shift. These properties take one of several
3753 | keyword values:
3754 |
3755 |
3756 |
3757 |
pan
3758 |
pans to the new page; this is the initial value
3759 |
3760 |
turn
3761 |
turns the page, like soft book pages do
3762 |
3763 |
flip
3764 |
flips the page, like stiff cardbord
3765 |
3766 |
fold
3767 |
the old page folds, like an accordion
3768 |
3769 |
3770 |
3771 |
The proposed keyword values are loosely described. Are
3772 | there better ways to describe transitions?
3773 |
3774 |
This document has been improved by Bert Bos, Michael Day, Melinda
3834 | Grant, David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika
3835 | Etemad, Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly
3836 | Miller, Werner Donné, Tarquin (Mark) Wilton-Jones, Michel Fortin,
3837 | Christian Roth, Brady Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr.,
3838 | Jacob Grundtvig Refstrup, James Elmore, Ian Tindale, Murakami Shinyu, Paul E.
3839 | Merrell, Philip Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek Çelik, Florian Rivoal, Alex Mogilevsky, Simon Sapin, Cameron McCormack, Liam R E Quin, Peter Moulder, Morten Stenshorne, Rune Lillesveen, Lars Erik Bolstad, Anton Prowse, Michel Onoff, Dave Cramer.
To the extent possible under law, the editor has waived all copyright and related or neighboring rights to this work. In addition, as of [DATE], the editor has made this specification available under the
50 | Open Web Foundation Agreement Version 1.0, which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
51 |
52 |