Part04_Generated-Content.md 4.33 KB
Newer Older
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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
# Generated Content



One of the important advantages of CSS is that it helps you to separate a document’s style from its content ([W3C](https://www.w3.org/standards/webdesign/htmlcss#whatcss)). The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and display documents to different environments. 

In some case, some elements are not essential to understand the content but are useful for a better reading into different environnements. This can be auxiliary information like insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. ([W3C](https://www.w3.org/TR/CSS2/generate.html))

Generaly, it's better if this element are generate automatically. You will not be bothered by the numbering if a figure is added in the middle of your content at the last minute. A lot of this auxiliary  are also design choices (do you write "Chapter 7" or "Chap. 7" ?), so it is logical that they are declared in CSS.

This element are called *generated content*. You can use CSS to add them when a document is displayed. In technical terms, generated content exists only in the layout of the web document, there are not part of the DOM tree.



## The content property

The `content` property is used with the [::before](https://www.w3schools.com/cssref/sel_before.asp) and [::after](https://www.w3schools.com/cssref/sel_after.asp) pseudo-elements, to insert generated content before or after an element's document tree content.  To specify this, make a rule and add [::before](https://webplatform.github.io/docs/css/selectors/pseudo-elements/::before) or [::after](https://webplatform.github.io/docs/css/selectors/pseudo-elements/::after) to the selector. In the declaration, specify the [content](https://webplatform.github.io/docs/css/properties/content) property with the text content as its value.

For example, the following rule inserts the string "Note: " before the content of every element whose class attribute has the value "note":

```
.note::before { 
	content: "Note: ";
}
```



The style of the element can be specify also info the delaration, like this: 

```
.note::before { 
	content: "Note: ";
	color: red;
	font-weight: bold;
}
```





## Generated text



You can directly declare your text in the css (like above) but you can also use text specify in a data custom attribute.

In your HTML:

```html
<p class="ref" data-ref-id="0215">Text of the reference</p>
```

In your CSS:

```css
p.ref::before{ 
	content: attr(data-ref-id);
}
```



It's also possible to combine elements in the content property:



```css
p.ref::before{ 
	content: 'Reference ' attr(data-ref-id) ': ';
}
```



Once displayed you will have this text: `Reference 0215: Text of the reference` 







## Generated counters



`css-counter`  is a CSS property that lets you count elements within your content. For  example, you might want to add a number before each figure caption. To  do so, you would reset the counter for the `<body>` , increment it any time a caption appears in the content, and display that number in a `::before` pseudo-element.

```
body {
  counter-reset: figureNumber;
}

figcaption {
  counter-increment: figureNumber;
}

figcaption::before {
  content: counter(figureNumber);
}
```





## Generated images

If you need to have an image in your generated content, use this following code: 

```css
.glossary:after {content: " " url("/images/glossary-icon.png");}
```



## Generted links

It can be usefull, espacially for print to display the links of your content. The following example inserts the value of the href attribute in parenthesis after each <a> element:

```css
a::after {
  content: " (" attr(href) ")";
}
```







## Generated content for paged media



Use generated content is possible without paged.js; `content` is a classical property implemented in all browsers.

But to design a book (or a pagined content) you need some elements added to help readers navigate between pages: **running headers and  footers, page numbers, a table of content, an index, cossreferences**; and so on. 

These elements make little sense on the web and don’t exist in HTML content; you need to create them automatically. To do that you can use Generated Content for Paged Media, a combination of syntaxes and properties that paged.js implements.  We will see how to use these special techniques in the next parts.