CSS Generated Content Module Level 3

	  .new::before {
	    content: url(./img/star.png) / "New!";
        /* or a localized attribute from the DOM: attr("data-alt") */
	  }
	  

	  .expandable::before {
	    content: "\25BA" / ""; 
		/* a.k.a. ► */
	    /* aria-expanded="false" already in DOM,
	       so this pseudo-element is decorative */
	  }
	  

Content Values and Functions

String

<>

The element or pseudo-element contains the specified string. Occurrences of white space characters in the string are handled according to the properties given in the [[CSS3TEXT]] module.

URI

<>

For URIs other than URIs in the last comma separated section of the value, if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any.

		h1 { content: url(header/mng), url(header/png), none; }
		

content: url(1), url(2), url(3), contents;

What happens when no formats are supported, and the author does not explicitly indicate a fallback? Why doesn't an element fallback to ''content/contents'' unless an author explicitly says so? If the URI is part of the last comma separated value in the list, as the second URI in the following example:

h1 { content: url(welcome), "Welcome to: " url(logo); }

There appears to be some change from [[CSS21]] which says, "If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed." Are we now saying that a user agent cannot display a missing image graphic in this situation? When a URI is used as replaced content, it affects the generation of ''::before'' and ''::after'' pseudo-elements.

Element Content

contents

The element's descendents. Since this can only be used once per element (you can't duplicate the children if, e.g., one is a plugin or form control), it is handled as follows: : If set on the element: :: Always honoured. Note that this is the default, since the initial value of 'content' is ''content/normal'' and ''content/normal'' computes to ''content/contents'' on an element. : If set on one of the element's other pseudo-elements: :: Check to see that it is not set on a "previous" pseudo-element, in the following order, depth first: 1. the element itself 2. ::before 3. ::after Issue: Should this behave as an empty string on pseudo-elements? If it is already used, then it evaluates to nothing (like ''content/none''). Only pseudo-elements that are actually generated are checked.

				foo { content: normal; }   /* this is the initial value */
				foo::after { content: contents; }
				

				foo { content: none; }
				foo::after { content: contents; }
				

Use cases for suppressing the content on the element and using it in a pseudo-element would be welcome. Note that while it is useless to include ''content/contents'' twice in a single 'content' property, that is not a parse error. The second occurrence simply has no effect, as it has already been used. It is also not a parse error to use it on a marker pseudo-element, it is only during the rendering stage that it gets treated like ''content/none''.

Do we need the statement about marker pseudo-elements here? Or is this legacy from the old version of the spec?

Quotes

Specifying quotes with the 'quotes' property

    Name: quotes
    Value: [ <> <> ]+ | none
    Initial: depends on user agent
    Applies To: all elements
    Inherited: yes
    Percentages: n/a
    Computed Value: specified value
    Media: all

The previous ED had an initial value of ''text'', which was an error. [[CSS21]] has initial value of "depends on user agent". Do we use auto for things like this, or is it just a UA stylesheet issue? This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:

none

The ''open-quote'' and ''close-quote'' values of the 'content' property produce no quotations marks, as if they were ''no-open-quote'' and ''no-close-quote'' respectively.

[ <> <> ]+

Values for the ''open-quote'' and ''close-quote'' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.

The *-quote values of the content property

		<> = [open-quote | close-quote | no-open-quote | no-close-quote]
	

open-quote

close-quote

These values are replaced by the appropriate string from the 'quotes' property, and increments (decrements) the level of nesting for quotes. See [[#quotes-property]] for more information.

no-open-quote

no-close-quote

Inserts nothing (as in ''content/none''), but increments (decrements) the level of nesting for quotes. See [[#quotes-property]] for more information.

		blockquote p:before { content: open-quote }
		blockquote p:after { content: no-close-quote }
		blockquote p:last-child::after { content: close-quote }
	

	:lang(fr) > * { quotes: "\00AB\2005" "\2005\00BB" "\2039\2005" "\2005\203A" }
	:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019" }
	

	:lang(fr) > * { quotes: "« " " »" "‹ " " ›" }
	:lang(en) > * { quotes: "“" "”" "‘" "’" }

	

/* Specify pairs of quotes for two levels in two languages */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "«" "»" "’" "’" }

/* Insert quotes before and after Q element content */
q::before { content: open-quote }
q::after  { content: close-quote }

<html lang="en">
  <head>
    <title>Quotes</title>
  </head>
  <body>
    <p><q>Quote me!</q></p>
  </body>
</html>

"Quote me!"

<html lang="no">
  <head>
    <title>Quotes</title>
  </head>
  <body>
    <p><q>Trøndere gråter når <q>Vinsjan på kaia</q> blir deklamert.</q></p>
  </body>
</html>

«Trøndere gråter når ’Vinsjan på kaia’ blir deklamert.»

Leaders

The ''leader()'' function

leader()

Inserts a leader. See the section on leaders for more information.

		leader() = leader( dotted | solid | space | <>);
	

dotted

Equivalent to ''leader(".")''

solid

Equivalent to ''leader("_")''

space

Equivalent to ''leader(" ")''

<>

Issue: Define this.

	ol.toc a::after {
	  content: leader('.') target-counter(attr(href), page);
	}

	<h1>Table of Contents</h1>
	<ol class="toc">
	<li><a href="#chapter1">Loomings</a></li>
	<li><a href="#chapter2">The Carpet-Bag</a></li>
	<li><a href="#chapter3">The Spouter-Inn</a></li>
	</ol>

	

	Table of Contents

	1. Loomings.....................1
	2. The Carpet-Bag...............9
	3. The Spouter-Inn.............13
	

Do leaders depend on the assumption that the content after the leader is right-aligned (end-aligned)?

Rendering leaders

1. The leader string must appear in full at least once.
2. The leader should be as long as possible
3. Visible characters in leaders should vertically align with each other when possible.
4. Line break characters in the leader string must be ignored.
5. White space in the leader string follows normal CSS rules.
6. A leader only appears between the start content and the end content.
7. A leader only appears on a single line, even if the before content and after content are on different lines.
8. A leader can’t be the only thing on a line.

Procedure for rendering leaders

1. Lay out the before content, until reaching the line where the before content ends.

   BBBBBBBBBB
   BBB
   

2. The leader string consists of one or more glyphs, and is thus an inline box. A leader is a row of these boxes, drawn from the end edge to the start edge, where only those boxes not overlaid by the before or after content. On this line, draw the leader string, starting from the end edge, repeating as many times as possible until reaching the start edge.

   BBBBBBBBBB
   ..........
   

3. Draw the before and after content on top of the leader. If any part of the before content or after content overlaps a glyph in a leader string box, that glyph is not displayed.

   BBBBBBBBBB
   BBB....AAA
   

4. If one full copy of the leader string is not visible:

   BBBBBBB
   BBBBBBA
   

   Insert a line break after the before content, draw the leader on the next line, and draw the end content on top, and hide any leader strings that are not fully displayed.

   BBBBBBB
   BBBBBB
   ......A
   

Cross references and the target-* functions

• See chapter 7
• in section 4.1
• on page 23

		<> = [ ''target-counter()'' | ''target-counters()'' | ''target-text()'' ]
	

The ''target-counter()'' function

		target-counter() = target-counter( [ <> | <> ] , <> [ , <> ]? )
	

	…which will be discussed on page <a href="#chapter4_sec2"></a>.
	

	a::after { content: target-counter(attr(href url), page) }
	

	…which will be discussed on page 137.
	

<nav>
  <ol>
    <li class="frontmatter"><a href="#pref_01">Preface</a></li>
    <li class="frontmatter"><a href="#intr_01">Introduction</a></li>
    <li class="bodymatter"><a href="#chap_01">Chapter One</a></li>
  </ol>
</nav>

.frontmatter a::after { content: leader('.') target-counter(attr(href url), page, lower-roman) }
.bodymatter a::after { content: leader('.') target-counter(attr(href url), page, decimal) }

Preface.............vii
Introduction.........xi
Chapter One...........1

The ''target-counters()'' function

	target-counters() = target-counter( [ <> | <> ] , <> , <> [ , <> ]? )

I have not found a compelling example for target-counters() yet.

The ''target-text()'' function

	target-text() = target-text( [ <> | <> ] [ , [ content | before | after | first-letter] ]? )

A simpler syntax has been proposed by fantasai: http://lists.w3.org/Archives/Public/www-style/2012Feb/0745.html

…which will be discussed <a href="#chapter_h1_1">later</a>.

a::after { content: ", in the chapter entitled " target-text(attr(href url)) }

Named strings

meta[author] { string-set: author attr(author); }
head > title { string-set: title contents; }
@page:left {
  @top {
    text-align: left;
    vertical-align: middle;
    content: string(title);
  }
}
@page:right {
  @top {
    text-align: right;
    vertical-align: middle;
    content: string(author);
  }
}

The string-set property

Name: string-set
Value: [ <> <>+ ]# | none
Initial: none
Applies to: all elements, but not pseudo-elements
Inherited: no
Percentages: N/A
Media: all
Computed value: specified value

none

The element does not set any named strings.

[ <> <>+ ]#

The element establishes one or more named strings, corresponding to each comma-separated entry in the list. For each entry, the <> gives the name of the named string. It's followed by one or more <> values, which are concatenated together to form the value of the named string.

H1 { string-set: chapter contents; }

The ''string()'' function

	string() = string( <> , [ first | start | last | first-except ]? )

first

The value of the first assignment on the page is used. If there is no assignment on the page, the entry value is used. If no second argument is provided, this is the default value.

start

If the element is the first element on the page, the value of the first assignment is used. Otherwise the entry value is used. The entry value may be empty if the named string hasn’t yet appeared.

last

The exit value of the named string is used.

first-except

This is identical to ''string()/first'', except that the empty string is used on the page where the value is assigned. Issue: we may need to kill the entire content string. Is this necessary?

CSS:

	@page {
	   size: 15cm 10cm;
	   margin: 1.5cm;

	   @top-left {
	   content: "first: " string(heading, first);
	   }
	   @top-center {
	   content: "start: " string(heading, start);
	   }
	    @top-right {
	    content: "last: " string(heading, last);
	   }
	  }

	h2 { string-set: heading content() }
	

The following figures show the first, start, and last assignments of the “heading” string on various pages.

The ''content()'' function

	content() = content( [text | before | after | first-letter | marker ]? )

text

The string value of the element. If no value is specified in ''content()'', it acts as if ''content()/text'' were specified.

before

The string value of the ''::before'' pseudo-element.

after

The string value of the ''::after'' pseudo-element.

first-letter

The first letter of the element, as defined for the ''::first-letter'' pseudo-element

marker

The string value of the ''::marker'' pseudo-element.

	<h1>Loomings</h1>
	

	h1::before { content: 'Chapter ' counter(chapter); }
	h1 { string-set: header content(before) ':' content(text); }
	h1::after { content: '.'; }
	

	<section title="Loomings">
	

	section { string-set: header attr(title) }
	

Automatic counters and numbering: the 'counter-increment' and 'counter-reset' properties (moved)

Now described in [[CSS3LIST]]

Should this move back to CSS Content?

Bookmarks

bookmark-level

Name: bookmark-level
Value: none | <integer>
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value

<integer>

defines the level of the bookmark, with the highest level being 1 (negative and zero values are invalid).

none

no bookmark is generated.

section h1 { bookmark-level: 1; }
section section h1 { bookmark-level: 2; }
section section section h1 { bookmark-level: 3; }

bookmark-label

Name: bookmark-label
Value: <content-list>
Initial: content(text)
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value

<content-list>

<> is defined above, in the section on the 'string-set' property. The value of <> becomes the text content of the bookmark label.

<h1>Loomings</h1>

h1 {
bookmark-label: content(text);
bookmark-level: 1;
}

bookmark-state

Name: bookmark-state
Value: open | closed
Initial: open
Applies to: block-level elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value

open

The bookmarks of the nearest descendants of an element with a bookmark-state of open will be displayed.

closed

any bookmarks of descendant elements are not initially displayed.

Changes since the 14 May 2003 Working Draft

Acknowledgements