From bcec766557d6a21a38314bdec31b06aa79924069 Mon Sep 17 00:00:00 2001 From: JulieBlanc Date: Fri, 19 Apr 2019 10:58:24 +0200 Subject: [PATCH] initial Part04 Generated Content --- Part04_Generated-Content.md | 148 ++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100755 Part04_Generated-Content.md diff --git a/Part04_Generated-Content.md b/Part04_Generated-Content.md new file mode 100755 index 0000000..c66ff26 --- /dev/null +++ b/Part04_Generated-Content.md @@ -0,0 +1,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 +

Text of the reference

+``` + +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 `` , 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 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. + + + + + -- 2.22.0