csswg-drafts/css2/generate.src at 8f268769c398119e15798ae6bf593c26731f3fd8 · CodeRedDigital/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Generated content</title>
<link rel="next" href="page.html">
<link rel="previous" href="visufx.html">
<link href="style/default.css" rel="STYLESHEET" type="text/css">
</head>
<body>
<h1 align="center">
<a name="generated-text">Generated content and automatic numbering</a></h1>

<p>[Note: no system for automatic numbering has been agreed upon yet]

<p>For a readable display of a document, it may sometimes be necessary
for the user agent to render text or images that are not part of the
source document. For example, the user agent may insert the word
"Figure" before the caption of a figure, or "Chapter 7" before the
seventh chapter title. For audio or braille in particular, user agents
should be able to insert these strings.

<p>The inserted content can consist of fixed strings (e.g., "Figure"),
fixed images (such as an icon: <img id="caution-img" src="images/caution.gif"
alt="caution icon">), or counters that automatically
increment. Combinations are also possible ("Chapter 7").

<P>Below we describe the mechanisms CSS2 offers
for specifying generated content.

<h2><a name="before-after-content">The</a> <span class="index-def"
title=":before|pseudo-elements:::before">:before</span> and <span
class="index-def" title=":after|pseudo-elements:::after">:after</span>
pseudo elements and the <span
class="propinst-content">'content'</span> property</h2>

<p>Authors specify generated content with the :before and :after
pseudo-elements. The <span class="propinst-content">'content'</span>
property of these pseudo-elements specifies what is inserted. :before
and :after <a href="cascade.html#inheritance">inherit</a> any
inheritable properties from the element to which they are
attached.</p>

<div class=example>
<p>For example, the following style rule inserts a quote before and
after every Q element. The color of the quote will be red, but the
font will be the same as the font of the rest of the Q element:</p>

<pre>
Q:before, Q:after {
    content: "\"";
    color: red
}
</pre>
</div>

<p>Non-inherited properties have their <a
href="cascade.html#initial-value">initial value</a>, except for the
<span class="propinst-display">'display'</span> property, which, by
default, will have the value 'inline' in a :before or :after
pseudo-element, whereas its normal initial value is 'block'.</p>

<div class=example>
<p>Because of this, the quote in the previous example is inserted as
an inline box, and not above (or below) the content of the Q. The next
example explicitly sets the <span
class="propinst-display">'display'</span> property to 'block', so that
the inserted text becomes a block:</p>

<pre>
BODY:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}
</pre>
</div>

<!-- #include src=properties/content.srb -->

<p>The value of the <span class="propinst-content">'content'</span>
property is a sequence of strings, URIs, and counters. The various
parts are laid out as inline boxes inside the element.</p>

<P>The values have the following meanings:</p>

<ul>
<li><span class="index-def" title="&lt;string&gt;, definition of"><a
name="value-def-string">&lt;string&gt;</a></span>: ???
<li><span class="index-def" title="&lt;counter&gt;, definition of"><a
name="value-def-counter">&lt;counter&gt;</a></span>: ???
</ul>

<div class=note>
<p><em><strong>Note.</strong> In a future level of CSS, the <span
class="propinst-content">'content'</span> property may accept
additional values, allowing it to vary the style of the generated
content, but in CSS2 the content of the :before or :after
pseudo-element is all in one style.
</em></p>
</div>

<p>[How to do language-dependent quotes? [LANG=fr] Q:before{content:
"«"} doesn't work. How about Q:fr-fr:before {content: "«"} ? or @lang
fr-fr {Q:before{content: "«"}} ?]</p>

<h2>Automatic counters</h2>

<P><em>This is a placeholder.</em>

</body>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->