Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:34 PM

10.4. Generated Content

Generated content is a new way of adding things to existing content without having to alter the content itself. It's done by using the pseudo-elements :before and :after and the property content. Here's a basic example of how it works:

P:before, P:after {content: "\""; color: gray;}
<P>This is a quote.</P>

The browser will display what's shown in Figure 10-15.

Figure 10-15

Figure 10-15. Adding generated content

Note that the double-quote mark was escaped out -- that is, preceded by a backslash. This is necessary, since text values for content must be enclosed in double quotes. You could also place images before (or after) content, using something like P:before {content: url(para.gif);} to put a paragraph symbol at the beginning of each paragraph. You can even string multiple values together like this (shown in Figure 10-16):

P:before {content: url(para.gif) " -- ";}
Figure 10-16

Figure 10-16. Adding an image and text before a paragraph

This would cause each paragraph to be started with a paragraph symbol, a blank space, two dashes, and then another blank space. Note that all of this is considered part of the paragraph and is inlined within it. The spaces appear before and after the double dash because they're included in the string value. If these spaces were omitted, then space would not appear to either side of the dashes.

Let's say, though, that you want to do some real quoting, using real quotation marks -- you know, the curly double quotes that are so hard to specify in HTML and which often don't show up even if you do try to specify them. CSS2 has ways to handle this.

content has some other values you can use:

So if you wanted your quotations to begin and end with quotation marks, instead of typing in a literal quotation mark, you could let the browser insert "smart quotes" for you.

BLOCKQUOTE:before {content: open-quote;}
BLOCKQUOTE:after {content: close-quote;}

10.4.1. Automatic Numbering

In the same vein, CSS2 also includes properties for automatic numbering. First, you can specify a counter as a value of content. This can be a bit tricky, and it would take too long to run through all the possibilities, but here's an example. Say you wanted the chapters and sections of a document numbered 1, 1.1, 1.2, 1.3, and so on. In addition, you're using H1 for your chapters and H2 for your sections. Here are the declarations you would use:

H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter;   /* Add 1 to chapter */
counter-reset: section;       /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}

As we can see from Figure 10-17, the user agent will add the word "Chapter" and a number at the beginning of H1 text. This number is automatically incremented with each H1, due to the declaration counter-increment: chapter;. It also sets the section counter back to zero through counter-reset: section;. Then, for each section heading (H2), the browser uses the chapter number, followed by a period (.) followed by the current section number, which is also automatically incremented.

Figure 10-17

Figure 10-17. Adding counters to elements

You don't have to increment by one every time, either. You can define any integer as the increment value, including zero and negative numbers. If you want each section to have an even number, as we see in Figure 10-18, then you can declare the following:

H2:before {
content: "Section " counter(section) ". ";
counter-increment: section 2; /* Add 2 to chapter */
}
Figure 10-18

Figure 10-18. Changing a counter's incremental value

You can also keep an element from incrementing a counter by setting its display to none. Of course, that will cause the element to disappear altogether.

10.4.2. Markers

You can do even more by using the value marker for the property display, which enables you to define your own marker styles for any element at all. You're already familiar with markers, as it happens -- the bullets and numbers at the beginning of list items are markers.

Let's say we want to recreate the way unordered lists behave. For the purposes of this example, we'll use the image disc.gif to stand in for the normal bullets. Using marker properties, we would declare:

LI:before {display: marker;
content: url(disc.gif);
marker-offset: 1em;
}

This will insert the disc image before each list item, and set it to be offset from the left edge of the LI content by 1em, as shown in Figure 10-19.

Figure 10-19

Figure 10-19. Styling list markers

Marker properties are not restricted to list items, however. Let's say that, throughout a document, there are a few paragraphs with a class of aside. We wish to call attention to these paragraphs by inserting a small note to the side of each one. Here's one way to do it:

BODY {counter-reset: aside-ctr;}
P {margin-left: 10em;}
P.aside:before {display: marker;
content: "Aside " counter(aside-ctr) " --";
counter-increment: aside-ctr;
text-align: right;
marker-offset: 1em;
width: 9.5em;
}

The effect will be something like that seen in Figure 10-20.

Figure 10-20

Figure 10-20. Automatically numbered asides

This is yet another aspect of CSS2 that, once it's been properly implemented, will allow authors to do quite a bit with

With a negative bottom margin, though, it looks as though everythingfollowing the paragraph has been pulled upward. Compare the followingmarkup to the situation shown in Figure 8-23:

Figure 8-23

Figure 8-23. The effects of a negative bottom margin

What's really happening in Figure 8-23 is thatthe elements following the DIV are placedaccording to the location of the bottom of theDIV. As we can see, the end of theDIV is actually above the visual bottom of its their documents.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

B {margin-top: 25px; margin-bottom: 50px;}

This is allowed in the specification, but it will have absolutely noeffect on the line height, and since margins are effectivelytransparent, this will have no visual effect whatsoever -- as youcan see for yourself in Figure 7-21.

Figure 7-21

Figure 7-21. Margins on an inline element

This happens because margins on inline elements don't changethe line height of an element. (In fact, the only properties that canto bold. Each numeric value is at least as heavy as the next-lower value, and at least as light as the next-higher number.

Example

B {font-weight: 700;}

Values

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

paragraphs don't contain an explicit inline element such asSPAN.

In order to get from this simplified state to something morefamiliar, all we have to do is determine how wide the element shouldbe, and then break up the line so that the resulting pieces will fitinto the width of the element. Thus we arrive at the state shown inFigure 8-46.

Figure 8-46

Figure 8-46. A multiple-line inline element

XML is platform independent, textual information

Information in an XML document is stored in plain-text. This might seem like a restriction if were thinking of embedding binary information in an XML document. There are several advantages to keeping things plain text. First, it is easy to write parsers and all other XML enabling technology on different platforms. Second, it makes everything very interoperable by staying with the lowest common denominator approach. This is the whole reason the web is so successful despite all its flaws. By accepting and sending information in plain text format, programs running on disparate platforms can communicate with each other. This also makes it easy to integrate new programs on top of older ones (without rewriting the old programs), by simply making the interface between the new and old program use XML.

For example, if you have an address book document stored in an XML file, created on a Mac, that you would like to share with someone who has a PC, you can simply email them the plain text address book XML document. This cant be done with binary encoded information which is totally platform (and program) dependent.

Another example is web enabling legacy systems. It is very feasible to create a Java web ennoblement application server that simply uses the services provided by the underlying legacy system. Instead of rewriting the legacy system, if the system can be made to communicate results and parameters through XML, the new and old system can work together without throwing away a company's investment in the legacy system.

XML is an open standard

diminished or lost.  The <BASEFONT> or <FONT> tags can list multiple fonts in order of preference.  The list should include a generic font family as a last resort, e.g.
   <FONT FACE="Creepy, Times New Roman, serif">
Generic font families include serif, sans-serif, monospace, cursive and fantasy

Note that as of HTML 4, you are encouraged to use style sheets instead of these in-line font manipulations, but these tags work fine.